Skip to main content

angular material - Action bar inside an Expansion Panel

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - Action bar inside an Expansion Panel
</h2>


<mat-expansion-panel>
  
  <mat-expansion-panel-header>
    <mat-panel-title>Android</mat-panel-title>
    
    <mat-panel-description>
      Description: I am Android.
    </mat-panel-description>
  </mat-expansion-panel-header>

  Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Pellentesque nec bibendum ligula. Pellentesque imperdiet
  non massa at sodales. Cras nibh elit, iaculis id semper in,
  euismod eu ante. Morbi ac massa pellentesque, porta
  velit sed, elementum ipsum. Duis sed risus sit amet tellus
  euismod consequat sed a ante. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit.
  
  <mat-action-row>
    <button mat-button color="warn" (click)="null">
      Cancel A Task
    </button>
    <button mat-button color="primary" (click)="null">
      Do A Task
    </button>
  </mat-action-row>

</mat-expansion-panel>
app.module.ts [import] 

import {MatExpansionModule} from '@angular/material/expansion'
More Angular tutorials
Labels: