Angularでのアクティブリンクのスタイリング

URLがアドレスバーと一致するリンクを、例えば色など、何らかのスタイルで強調表示することができます。これには、Angularに特別な属性RouterLinkActiveが用意されています。

その仕組みを見てみましょう。まずはインポートします：

import { RouterLinkActive } from '@angular/router';

デコレーターに記述します：

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

次に、この属性をリンクに追加します：

<nav>
	<a
		routerLink="/aaaa-component"
		routerLinkActive="active"
	>
		Aaaa Component
	</a>
	<a
		routerLink="/bbbb-component"
		routerLinkActive="active"
	>
		Bbbb Component
	</a>
</nav>

例でお分かりのように、属性の値はactiveです。これは、アクティブなリンクに適用されるCSSクラス名です。これで、任意のスタイルを適用できるようになります：

.active {
	color: red;
}

あなたのプロジェクトでアクティブリンクをスタイリングしてください。