Angular Material Tabs | Learn How to Create Tabs in Angular

Angular Material Tabs | Learn How to Create Tabs in Angular.

HTML

<mat-tab-group>
	<mat-tab>
		<ng-template mat-tab-label>First</ng-template>
		<div class="tab-content">
		Tab content gose here...
		</div>
	</mat-tab>				  
	<mat-tab>
		<ng-template mat-tab-label>Second</ng-template>
		<div class="tab-content">
		Tab content gose here...
		</div>
	</mat-tab>				  
	<mat-tab>
		<ng-template mat-tab-label>Third</ng-template>				  
		<div class="tab-content">
		Tab content gose here...
		</div>
	</mat-tab>
</mat-tab-group>

.ts

import { Component, OnInit } from '@angular/core';

declare var AOS: any;
@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.scss']
})
export class MyPageComponent implements OnInit {

  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  constructor() { }

  ngOnInit(): void {
    AOS.init();
  }
}

Angular Material Tabs

Angular Material Tabs

Angular Material Tabs

Angular Material Tabs

app.module.ts

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

imports: [
 MatTabsModule
],

Angular Material Tabs

Angular Material Tabs

Angular Material Tabs

Angular Material Tabs

---

Learn HTML/CSS from W3 School Website

• Angular