binding classes for component activated by router-outlet

[KingMario]

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

For an Angular UI library like Clarity, regarding the application layout, .content-container class is required for the top level route components.

I'd like to propose a feature request about binding classes for component activated by router-outlet.

Proposed solution

Add an @Input() componentClass = '' to router-outlet directive.

Aafter this.activated is initialized, add the classes to the created or attached component as following:

  this.activated.location.nativeElement.classList.add(...this.componentClass.split(' '));

Alternatives considered

Currently, as mentioned above, for each route component, the following codes should be added in the @Component metadata:

  host:  {
    '[class.content-container]': 'true',
  },

Adding componentClass to router-outlet solves it more directly and concisely.

[atscott]

@KingMario Can you show an example? Based on the linked ui library, I’m actually wondering why the content-container would be in each routed component rather than your app shell with the router-outlet being inside there.

Alternatively, why not wrap the outlet in a div and apply the same styles to the routes elements directly (something like .my-container > :not(router-outlet)).

[KingMario]

Hi @atscott. Thanks for your comment.

That's a good question. In fact, the CSS way definitely works with well-set selectors. But I think there are some cases where I can't currently provide examples, more effort is needed on the css way than simply adding classes to each attached/activated component.

[KingMario]

Hi @atscott.

An example came to mind. If you want to follow the layout of some UI library like bootstrap. You may want to add classes to your components so that when the UI library is upgraded, you don't have to check out the UI library's classes and copy the changes to your own style files. Both methods work though.