web-dev-qa-db-fra.com

créer des onglets de navigation html dynamiques dans angular 6

Je suis très nouveau dans angular 6, j’ai créé des onglets en HTML et j’ai besoin de le convertir en angular 6 et aussi de le rendre dynamique. ci-dessous est mon code HTML-

<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>

Je l'ai converti angulaire 6, ci-dessous est mon code angulaire -

<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>

Maintenant, j'ai deux pintes ici - 1- Comment rendre le contenu des onglets dynamique en fonction des onglets 2- Actuellement, les onglets ne fonctionnent pas, car je change d'un onglet à l'autre, le contenu des onglets reste toujours De même, cela ne change pas en fonction de l'onglet . Toute aide serait la bienvenue. Merci d'avance.

htmlangulartabsangular6
2
Nitish Kumar

vous devez afficher/masquer le contenu de l'onglet à l'aide de la directive *ngIf angular

<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];

vérifier le code de travail ici

5
Abdul Rafay

Je pense que plutôt que de convertir les onglets HTML en Angular, vous pouvez directement utiliser les composants ng-bootstrap, qui fonctionnent très bien avec Angular et sont fournis avec de nombreuses options configurables. ci-dessous est un lien pour les onglets ng-bootstrap 

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

0
Umang Patel