Angular component condition only show when page is reloaded

Question

On my app.component.html I have a condition to show a component if I am on a certain route:

app.component.html

<div *ngIf="router.url === '/home'">
  <app-slider></app-slider>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
...
constructor(public router: Router) {}

This works when the page loads first time but when I go to another route and then come back to the home route it doesn't load so I have to reload the page for the component to show up.

How can I fix this?

Answer 1

you can check for activated route each time.

import { ActivatedRoute } from '@angular/router';
constructor(public activatedRoute: ActivatedRoute) {
    this.activatedRoute.url.subscribe(res => {
    // array of route parts here
    });
}