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.