How to apply flex on Angular component

Note: given the semver adopted from now on by Angular team, I will refer to all versions of Angular2+ as Angular. For the old Angular 1.x I will use AngularJS.

Supposing you want to use the flexbox CSS property to style your Angular app. So you will have a cascade of flex element that at some point will look like this:

<div class="wrapper"> //flex parent
  <angular-component></angular-component>
    <div class="children"> //flex children - inside angular component
    //some content
    </div>
</div>

Now you realize that you cannot apply flex property on the child, because the angular-element is cutting the flex tree.

The solution for this problem is to apply flex property on angular-component using `:host` selector on component CSS style:

:host {
    display: flex;
}

This will apply flex property to the generated DOM node representing the angular-element, thus not breaking the flex tree.