Сменить активную загрузочную навигацию с помощью угловой

Question

В моем проекте angular 6 я использую начальную загрузку 4, в частности я использую nav-pills и хочу изменить активный nav-item из компонента.

так Как я могу установить активную навигацию из компонента?.

$('#someTab').tab('show') из bootstrap , кажется, не работает от меня.

это НАВ-ПИЛЛЫ

<ul class="nav nav-pills nav-pills-warning" role="tablist">
   <li class="nav-item">
     <a class="nav-link active" data-toggle="tab" href="#link1" role="tablist">
         Profile
      </a>
    </li>
    <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#link2" role="tablist">
             Settings
       </a>
    </li>
 </ul>


<div class="tab-content tab-space">
  <div class="tab-pane active" id="link1">
   Collaboratively administrate .......
  </div>
  <div class="tab-pane" id="link2">
    Efficiently unleash......
  </div>
</div>