How to toggle Angular material expansion panel programmatically

Question

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?

user_5782347 · Answer

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


    
        
            
                Personal data
            
            
                Type your name and age
                account_circle
            
        

        
            
        

        
            
        

        
            
        
    

    
        
            
                Destination
            
            
                Type the country name
                map
            
        

        
            
        

        
            
            
        
    

    
        
            
                Day of the trip
            
            
                Inform the date you wish to travel
                date_range

user_5279156 · Answer

Simple implementation for array of panels


    ...
    
    ...

And in code

indexExpanded: number = -1;

togglePanels(index: number) {
    this.indexExpanded = index == this.indexExpanded ? -1 : index;
}

user_9268047 · Answer

Another very simple way to handle Mat Expansion panel programmatically is by using local references in Angular

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:

user_5116008 · Answer

You can set a var, in this case I used "isExpanded" then use it to open and close set the boolean value.

If you want to use it with the integrated toogle button instead you must update the "isExpanded" var with the "(opened)" and "(closed)" hooks from mat-expansion-panel.

user_10336440 · Answer

app.component.html:



    
        
            This an expansion panel
            xpandStatus is {{xpandStatus}}
        
        Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.

app.component.ts

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    xpandStatus = true;
}

Here it is live in StackBlitz: https://stackblitz.com/edit/angular-gtsqg8

user_4113504 · Answer

Suppose you are looking for the way to trigger open() method from the component on button click, this is what I've been able to get from the material API documentation.

import { ViewChild } from '@angular/core';
import { MatAccordion, MatExpansionPanel } from '@angular/material/expansion';
    
export class MyComponent implements OnInit {
    @ViewChild(MatExpansionPanel) pannel?: MatExpansionPanel; 
    @ViewChild(MatAccordion) accordion?: MatAccordion;
    
    constructor(){}
    
    closePannel() { // for expansion panel only
        if(!this.pannel) { return }
        this.pannel.close();
    }
    
    closeAll() { // for all panels in accordion
        if(!this.accordion) { return }
        this.accordion.closeAll();
    }
}

How to toggle Angular material expansion panel programmatically

6 Answers