How to Create Tabs in Angular? -

How to Use Angular Material Tabs in Angular ? Creating tabs in your Angular project.

Pre requisites to use Angular Material Tabs in Angular project,

Once you have the above pre requisites accomplished, let’s import the MatTabModule in the app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open your app.component.html and add the following:

<div class="container">
  <mat-tab-group mat-align-tabs="start">
    <mat-tab label="New Employee">
      
    </mat-tab>
    <mat-tab label="All Employees">

    </mat-tab>
  </mat-tab-group>
</div>

Save the above changes and start the project server. Point your browser to http://localhost:4200 and you will be able to see the tabs in your application screen.

Create Tabs in Angular