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 pa

Answer 1

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 programetically 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
      
    

    
      
    

    
      
    

    
      Next
    
  

  
    
      
        Destination
      
      
        Type the country name
        map
      
    

    
      
    

    
      Previous
      Next
    
  

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

    
      
    
    

    
      Previous
      End