Στυλισμός ενεργών συνδέσμων στο Angular

Μπορείτε να κάνετε έτσι ώστε οι σύνδεσμοι, των οποίων η URL ταιριάζει με τη γραμμή διευθύνσεων, να ξεχωρίζουν με κάποιο στυλ, για παράδειγμα, με χρώμα. Για αυτό στο Angular προβλέπεται ένα ειδικό χαρακτηριστικό RouterLinkActive.

Ας δούμε πώς λειτουργεί. Για αρχή ας το εισάγουμε:

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

Ας το γράψουμε στον decorator:

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

Στυλιάστε τους ενεργούς συνδέσμους στο project σας.