Material angular 7 – Panel de expansión

La <mat-expansion-panel>,una Directiva Angular, se utiliza para crear una vista resumida de detalle v/s ampliable.

  • – Representa la sección de cabecera. Contiene un resumen del panel y actúa como control para expandir o contraer el panel.
  • – Representa el título del panel.
  • – Representa el resumen del panel.
  • – Representa el panel de acciones en la parte inferior.

En este capítulo, mostraremos la configuración necesaria para dibujar un control de expansión utilizando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatExpansionModule, MatInputModule}de@angular/materialimport{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({{FormsModule,ReactiveFormsModule}de@angular/forms
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatExpansionModule,MatInputModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

)

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

Datos personales
         Escriba el nombre y la edad
      matInputInplaceholder="Nombre">matInputplaceholder="Edad">

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado un panel de expansión utilizando un panel de expansión mate.
  • Luego, hemos añadido título, subtítulo y contenido.