CODEWITHSUNDEEP
angulartabs
Red Cricket
Red Cricket

Reputation: 10470

Tabs displaying wrong content

I am having trouble getting tabs to work.

Here is my html:

<div class="secondary-tabs">
    <ul class="tabs">
        <li id="tab-one" (click)="selectTab('one')" [class.active]="selectedTab == 'one'">
            <a>
                <div class="tab__heading" title="One">One</div>
            </a>
        </li>
        <li id="tab-two" (click)="selectTab('two')" [class.active]="selectedTab == 'two'">
            <a>
                <div class="tab__heading" title="Two">Two</div>
            </a>
        </li>
        <li id="tab-three" (click)="selectTab('three')" [class.active]="selectedTab == 'three'">
            <a>
                <div class="tab__heading" title="Three">Three</div>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-one-content" [class.tab-pane.active]="selectedTab == 'one'">first tab </div>
        <div id="tab-two-content" [class.tab-pane.active]="selectedTab=='two'">second tab </div>
        <div id="tab-three-content" [class.tab-pane.active]="selectedTab=='three'">thrid tab </div>
    </div>
</div>

Here is my component code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})
export class FooComponent implements OnInit {

  selectedTab: string;

  constructor() { }
  selectTab(tab:string) {
    this.selectedTab = tab;
    console.log( 'selectedTab is now ' + this.selectedTab);
  }
  ngOnInit() {
    this.selectedTab = 'one';
  }

}

The problem is the rendered web page looks like this when I click on the One tab:

When I click on the One tab

And it looks like this when I click on the Two tab:

Two tab

And like this when I click on Three:

enter image description here

What am I doing wrong here? Thanks

Upvotes: 0

Views: 181

Answers (1)

DrNio
DrNio

Reputation: 1976

It could a problem with your css. Maybe there is a display:none that applied in active ? How is your css looking ?

I would change the [class.tab-pane.active] to *ngIf, for example <div id="tab-one-content" *ngIf="selectedTab === 'one'">first tab </div>

Edit: Also [class.tab-pane.active] doesn't look super nice. I would suggest moving the tab-pane outside the angular binding for example <div id="tab-one-content tab-pane" [class.active]="selectedTab == 'one'">first tab </div> because you only want to toggle the active class.

Upvotes: 1

Related Questions