打开模态时，如何将其设置为模式的第一个选项卡

Question

Here is my code:

<div [id]="id" class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-full">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h6 class="modal-title"</h6>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <form #editViewForm="ngForm" (ngSubmit)="onSubmit()" id="editViewForm" autocomplete="off">
        <div id="tabs" class="modal-body">
          <!--Tabs Nav-->
          <ul class="nav nav-tabs nav-tabs-highlight mb-0">
            <li class="nav-item"><a href="#bordered-tab1" id="active_tab" class="nav-link active" data-toggle="tab">TAB 1</a></li>
            <li class="nav-item"><a href="#bordered-tab2" class="nav-link" data-toggle="tab">TAB 2</a></li>
            <li class="nav-item"><a href="#bordered-tab3" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
            <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab">TAB 4</a></li>
          </ul>
         </div>
        </form>
    </div>
</div>

How can I set TAB 1 to be opened everytime this modal is opened, in case I close modal on tab3 I want to TAB 1 to be active when I open modal again

I've tried this:

I added on the first tab id like this: active_tab , so I said something like this, when this show is called ( modal is opening ) lets set two classess, show and active, but this unfortnatelly does not work...

  show() {
    alert("ok");
    $('#active_tab' + this.id).addClass('active');
    $('#active_tab' + this.id).addClass('show');
    $('#' + this.id).modal('show');

  }

Thanks guys Cheers

Answer 1

Please us [ngClass]="{'active': tabName === 'tab1'}"

 <ul class="nav nav-tabs nav-tabs-highlight mb-0">
        <li class="nav-item"><a href="#bordered-tab1" class="nav-link" [ngClass]="{'active': tabName === 'tab1'}" data-toggle="tab">TAB 1</a></li>
        <li class="nav-item"><a href="#bordered-tab2" [ngClass]="{'active': tabName === 'tab2'}" class="nav-link" data-toggle="tab">TAB 2</a></li>
        <li class="nav-item"><a href="#bordered-tab3" [ngClass]="{'active': tabName === 'tab3'}" class="nav-link" data-toggle="tab" style="display:none;">TAB 3</a></li>
        <li class="nav-item"><a href="#bordered-tab4" class="nav-link" data-toggle="tab" [ngClass]="{'active': tabName === 'tab4'}">TAB 4</a></li>
      </ul>

and on the ngOnInt event of the component, set this.tabName = 'tab1'

tabName: string;  

ngOnInit() {
  this.tabName = 'tab1'
}