Add a Class when In a certain Route - Angular 2

Question

I'm trying to add a class when Im on a certain route. The code is in my AppComponent, Im using ngClass.

    @Component({
     selector: 'my-app',
     template: `<a [ngClass]="getRoute(router)">
       // Some html code....
    })

and then I have the function on the same app.component.ts

  export class AppComponent  { 
    getRoute(){
     if (this.router.url === '/atendimento'){
      return "hide-bar";
   }
  }
 }

The error I'm getting is the following one:

Property 'router' does not exist on type 'AppComponent'

And yes, I am importing Routes, RouterModule and Router on the header. Can someone help me?

Thanks in advance

Binding to a method this way is usually not a good idea. It will be called every time change detection runs and this is prone to harm the performance of your application. Rather update a field at appropriate events and bind to this field instead. Change detection is quite efficient with fields. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 17, 2017 at 15:20

Günter Zöchbauer · Accepted Answer · 2017-02-17 15:19:21Z

5

You need to inject the router

  export class AppComponent  { 

    constructor(private router:Router) {}

    getRoute(){
     if (this.router.url === '/atendimento'){

answered Feb 17, 2017 at 15:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renê Silva Lima Over a year ago

Thank you very much Gunter, I'll take note of your comments :)

Saravana Manikandan · Accepted Answer · 2017-02-17 16:16:05Z

2

Please inject Router service in to your constructor.

import { Router } from "@angular/router";
export class AppComponent  { 
constructor(private router:Router){}
    getRoute(){
     if (this.router.url === '/atendimento'){
      return "hide-bar";
   }
  }
 }

@Component({ selector: 'my-app', template: ` // Some html code.... })

answered Feb 17, 2017 at 16:16

Saravana Manikandan

2663 silver badges12 bronze badges

Collectives™ on Stack Overflow

Add a Class when In a certain Route - Angular 2

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related