Swap tabs ngb-tabset with button click

Question

Swap tabs ngb-tabset with button click

Navigation

#1 by (1 votes)

0

I have two tabs and need to change tabs by clicking a button. I usually work with routes, but in this case I need to change only the tab on the same webpage.

I have the following Tabs, TAB 1 and TAB 2. Considering that I am in TAB 1, what would be a possible way to go to TAB 2 by clicking the GO button?

I use Angular 2 and the Ng-bootstrap tabs.

NOTE: I can not use JQuery.

<ngb-tabset>
<ngb-tab title="TAB 1" id="tab1">
  <ng-template ngbTabContent>
      <div class="tab-pane active" id="litaDados" role="tabpanel">
        <form method="post" id="dados" class="form-horizontal">
          <a class="btn btn-secondary"><i _ngcontent-c1 class="fa fa-plus" aria-hidden="true"></i>&nbsp;ABA 1</a>
            <div class="form-group">
             <p>ABA 1</p>
              <button type="button" title="GO" click="go()" </button>
            </div>
          </form>
      </div>
    </ng-template>
  </ngb-tab>

 <ngb-tab title="TAB 2" id="tab2">
  <ng-template ngbTabContent>
  <div class="tab-pane active" id="litaDados2" role="tabpanel">
    <form method="post" id="dados2" class="form-horizontal">
      <a class="btn btn-secondary"><i _ngcontent-c1 class="fa fa-plus" aria-hidden="true"></i>&nbsp;ABA 2</a>
        <div class="form-group">
         <p>ABA 2</p>
        </div>
      </form>
  </div>
  </ng-template>
  </ngb-tab>
</ngb-tabset>

html angular click tabs

asked by anonymous 24.11.2017 / 17:14

1 answer

Make an alias for webmail Faster way to use CSS [closed]

score 1 · Accepted Answer

Unfortunately I could not run a demo, but according to the documentation, it would basically be like this:

<!-- Repare que aqui adicionei o #tabset="ngbTabset" -->
<ngb-tabset #tabset="ngbTabset">
  <ngb-tab title="TAB 1" id="tab1">
    <ng-template ngbTabContent>
      <div class="tab-pane active" id="litaDados" role="tabpanel">
        <form method="post" id="dados" class="form-horizontal">
          <a class="btn btn-secondary">
            <i _ngcontent-c1 class="fa fa-plus" aria-hidden="true"></i>&nbsp;ABA 1
          </a>
          <div class="form-group">
            <p>ABA 1</p>
            <!-- Ao invés de usar Jquery ou uma função,
                 basta passar o select com o #tabset inserido lá acima,
                 desta forma você vai conseguir chamar a tab pelo id -->
            <button (click)="tabset.select('tab2')">GO</button> 
          </div>
        </form>
      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="TAB 2" id="tab2">
    <ng-template ngbTabContent>
      <div class="tab-pane active" id="litaDados2" role="tabpanel">
        <form method="post" id="dados2" class="form-horizontal">
          <a class="btn btn-secondary">
            <i _ngcontent-c1 class="fa fa-plus" aria-hidden="true"></i>&nbsp;ABA 2
          </a>
          <div class="form-group">
            <p>ABA 2</p>
          </div>
        </form>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>