DEV Community

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

Posted on • Edited on • Originally published at codever.dev

4 1

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" :

<mat-expansion-panel
  *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]="bookmark.name | slice:0:100 | highlightHtml: filterText"
           target="_blank"
           (click)="addToHistoryService.promoteInHistoryIfLoggedIn(true, bookmark)"
           (auxclick)="addToHistoryService.onMiddleClickInDescription(true, $event, bookmark)"
        >
          {{"see innerhtml"}}
        </a>
        <sup class="external-link-hint"><i class="fas fa-external-link-alt"></i></sup>
      </h5>
      <h6 class="card-subtitle mb-2 text-muted url-under-title"
          [innerHTML]="bookmark.location | slice:0:120 | highlightHtml: filterText"
      >
        {{"see innerhtml"}}
      </h6>
    </div>
  </mat-expansion-panel-header>

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

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

See it in action at www.codever.land:

Dynamically expand angular material panel


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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay