There is a simple way to add a visual disable state to an HTML element.

We just have to add the following CSS class to the parent HTML element we want to disable:

.disabled {
    cursor: initial;
    pointer-events: none;
    opacity: 0.5;
}

Caveats of this method: disabling the elements using CSS only does not disable the keyboard tab focusing. At the time of writing, there is no viable CSS only solution to disable the tab navigation. For this, a tabindex=”-1″ property should be used on the HTML element. To dynamically switch the tabindex we need to use JavaScript to find the element and change the value.

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.