Angular Material Collapsible Card

Question

Is there a way to make a collapsible card using angular material? Seems like something that would be fairly popular, but I've been searching for the appropriate angular material component/setting here:Angular Material - Card and found nothing.

Thanks!

Answer 1

Like Will mentioned, just use the expansion panels. https://material.angular.io/components/expansion/overview

Otherwise just create a normal Angular Material card and implement your own collapse mechanic with the [hidden] quality or some CSS (display: none). You can exploit *ngIf and button events to create your own collapsible card. Should not require much code.

Something like this:

<mat-card>
    <mat-card-header>
        <mat-card-title style="font-size: 20px;">My collapsible card title</mat-card-title>
    </mat-card-header>

    <mat-card-content *ngIf="!collapsed">
        <p>This is some example text.</p>
        <p>This text will disappear when you use the action button in the actions bar below.</p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button (click)="collapsed=true">Collapse text</button>
        <button mat-button (click)="collapsed=false">Uncollapse text</button>
    </mat-card-actions>
</mat-card>

Stackblitz: https://stackblitz.com/edit/angular-95ygrr

---

For multiple cards, each card would require their own "collapsed" quality, see Stackblitz: https://stackblitz.com/edit/angular-stsky7

Answer 2

if anyone needs an up to date "solution" with angular material 7 You can put mat-expansion-panel inside mat-card-content and add the class mat-elevation-z0:

<mat-card-content>
   <mat-expansion-panel class="mat-elevation-z0"> 
   ...
   </mat-expansion-panel>
</mat-card-content>

Answer 3

Just like Tal Abziz suggested, the best way to achieve a more fancy angular material collapsible card is to embed a mat-expansion-panel in a mat-card and style the mat-expansion-panel-header a little bit to have absolute position with top and right css properties to be 0px. There you go.

<mat-card style="margin-top:1em; margin-bottom:1em">
    <mat-card-header>
        <mat-card-title> Yemi Orokotan </mat-card-title>
        <mat-card-subtitle>Lagos, Nigeria</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <mat-expansion-panel class="mat-elevation-z0">
            <mat-expansion-panel-header style="position: absolute; right: 0px; top: 0px;">
            </mat-expansion-panel-header>
            <mat-form-field>
                <input matInput placeholder="Occupation">
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="DOB">
            </mat-form-field>
        </mat-expansion-panel>
    </mat-card-content>
</mat-card>