La <mat-tab-group> una Directiva Angular, se utiliza para crear un diseño en pestañas.
En este capítulo, mostraremos la configuración necesaria para dibujar un control de pestañas usando 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 –
| Step | Description |
|---|---|
| 1 | Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto |
| 2 | Modifique 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. |
| 3 | Compile 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{MatTabsModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatTabsModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
notranslate prettyprinted">label="A"> Apple label="B"> Banana label="C"> Zanahoria
Resultado
Verifique el resultado.
Detalles
- En primer lugar, hemos creado pestañas utilizando el grupo mat-tab.
- A continuación, hemos añadido contenido utilizando la pestaña mat-tab donde cada pestaña representa una pestaña diferente.