An easy way to create tabs using NgSwitch in Angular 2+

Published Apr 17, 2018

Hi guys,
So basically I was working on a project and I needed to fix up a tab and I was looking for an easy way out, based on the fact that I am very lazy. Then it seems like something was listening to me and VOILA!! a friend of mine hit me up that he had a problem that I should put him through, as a nice friend I told him to come over, while looking at his code I saw something very nice.

He created a tab just by using ngSwitch and it was hella simple. I just had to share this because just like I was in pain trying to figure out a simple way to go about it, I know a lot of people probably have the same issue.

Not like using *ngIf wasn’t good even but I guess it was as neat and straight to the point as what I am about to show you.

So let’s begin

We would start by creating a new project on Angular 2+

ng new app ngSwitchTab

with ngSwitchTab as the name of the project we are using to create the ngSwitch Tutorial.

After doing the above we wait a while for the node_modules to install, based on the speed of your internet the time taken to do this process varies.
Next up,
After setting up the project we want to start with the code proper.
Rather than creating a new component to be responsible for the app, we are going to use the app.component files.

App.component.html

<hello name="{{ name }}"></hello>
<p>
  Here's an easy way to use ngSwitch to create tabs. :)
</p>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Toggle Tabs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,700" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="tab-slider--nav">
      <ul class="tab-slider--tabs">
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab1'" rel="tab1" (click)="viewMode ='tab1'">Tab 1</li>
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab2'" rel="tab2" (click)="viewMode ='tab2'">Tab 2</li>
      </ul>
    </div>
    <div class="tab-slider--container" [ngSwitch]="viewMode">
      <div id="tab1" class="tab-slider--body" *ngSwitchCase="'tab1'">
        <h2>First Tab</h2>
        <p>Toggle switch style tab navigation. Currently only works with two tabs.</p>
        <p>Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla
          vitae elit libero, a pharetra augue.</p>
      </div>
      <div id="tab2" class="tab-slider--body" *ngSwitchCase="'tab2'">
        <h2>Second Tab</h2>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo
          quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
    </div>
  </div>
</body>
</html>

As you can see from the code above we have a variable called viewModewhich is responsible for the housing of the data to be switched, and the ngSwitchCase directives which will be the values the ngSwitch condition fulfills.

Let’s beautify the HTML code. Using a Cascading Style Sheet we will beautify the tab we are trying to create.

We are going to use the default styles.css file in the app directory.

Styles.css

body {
  background: rgba(52, 95, 144, 0.07);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.66667;
}
.container {
  width: 75%;
  margin: 3rem auto;
}
h2 {
  color: #345F90;
  font-size: 24px;
  line-height: 1.25;
  font-family: "Roboto Slab", serif;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tab-slider--nav {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
.tab-slider--tabs {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  height: 35px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--tabs:after {
  content: "";
  width: 50%;
  background: #345F90;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  border-radius: 35px;
}
.tab-slider--tabs.slide:after {
  left: 50%;
}
.tab-slider--trigger {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  color: #345F90;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tab-slider--trigger.active {
  color: #fff;
}
.tab-slider--body {
  margin-bottom: 20px;
}

Now let’s make this work with the Typescript code.

App.component.ts

This file will be responsible for the typescript functionality of the application.

import {
  Component
} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = '!!!';![tutorial image.PNG](https://cdn.filestackcontent.com/cNXErARcS2w9evXI8BbP)
  viewMode = 'tab1';
}

In this component file we are declaring our viewMode to be a default of tab1 meaning tab1 should show first.
You can see the whole code base on Slackblitz .

Thank you.

JavaScript HTML/CSS angular 4

Report

Enjoy this post? Give Temidayo Ajisebutu a like if it's helpful.