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:

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *