We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

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

Temidayo Ajisebutu 4 May, 2019 | 3 min read

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.

Originally published on www.codementor.io

Author's avatar
Temidayo Ajisebutu
Hidden man about to open up to the community
    ExpressJs
    Python
    nodejs
    Linux

Related Jobs

Related Issues

viebel / klipse-clj
viebel / klipse-clj
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • Open
  • 0
  • 0
  • Advanced
  • Clojure
  • $80
viebel / klipse
  • Started
  • 0
  • 2
  • Advanced
  • Clojure
  • $180
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 3
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • 1
  • 0
  • Advanced
  • Clojure
  • $300

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email