How to catch routes in *ngIf

Question

So I want to make an anchor element on my Header disappear when a specific page is hit. How can I catch the url in the *ngIf when that page is hit.

I have a header which will remain same for all pages. Just need to hide an anchor element when I am routed at /home. How to catch this "/home" in *ngIf?

*ngIf = "href='/home'" is not working. Any alternatives?

Try *ngIf="[routerLinkActive]=="'/home'"; not tested – Ketan Akbari Jun 08 '17 at 07:43 — Ketan Akbari, Jun 08 '17 at 07:43

score 26 · Accepted Answer · edited Dec 20 '21 at 18:30

26

mycomponent.component.ts

import { Router } from '@angular/router'

class MyComponent {
    constructor(public router: Router) { }
}

mycomponent.component.html

<div *ngIf="router.url === '/some/route'">
    <!-- … -->
</div>

edited Dec 20 '21 at 18:30

David Wolf

1,400
1
9
18

answered Jun 08 '17 at 08:31

Always Learn

662
6
14

3

Attention, `router` must be `public` instead of `private`, please update your answer. – giovannipds Jan 11 '21 at 15:35
This answer is WRONG. router must be public. – Russell Trahan Apr 15 '21 at 16:28

score 9 · Answer 2 · edited Dec 20 '21 at 18:29

I came to this page because I had the same issue than Ravy but the proposed solutions were not ok for me.

The accepted answer is not working if you are using route path with query params.

Here's the solution I use:

mycomponent.component.ts

import { Router } from '@angular/router'

class MyComponent {
    constructor(public router: Router) { }
}

mycomponent.component.html

<div *ngIf="router.isActive('/some/route')">
    <!-- … -->
</div>

score -3 · Answer 3 · answered May 06 '19 at 15:39

-3

// mycomponent.component.ts

class MyComponent {
    constructor(public router: Router){

    }
}

// mycomponent.component.html

<div *ngIf="this.router.url === '/some/route'">

</div>

answered May 06 '19 at 15:39

Álvaro Blázquez Sarabia

45
1
5

1

Not needed to use `this` on your template filem just `router.url` – giovannipds Jan 11 '21 at 15:36

How to catch routes in *ngIf

3 Answers3

Linked