creating html nav-tabs dynamic in angular 6

Question

I am very new to angular 6, I have created tabs in HTML and I need to convert it in angular 6 and also make it dynamic. below is my HTML code-

<ul class="nav nav-tabs side_nav" role="tablist">
  <li role="presentation" class="dashboard_li active">
     <a href="#one" class="coin_name" aria-controls="one" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation" class="dashboard_li">
    <a href="#two" class="coin_name" aria-controls="two" role="tab" data-toggle="tab"></a>
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="one"></div>
  <div role="tabpanel" class="tab-pane active" id="two"></div>
</div>

I have converted it angular 6, below is my angular code -

<ul class="nav nav-tabs side_nav" role="tablist">
  <li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
    <a (click)="selectedwallet = coinwallet" aria-controls="one" role="tab" data-toggle="tab"></a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="one"></div>
  <div role="tabpanel" class="tab-pane active" id="two"></div>
</div>

Now I have two pints here - 1- how would I make tab-content dynamic according to tabs 2- Currently tabs are not working, as I am changing from one tab to another tab, tab-content always remain same, it's not changing according to the tab. Any help would be appreciated. Thanks in advance.

Abdul Rafay · Accepted Answer · 2018-07-26 08:12:34Z

10

you need to show/hide tab-content using *ngIf angular directive

<ul class="nav nav-tabs side_nav" role="tablist">
  <li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
    <a (click)="selectedwallet = wallet" aria-controls="one" role="tab" data-toggle="tab">{{wallet}}</a>
  </li>
</ul>

<div class="tab-content">
  <div *ngIf="selectedwallet === coinwallet[0]" role="tabpanel" class="tab-pane active" id="one">wallet 1 content</div>
  <div *ngIf="selectedwallet === coinwallet[1]" role="tabpanel" class="tab-pane active" id="two">wallet 2 content</div>
</div>

.ts:

  coinwallet: string[] = ['wallet1','wallet2'];
  selectedwallet = this.coinwallet[0];

check working code here

answered Jul 26, 2018 at 8:12

Abdul Rafay

3,3915 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nitish Kumar Over a year ago

Thanks for your reply and the link you've mentioned is working fine but when I edited that code according to my project needs, it's not working export class AppComponent { coinwalletTab: string[] = ['wallet1','wallet2']; selectedwalletTab = this.coinwalletTab[0]; coinwallet: string[]; selectedwallet: any; OnInit(){ this.coinwallet = ['wallet1', 'wallet2']; this.selectedwallet = this.coinwallet[0]; }

Abdul Rafay Over a year ago

leave OnInit() blank and why did you declare 'selectedwallet: any'?

Abdul Rafay Over a year ago

@NitishKumar show me your code somewhere like in stackblitz or jsfiddle or just update your question with your complete code.

Sathishkumar Over a year ago

how to create tab-content also dynamically?

Umang Patel · Accepted Answer · 2018-07-26 08:56:58Z

0

I think rather than converting HTML tabs to Angular, You can directly user ng-bootstrap components which works very well with Angular and comes with lot of configurable options. below is a link for ng-bootstrap tabs

https://ng-bootstrap.github.io/#/components/tabs/examples

answered Jul 26, 2018 at 8:56

Umang Patel

1333 bronze badges

1 Comment

Nitish Kumar Over a year ago

Thanks for your reply, But I have already created those tabs and if I change the tabs, I would have to change a lot of content so that won't be a solution

Collectives™ on Stack Overflow

creating html nav-tabs dynamic in angular 6

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related