Saltar al contenido

Cómo colocar el icono de flecha del panel de expansión Material angular en el lado izquierdo

No olvides que en las ciencias informáticas cualquier problema casi siempere puede tener varias soluciones, no obstante nosotros te mostraremos lo mejor y más eficiente.

Solución:

primero debe importar el ícono de material angular y el módulo del panel de expansión en el archivo app.module.ts,

import MatExpansionModule,MatIconModule from '@angular/material';
...
@NgModule(
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
)
export class AppModule  

Agregue este código en su archivo HTML,

    
      
        
            icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' 
            
header

Agregue este código en su archivo de componentes,

icon: boolean = false;

click()
    this.icon = !this.icon;
  

Gracias,

A partir de Angular Material 8.1.x, puede utilizar el @Input() togglePosition-decorador.

La documentación dice lo siguiente

@Input() cambiarPosición: MatAccordionTogglePosition | La posición del indicador de expansión.

Agrégalo al acordeón así:

Aquí hay un Stackblitz con un ejemplo.

Funcionó para mí solo usando css:

.mat-expansion-indicator 
    position: absolute;
    left: 15px;
  

Eres capaz de añadir valor a nuestro contenido informacional dando tu veteranía en las acotaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *