Skip to main content

angular material - Expansion Panel opened & closed event

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isExpansionPanelOpened = false;

  onOpened(){
    this.isExpansionPanelOpened = true;
  }

  onClosed(){
    this.isExpansionPanelOpened = false;
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - Expansion Panel opened and closed event
</h2>


<h3>
  Expansion Panel : {{isExpansionPanelOpened? 'Opened' : 'Closed'}}
</h3>


<mat-expansion-panel (opened)="onOpened()" (closed)="onClosed()">
  
  <mat-expansion-panel-header>
    <mat-panel-title>Android</mat-panel-title>
    
    <mat-panel-description>
      I am {{isExpansionPanelOpened? 'opened' : 'closed'}}.
    </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-expansion-panel>
app.module.ts [import] 

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