Skip to main content

angular material - Expansion Panel afterExpand & afterCollapse event

app.component.ts 

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

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


export class AppComponent {
  message: string = "";
  
  onExpand(){
    this.message = "Expansion animation happened.";
  }

  onCollapse(){
    this.message = "Collapse animation happened.";
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to use
    Expansion Panel afterCollapse and afterExpand event
</h2>


<h3>Event : {{message}}</h3>

<!-- 
  afterExpand event emitted after expansion animation happens.
  afterCollapse event emitted after collapse animation happens.
-->

<mat-expansion-panel 
  (afterCollapse)="onCollapse()" 
  (afterExpand)="onExpand()">
    <mat-expansion-panel-header>
      <mat-panel-title>AutoML</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: