Cómo alternar el panel de expansión de material angular mediante programación

Agradeceríamos tu ayuda para compartir nuestras secciones acerca de las ciencias informáticas.

Solución:

expandido se establece en true para expandir el panel de expansión y establecer false para cerrar el panel de expansión. En el siguiente ejemplo, el panel de expansión se abre y cierra programáticamente. Consulte este enlace

archivo TS

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

archivo HTML

  
    
      
        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
    
  

Implementación sencilla para array de paneles

    ...
    Toggle
    ...

y en codigo

indexExpanded: number = -1;

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

Otra forma muy sencilla de manejar el panel Mat Expansion mediante programación es usando referencias locales en Angular

Ahora en el archivo HTML (no accesible directamente en el archivo TS hasta que usemos @ViewChild), use mep para expandir o colapsar el panel de expansión usando algo como esto:

Expand
Collapse 

Te invitamos a corroborar nuestro cometido dejando un comentario y puntuándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador