0

Tenho duas abas e preciso trocar de abas através do click em um botão. Geralmente trabalho com rotas, mas nesse caso preciso trocar apenas de aba, na mesma página web.

Tenho as seguintes Tabs, TAB 1 e TAB 2. Considerando que eu esteja na TAB 1, qual seria uma maneira possível de ir para a TAB 2 através de um click no botão GO?

Utilizo Angular 2 e as tabs do Ng-bootstrap.

OBS: Não posso utilizar 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>

1 Resposta 1

1

Infelizmente não consegui rodar um demo, mas segundo a documentação, seria basicamente assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .