How to create a dynamic underline in a tab system?

Question

I have a dynamic tab system and because of the design every time a tab is active it changes to blue both the text and a line under it. The problem is that I need the line to occupy the entire width of the screen in grey and the blue line appears indicating the active tab just over that same grey line. this is my html

          <div class="tabs d-flex flex-row">
      <div *ngFor='let category of this.market; let i = index'>
          <h2 (click)="selectedTab = i" [ngStyle]="selectedTab === i && {'border-bottom':'4px solid #0E5FA4', 'color':'#0E5FA4'}">{{category.name}}</h2>
      </div>
    </div>     

and here's my css where I create the gray line

.tabs {
  border-bottom: 4px solid #DCE0E6;
  margin-bottom: 20px;
}

As I have it now there is a grey line below the blue line indicating the active text. What I need to create is the effect of the grey line that has a blue stretch just below the active tab text. Here is an stackblitz link https://angular-ivy-er17vx.stackblitz.io . Any idea how to achieve this?

Answer 1

Please try this css:

p {
  font-family: Lato;
}

.tabs {
  display: flex;
  height: 80px;
  border-bottom: 4px solid #DCE0E6;
  margin-bottom: 20px;
}
.tabs > div > h2 {
  margin:0;
  padding: 20px 4px 10px 4px;
  height: 50px;
}

stachblitz

A more robust solution would be to use angular material tabs

Answer 2

In general for tabs with default bottom border and default selected border:

HTML

<span [ngClass]="{ 'active-tab': selectedIndex === i }"
  *ngFor="let item of items; let i = index" 
  (click)="onHeaderTab(i)">
  <span> {{ slide.header }} </span>
</span>

TS

selectedIndex = 0;
onHeaderTab(i){
   this.selectedIndex = i;
       }

CSS

.active-tab {
border-bottom: 2px solid #2f353d;
padding-bottom: 4px;
   }