How to develop tabs in angular7 which switch among two different components?

Question

I have generated three different components in angular 7 project

ng g c mycomp1
ng g c mycomp2
ng g c mycomp3

now I want to develop a tab in mycop1 component which looks like below

by clicking on First tab it should display HTML or render the content from the same component.
by clicking on the Second tab I required to render content from mycomp2 component(from the different component),
Similarly from the third tab required to render from mycomp3 component. kindly help how can I proceed to do this,
Thanks

Answer 1

let assume we have 4 components (app.component, a.component, b.component, c.component)

check the complete code in the below url https://stackblitz.com/edit/angular-gerrxm

Answer 2

You can have a container that hold all 3 components and add ngIf to each and every component that will decide whether to show it or not.

And of course, you always can use Angular Material Tabs: https://material.angular.io/components/tabs/overview

Answer 3

I don't use Angular Material but you'll need to use the router to navigate to each.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' },

    { path: 'mycomp1', component: MyComp1Component },
    { path: 'mycomp2', component: MyComp2Component },
    { path: 'mycomp3', component: MyComp3Component }
];

Answer 4

Html file :

<div class="tab">
  <button class="tablinks" routerLink="/tab1">Tab 1</button>
  <button class="tablinks" routerLink="/tab2">Tab 2</button>
  <button class="tablinks" routerLink="/tab3">Tab 3</button>
</div>

Using router method in component
<div class="tab">
  <button class="tablinks" (click)="setTab('tab1')">Tab 1</button>
  <button class="tablinks" (click)="setTab('tab2')">Tab 2</button>
  <button class="tablinks" (click)="setTab('tab3')">Tab 3</button>
</div>

<router-outlet></router-outlet>

Ts file :

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(
    private router: Router
  ) {}
  setTab(tabname: string) {
    this.router.navigate([`/${tabname}`]);
  }

}

CSS :

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}