Angular 2: router-outlet children styles

Question

Is there any way in Angular 2 to set common styles to every child that is being added by router?

In my particular case I use flex boxes and so I need each parent to have display:flex style. But as you know, each Angular component wrap its content and produce its own container dynamically. I know I can use :host styles to cover this need. I know I can also use ng-deep on the router-outlet parent styles to push them down to the children. Is there any other way to address this?

Answer 1

You can Wrap in div if you want

<div style='display: flex'>
 <router-outlet></router-outlet>
<div>

or

::ng-deep flex {
  display: flex
}