Get current Component in Angular 5

Question

I need to inject css classes based on current component. i.e: if I'm currently on LoginComponent, I need to inject login class into the app.component.html (the greater parent of my app). Like so:

<div class="content login">
    <router-outlet></router-outlet>
</div>

I don't know what the best practices are to handle this. I could also based the injection on url. i.e: if url is xxx./login, then inject login css class.

Any ideas?

Thanks.

See also https://stackoverflow.com/questions/47258429/angular2-how-to-get-the-current-active-component-selector-to-use-it-as-class-gl — yurzui, Dec 11 '17 at 15:45

score 7 · Answer 1 · edited Dec 11 '17 at 15:44

7

<router-outlet> provides some events like

<router-outlet (activate)="currentComponent = $event"></router-outlet>

See also https://angular.io/api/router/RouterOutlet

edited Dec 11 '17 at 15:44

yurzui

205,937
32
433
399

answered Dec 11 '17 at 15:43

Günter Zöchbauer

623,577
216
2,003
1,567

This works well in dev environments, but if you try to compile, minify and deploy this to a production enviroment it converts all the module names to `n` – David Newswanger Sep 28 '18 at 14:47
What module names? I'm not working with Angular since a while. – Günter Zöchbauer Sep 28 '18 at 14:49

score 0 · Answer 2 · answered Dec 11 '17 at 15:53

First, make a mother class with a getter like this

export class ClassNamer {
  get className() { return this.constructor.name.toLowerCase().replace('component', ''); }
}

This will return the class name, to lower case, without the component word.

In your classes, you must do

export class LoginComponent extends ClassNamer { ... }

Now, in your HTML, all you have to do is

<div class="{{className}}"></div>

Voilà !

EDIT If you want to apply the class to the parent component, then in your ClassNamer, add an Output, that emits the className to the parent (but keep in mind that a router outlet isn't a "parent" per se)

Get current Component in Angular 5

2 Answers2