Angular: Build Tabs only with CSS.

No need to use JS with Angular for Tabs

Photo by Florencia Viadana on Unsplash

These are the steps.

1. Have your HTML ready
2. Control selected tab with tab variable
3. Style it

This is the final output.

First, save your HTML ready

<div class="tabs">
  <div class="index">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
  </div>
  <div class="contents">
    <div> Tab 1 contents. Hello </div>
    <div> Tab 2 contents. Angular </div>
    <div> Tab 3 contents. Tabs </div>
  </div>
</div>

Second, control selected tab with tab variable

<div class="tabs">
  <div class="index">
    <div tabindex="0" role="tab"
      (click)="tab=1" (keyup.enter)="tab=1"
      [ngClass]="{active: tab===1}">Tab 1</div>
    <div tabindex="0" role="tab"
      (click)="tab=2" (keyup.enter)="tab=2"
      [ngClass]="{active: tab===2}">Tab 2</div>
    <div tabindex="0" role="tab"
      (click)="tab=3"…