DEV Community

Cover image for How to use angular material expansion panel and accordion
Adrian Matei
Adrian Matei

Posted on • Originally published at codepedia.org

How to use angular material expansion panel and accordion

#angular #angularmaterial #webdev

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 Accordeon Showcase

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

The complete source code 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-header>




  <span class="nt">&lt;ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">&gt;</span>
    <span class="nt">&lt;app-howto-get-started&gt;&lt;/app-howto-get-started&gt;</span>
  <span class="nt">&lt;/ng-template&gt;</span>
<span class="nt">&lt;/mat-expansion-panel&gt;</span>

<span class="nt">&lt;mat-expansion-panel&gt;</span>
  <span class="nt">&lt;mat-expansion-panel-header&gt;</span>
    <span class="nt">&lt;h4&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">&gt;&lt;/i&gt;</span> Save bookmarks<span class="nt">&lt;/h4&gt;</span>
  <span class="nt">&lt;/mat-expansion-panel-header&gt;</span>
  <span class="nt">&lt;ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">&gt;</span>
    <span class="nt">&lt;app-howto-save&gt;&lt;/app-howto-save&gt;</span>
  <span class="nt">&lt;/ng-template&gt;</span>
<span class="nt">&lt;/mat-expansion-panel&gt;</span>

<span class="nt">&lt;mat-expansion-panel&gt;</span>
  <span class="nt">&lt;mat-expansion-panel-header&gt;</span>
    <span class="nt">&lt;h4&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">&gt;&lt;/i&gt;</span> Search bookmarks<span class="nt">&lt;/h4&gt;</span>
  <span class="nt">&lt;/mat-expansion-panel-header&gt;</span>
  <span class="nt">&lt;ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">&gt;</span>
    <span class="nt">&lt;app-howto-search&gt;&lt;/app-howto-search&gt;</span>
  <span class="nt">&lt;/ng-template&gt;</span>
<span class="nt">&lt;/mat-expansion-panel&gt;</span>

<span class="nt">&lt;mat-expansion-panel&gt;</span>
  <span class="nt">&lt;mat-expansion-panel-header&gt;</span>
    <span class="nt">&lt;h4&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">&gt;&lt;/i&gt;</span> Bookmarklets<span class="nt">&lt;/h4&gt;</span>
  <span class="nt">&lt;/mat-expansion-panel-header&gt;</span>
  <span class="nt">&lt;ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">&gt;</span>
    <span class="nt">&lt;app-howto-bookmarklets&gt;&lt;/app-howto-bookmarklets&gt;</span>
  <span class="nt">&lt;/ng-template&gt;</span>
<span class="nt">&lt;/mat-expansion-panel&gt;</span>

<span class="nt">&lt;mat-expansion-panel&gt;</span>
  <span class="nt">&lt;mat-expansion-panel-header&gt;</span>
    <span class="nt">&lt;h4&gt;&lt;i</span> <span class="na">class=</span><span class="s">"fas fa-xs fa-info-circle"</span><span class="nt">&gt;&lt;/i&gt;</span> Codelets<span class="nt">&lt;/h4&gt;</span>
  <span class="nt">&lt;/mat-expansion-panel-header&gt;</span>
  <span class="nt">&lt;ng-template</span> <span class="na">matExpansionPanelContent</span><span class="nt">&gt;</span>
    <span class="nt">&lt;app-howto-codelets&gt;&lt;/app-howto-codelets&gt;</span>
  <span class="nt">&lt;/ng-template&gt;</span>
<span class="nt">&lt;/mat-expansion-panel&gt;</span>






    Enter fullscreen mode
    


    Exit fullscreen mode
    









</mat-accordion>
Enter fullscreen mode Exit fullscreen mode




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

Top comments (0)

Read next

jeet_dhandha profile image

Building and Comparing Table Data Made Easy with @libs-jd/table-data-kit

Jeet Dhandha -

chintanonweb profile image

Mastering JavaScript Memory: A Beginner’s Guide to Stack and Heap

chintanonweb -

therealmrmumba profile image

Top 10 WebSocket Testing Tools for Real-Time Apps (Updated 2024)

Emmanuel Mumba -

itschrislojniewski profile image

Next js for E-Learning Platforms

Chris Lojniewski -