Create Tabs In Angular Using Bootstrap

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations

In this article, I will show you how to create a tab component using bootstrap 4 and angular. The recently angular introduced ngSwitch directive in the angular framework, which is used for conditionally showing and hiding the HTML elements/components.

This may not be the best approach for creating the tab control. The purpose of this article is to show you how to use *ngSwitch structural directive. ❤


Create an angular application by running the following command in terminal

ng new app angular-tab


Remove everything from the app.component.html and add following code

<div class="container" [ngSwitch]="tab">
	<ul class="nav nav-tabs">
		<li class=" nav-item">
			<a (click)="switchTab('about')"
		<li class="nav-item">
			<a href="#" class="nav-link" 

      (click)="switchTab('contact')">Contact Us</a>

	<app-about *ngSwitchCase="'about'"> </app-about>
	<app-contact-us *ngSwitchCase="'contact'"> </app-contact-us>

and in the app.component.ts add following code

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

  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  tab = "about";
  switchTab(tab) { = tab;


Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads