Angular2 - how not to lose the link of styles when connecting a component?

Question

css

Essence of the question:

<div style="display: flex">
<app-component><!-- Внутри флекс элементы --></app-component>
</div>

In this case, the connection is lost and the flex element becomes <app-component>, and not what is inside.
Question: How to fix this? The component must remain a directive.

Answer 1

<div>
    <app-component><!-- Внутри флекс элементы --></app-component>
</div>

...
@Component({
  selector: 'app-component',
  templateUrl: '...',
  host: {
    'class': 'app-flex-style'
  }
})
export class AppComponent {
  ....
}

and prescribe to the class .app-flex-style { display: flex } and everything else you need. No need to litter html, and you need to put everything on the shelves for easy manipulation of the application

Answer 2

There is one more option that can be useful in some cases (for example, when working with tables).
Add an attribute to the component selector:

...
@Component({
  selector: 'app-component,[appComponent]',
  templateUrl: '...',
})
export class AppComponent {
  ....
}

And then use it on the element:

<div appComponent style="display: flex">
  <!-- Внутри флекс элементы -->
</div>

Answer 3

<div>
<app-component style="display: flex"><!-- Внутри флекс элементы --></app-component>
</div>

Answer 4

You can keep the project on https://c9.io/ and then you can edit it both on the iPad and on the Android tablet.