Tab Menu Nav in angular 13

 We have three tab menu in main-tabmenu.component page 
Tab-1 / Tab-2 / Tab-3

Tab-1 default will display, onclick "Move to tab-2" button in the tab-1 then will move to tab-2.

Previous and next button in tab2.component.html page.

 

main-tabmenu.component.html
---------------------------------------

<p>TAB Menu Main Page</p>

<h1 style="background-color: #f00; color: #fff;">{{msg}}</h1>

<div *ngIf="tab1Div">

    <app-tab1 (Tab2DivShow)="EnableTab2($event)" ></app-tab1>

</div>

<div *ngIf="tab2Div" >

    <app-tab2 (Tab3DivShow)="EnableTab3($event)" (Tab1DivShow)="EnableTab1($event)"></app-tab2>

</div>

<div *ngIf="tab3Div">

    <app-tab3></app-tab3>

</div>

-----------------------------------------------------

main-tabmenu.component.ts
----------------------------

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

@Component({
  selector: 'app-components',

  templateUrl: './components.component.html',

  styleUrls: ['./components.component.css']
})

export class ComponentsComponent {

  tab1=true;
  tab2=false;
  tab3=false;

  tab1Div = true;
  tab2Div = false;
  tab3Div = false;

  EnableTab1(EnableTab1:any){
    this.disableTabs();
    this.tab1Div = true;
  }

  EnableTab2(EnableTab2:any){
    this.disableTabs();

    this.tab2Div = true; 
}

  EnableTab3(EnableTab3:any){
    this.disableTabs();
    this.tab3Div = true;
  }

  disableTabs(){
    this.tab1Div = false;
    this.tab2Div = false;
    this.tab3Div = false;
  }
}

-----------------------------------------------------

tab1.component.html
----------------------------

<button (click)="tab2DivDisplay()">Tab-2</button>

tab1.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Output() public Tab2DivShow = new EventEmitter();

tab2DivDisplay(){
  this.Tab2DivShow.emit("This is from Child Message");
}

tab2.component.html
----------------------------

<button (click)="tab1DivDisplay()">Previous-Tab1</button>

<button (click)="tab3DivDisplay()">tttTab-3</button>

tab2.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

  @Output() public Tab1DivShow = new EventEmitter();

  @Output() public Tab3DivShow = new EventEmitter();

  

  tab3DivDisplay(){
    this.Tab3DivShow.emit("This is from Child Message");
  }

  tab1DivDisplay(){
    this.Tab1DivShow.emit("This is from Child Message");
  }

-----------------------------------------------

Folder Structure
---------------------

app / comp

@Input - @Output

 

@Input : - Parent to child communication.

@Output :-  Child to parent 

Parant Component

--------------------------

parent-component.html

<app-parent-component (childInfo)="msg=$event" [fromParent]="parentMsg"></app-parent-component>

<h1 style="background-color: #f00; color: #fff;">{{msg}}</h1>

parent-component.ts

 public parentMsg = "This is parent Message";

  msg: any;

Child Component

------------------

child-component.html

<h1 style="background-color: blue; color: #ffffff; padding: 10px 20px; text-align: center;">

    {{parent}}

</h1>

<button (click)="fireEvent()">Tab-1</button>

child-component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Input('fromParent') public parent: any;

@Output() public childInfo = new EventEmitter();

fireEvent(){

    this.childInfo.emit("This is from Child");

}