Cambiar el estilo de flecha para la flecha predeterminada del panel de expansión

Nuestro equipo de expertos pasados algunos días de investigación y de recopilar de información, hallamos la solución, deseamos que te sea útil en tu trabajo.

Solución:

Sí, es posible. Dale a tu panel de expansión una identificación de referencia, por ejemplo example y establecer el hideToggle propiedad como true.

En el puede colocar sus iconos y utilizar el expanded propiedad del panel para mostrar u ocultar los iconos relevantes.

  
    
      
        Personal data
      
      
        Type your name and age
        play_arrow
        arrow_drop_down
      
    

    
      
    

    
      
    
  

Para proporcionar espacio entre el ícono y la descripción del panel, agregue las siguientes clases en su componente.css:

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description 
  flex-basis: 0;


.custom-header .mat-expansion-panel-header-description 
  justify-content: space-between;
  align-items: center;

He usado iconos de materiales. Puede colocar sus iconos personalizados si lo desea. Aquí hay un enlace a demostración de stackblitz.

extendió la respuesta de @Faisal y según la última versión del material angular, usaremos mat prefix en lugar de md para los componentes de Material.

Material angular 8.1.4

  
    Info
  
  
    play_arrow
    arrow_drop_down
  

Demostración de Stackblitz

valoraciones y reseñas

Si haces scroll puedes encontrar las observaciones de otros desarrolladores, tú de igual forma tienes la libertad de mostrar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador