CODEWITHSUNDEEP
angularangular-routingangular-components
user12050907
user12050907

Reputation:

Change style depending on RouterURL in Angular 8

I have one component named 'NavigatorComponent'. There I have my 'routerLink'. All the urls are attached to different components. Now the scenario is I have to change the link color depending on url it is currently. I am new to Angular and so I have no idea how to do it. Any help will be greatly appreciated. Below is the code snippet for Navigator.html and app-routing.module.ts file.

<ul>
   <li><a class="active" [routerLink] = "'/welcome-information'">Welcome Information</a></li>
   <li><a class="disable" [routerLink] = "'/your-plan'">Select Your Plan</a></li>
   <li><a class="disable" [routerLink] = "'/your-data'">Confirm Your Data</a></li>
   <li><a class="disable" [routerLink] = "'/bank-draft'">Bank Draft</a></li>
   <li><a class="disable" [routerLink] = "'/your-choice'">Finalize Your Choice</a></li>
</ul>

const routes: Routes = [
  {path: 'welcome-information' , component: WelcomeInformationComponent},
  {path: 'your-plan' , component: YourPlanComponent},
  {path: 'your-data' , component: YourDataComponent},
  {path: 'bank-draft' , component: BankDraftComponent},
  {path: 'your-choice' , component: YourChoiceComponent},
];

Upvotes: 1

Views: 214

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Use routerLinkActive directive.

This directive adds a CSS class to an element when the link's route becomes active.

<li><a  routerLinkActive="active" [routerLink] = "'/welcome-information'">Welcome Information</a></li>
<li><a  routerLinkActive="active"  class="disable" [routerLink] = "'/your-plan'">Select Your Plan</a></li>

Demo

Upvotes: 1

Ethan Vu
Ethan Vu

Reputation: 2987

You can use RouterLinkActive to add CSS class to your active link, Exp :

<li><a [routerLinkActive]="['class1', 'class2'] [routerLink] = "'/your-plan'">Select Your Plan</a></li>

Or

<li><a routerLinkActive="class1 class2" [routerLink] = "'/your-plan'">Select Your Plan</a></li>

Upvotes: 0

Related Questions