How to toggle Angular material expansion panel programmatically

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>