How to add a CSS class to Angular parent when using router-outlet for child

Question

I have a structure like this

<!-- parent -->
<div>
  <!-- child gets injected by router -->
  <router-outlet></router-outlet>
</div>

I want to add a class to the parent div if the router produces a particular child component. I saw a similar question with presumably a correct answer but it does not use the router so it will not work for me.

Answer 1

You can inject the Router into your parent component, and use [ngClass] .

constructor(public router: Router) { }

Then in the template:

<div class="container" [ngClass]="{'test' : router?.url === '/home'}">

  <router-outlet></router-outlet>
</div>

This will add a class called test if the router is set to /home .

You can see it in action here