Skip to main content

angular material - Determine an Expansion Panel is disabled or enabled

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to determine whether an
    Expansion Panel is disabled or enabled
</h2>


<h3>
  Expansion Panel is now :
  {{panel.disabled? 'Disabled' : 'Enabled'}}
</h3>

<button 
  mat-raised-button 
  (click)="panel.disabled = !panel.disabled"
  color="primary">
    {{panel.disabled? 'Enable Panel' : 'Disable Panel'}}
</button>

<br/><br/>

<mat-expansion-panel #panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Ruby on Rails</mat-panel-title>
  </mat-expansion-panel-header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Integer vitae semper massa. Donec maximus, dui nec
  dignissim blandit, ante odio varius ex,
  nec volutpat erat justo ac magna.
</mat-expansion-panel>
app.module.ts [import] 

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