DEV Community

Cover image for How to expand dynamically angular material panel
Adrian Matei for Codever

Posted on • Updated on • Originally published at

How to expand dynamically angular material panel

Use the expanded attribute of the mat-expansion-panel element and set it to true when the condition is met.
In the following example a filter pipe is used
and the result is placed in the filteredBookmarks variable which is checked in the condition - [expanded]="filteredBookmarks.length === 1" :

  *ngFor="let bookmark of bookmarks | bookmarkFilter: filterText as filteredBookmarks; index as i"
  [expanded]="filteredBookmarks.length === 1">
  <mat-expansion-panel-header *ngIf="i<15">
    <div class="p-3">
      <h5 class="card-title">
        <a href="{{bookmark.location}}"
           [innerHTML]=" | slice:0:100 | highlightHtml: filterText"
           (click)="addToHistoryService.promoteInHistoryIfLoggedIn(true, bookmark)"
           (auxclick)="addToHistoryService.onMiddleClickInDescription(true, $event, bookmark)"
          {{"see innerhtml"}}
        <sup class="external-link-hint"><i class="fas fa-external-link-alt"></i></sup>
      <h6 class="card-subtitle mb-2 text-muted url-under-title"
          [innerHTML]="bookmark.location | slice:0:120 | highlightHtml: filterText"
        {{"see innerhtml"}}

  <ng-template matExpansionPanelContent>
    <app-bookmark-text [bookmark]="bookmark" [showMoreText]="true"
                       (click)="addToHistoryService.onClickInDescription(true, $event, bookmark)"
                       (auxclick)="addToHistoryService.onMiddleClickInDescription(true, $event, bookmark)">
Enter fullscreen mode Exit fullscreen mode

Project: codever - File: hot-keys-dialog.component.html

See it in action at

Dynamically expand angular material panel

Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

Top comments (0)