Angularда фаол ҳаволаларни стиллаш

URL манзили браузернинг манзил сатибига мос келадиган ҳаволалар қандайдир стил, масалан, ранг билан ажралиб туриши учун қилиш мумкин. Бунинг учун Angularда RouterLinkActive maxsus атрибути назарда тутилган.

У қандай ишлашини кўрамиз. Аввало уни импорт қиламиз:

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;
}

Лойиҳангиздаги фаол ҳаволаларни стилланг.