タブの選択状態をAngularで簡単に実装する。

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

画面上のタブに選択状態を表示する・・・下図のような感じの事をやりたい時があります。


Angularなので、Component側でフラグ（変数）を持って、それをView側で判断・・・という事を思い付きますが、もっと簡単な方法があります。

    <div class="header-nav">
      <ul class="header-nav-tabs">
        <li class="nav-tab" routerLinkActive="nav-tab_active"><a class="nav-link" routerLink="/home/test1">テストタブ１</a></li>
        <li class="nav-tab" routerLinkActive="nav-tab_active"><a class="nav-link" routerLink="/home/test2">テストタブ２</a></li>
      </ul>
    </div>

上記のように「routerLinkActive」と「routerLink」の組み合わせで実現出来ます。

「routerLink」は該当のhtml要素（今回の場合は「a」タグ）をクリックした際の遷移先を指定します。

「routerLinkActive」は、『現在表示している画面（URL）が「routerLink」で指定されているものと一致した場合、指定したクラスを適用する』
という動きをします。

今回の場合は、「nav-tab_active」というCSSクラスに選択状態のスタイルを記述すれば良いわけです。

これでViewでの「*ngIf」地獄から少しは解放されます。


Angular