I just started working on an Angular 4 project with material design.
I am currently working with the expansion component, the API states that a disabled expansion panel can't be toggled by the user, but can still be manipulated programmatically. I don't know however, how you can toggle your panel programmatically.
What is the preferred way in Angular to simulate this?
expanded
is set to true
to expand the expansion panel and set to false
to close the expansion panel. In the following example, expansion panel is programmatically opened and closed. Please refer this link
TS file
import { Component } from '@angular/core';
/**
* @title Expansion panel as accordion
*/
@Component({
selector: 'expansion-steps-example',
templateUrl: 'expansion-steps-example.html',
styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
step = 0;
setStep(index: number) {
this.step = index;
}
nextStep() {
this.step++;
}
prevStep() {
this.step--;
}
}
HTML file
<mat-accordion class="example-headers-align">
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
</mat-panel-title>
<mat-panel-description>
Type your name and age
<mat-icon>account_circle</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput type="number" min="1" placeholder="Age">
</mat-form-field>
<mat-action-row>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
<mat-expansion-panel-header>
<mat-panel-title>
Destination
</mat-panel-title>
<mat-panel-description>
Type the country name
<mat-icon>map</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="Country">
</mat-form-field>
<mat-action-row>
<button mat-button color="warn" (click)="prevStep()">Previous</button>
<button mat-button color="primary" (click)="nextStep()">Next</button>
</mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
<mat-expansion-panel-header>
<mat-panel-title>
Day of the trip
</mat-panel-title>
<mat-panel-description>
Inform the date you wish to travel
<mat-icon>date_range</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
</mat-form-field>
<mat-datepicker #picker></mat-datepicker>
<mat-action-row>
<button mat-button color="warn" (click)="prevStep()">Previous</button>
<button mat-button color="primary" (click)="nextStep()">End</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
Simple implementation for array of panels
<mat-expansion-panel [expanded]="indexExpanded == i" disabled="true" *ngFor="...; let i = index">
...
<button (click)="togglePanels(i)">Toggle</button>
...
</mat-expansion-panel>
And in code
indexExpanded: number = -1;
togglePanels(index: number) {
this.indexExpanded = index == this.indexExpanded ? -1 : index;
}
Another very simple way to handle Mat Expansion panel programmatically is by using local references in Angular
<mat-accordion>
<mat-expansion-panel #mep="matExpansionPanel">
</mat-expansion-panel>
</mat-accordion>
Now in HTML(not accessible directly in TS file until we use @ViewChild) file use mep to expand or collapse Expansion panel using something like this:
<button (click)="mep.expanded = true;">Expand</button>
<button (click)="mep.expanded = false;">Collapse</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With