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.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay