We're planting a tree for every job application! Click here to learn more

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

Temidayo Ajisebutu

10 Jun 2019

3 min read

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

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, like 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 = '!!!';
  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.

Did you like this article?

Temidayo Ajisebutu

Hidden man about to open up to the community

See other articles by Temidayo

Related jobs

See all

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
hello@works-hub.com

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2024 WorksHub

Privacy PolicyDeveloped by WorksHub