Angular material expansion panel and accordion example


Dev-Bookmarks Logo

(P) Bookmarks.dev - Open source Bookmarks and Codelets Manager for Developers & Co. See our How To guides to help you get started. Share your favorites bookmarks with the community and they might get published on Github - Star


I find accordions pretty well suited for FAQs or HowTo pages. That’s why I chose one for the HowTo page of www.bookmarks.dev, which is implemented with angular material expansion panel and accordion.

HowTo Accordion Showcase

This blog post presents the source code for that with a couple of notes.

Octocat Source code for bookmarks.dev is available on Github.

The source code

  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <h4><i class="fas fa-xs fa-info-circle"></i> Get started</h4>
      </mat-expansion-panel-heade}r>

      <ng-template matExpansionPanelContent>
        <app-howto-get-started></app-howto-get-started>
      </ng-template>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <h4><i class="fas fa-xs fa-info-circle"></i> Save bookmarks</h4>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <app-howto-save></app-howto-save>
      </ng-template>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <h4><i class="fas fa-xs fa-info-circle"></i> Search bookmarks</h4>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <app-howto-search></app-howto-search>
      </ng-template>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <h4><i class="fas fa-xs fa-info-circle"></i> Bookmarklets</h4>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <app-howto-bookmarklets></app-howto-bookmarklets>
      </ng-template>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <h4><i class="fas fa-xs fa-info-circle"></i> Codelets</h4>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <app-howto-codelets></app-howto-codelets>
      </ng-template>
    </mat-expansion-panel>
  </mat-accordion>

Notes

  • the mat-expansion-panel components are encapsulated in an mat-accordion element
  • the code itself for the several sections is encapsulated in own component, for better code readability and to access them directly
  • the construct ng-template with the matExpansionPanelContent attribute in the is used to defer initialization until the panel is open. By default, the expansion panel content will be initialized even when the panel is closed
  • by setting the input multi="true" (default false) on mat-accordion you could allow the expansions state to be set independently of each other
Subscribe to our newsletter for more code resources and news

Adrian Matei

Adrian Matei
Life force expressing itself as a coding capable human being

My troubles getting to run a Node application with PM2 in cluster mode with NVM

In this blog post I will list of the trouble I went through getting to run PM2 in cluster mode on an Ubuntu system, on which I had Node.js both standalone installed and managed with NVM. Continue reading