Material angular mat-tab-group

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por el equipo de Angular para crear componentes de diseño para aplicaciones web móviles y de escritorio. Para instalarlo, necesitamos tener angular instalado en nuestro proyecto, una vez que lo tenga, puede ingresar el siguiente comando y descargarlo. mat-tab-group se usa principalmente para los requisitos de la barra de navegación cuando tenemos varias pestañas para mostrar.

Instalación:

ng add @angular/material

Acercarse:

• Primero, instale el material angular usando el comando mencionado anteriormente.
• Después de completar la instalación, importe ‘MatTabsModule’ desde ‘@angular/material/tabs’ en el archivo app.module.ts.
• Luego use la etiqueta <mat-tab-group> para agrupar todos los elementos dentro de esta etiqueta de grupo.
• Dentro de la etiqueta <mat-tab-group> necesitamos usar la etiqueta <mat-tab> para cada elemento.
• También podemos diseñar las pestañas según la posición como inicio, centro y final. Para esto, necesitamos usar una propiedad llamada mat-align-tabs.
• Si queremos cambiar el tema, podemos cambiarlo usando la propiedad de color. En angular tenemos 3 temas, son primarios, acentuados y advertidos.
• Una vez que haya terminado con los pasos anteriores, sirva o comience el proyecto.

Ejemplo:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { MatTabsModule } from '@angular/material/tabs'; 
      
import { AppComponent } from './app.component'; 
import { BrowserAnimationsModule } from 
'@angular/platform-browser/animations';
  
  
@NgModule({ 
  imports: 
  [ BrowserModule, 
    FormsModule, 
    MatTabsModule,
    BrowserAnimationsModule], 
  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ] 
}) 
  
export class AppModule { }

<p>
   Implementation of mat-tab-group for 
   center style and for default theme
</p>
  
<mat-tab-group mat-align-tabs="center">
  <mat-tab label="Home">Home Content</mat-tab>
  <mat-tab label="Overview">Overview Content</mat-tab>
</mat-tab-group>
<br>
  
  
<p>
  Implementation of mat-tab-group for center 
  style and for primary theme
</p>
  
<mat-tab-group mat-align-tabs="center" backgroundColor="primary">
  <mat-tab label="Home">Home Content</mat-tab>
  <mat-tab label="Overview">Overview Content</mat-tab>
</mat-tab-group>
<br>
  
  
<p>
  Implementation of mat-tab-group for center 
  style and for accent theme
</p>
  
<mat-tab-group mat-align-tabs="center" backgroundColor="accent">
  <mat-tab label="Home">Home Content</mat-tab>
  <mat-tab label="Overview">Overview Content</mat-tab>
</mat-tab-group>

Producción: