disabling entire angular component

Question

I am working on an angular application. Application consists of a parent component which then contains multiple child components. Each child component takes care of a a part of the screen, like top bar, side bar, bottom bar etc etc.

I have a requirement in which I have to grey out some of the child components based on certain state in parent component, so that user is not able to perform any action on those components views.

How can this be achieved? I understand that ng-disabled is used for disabling view elements but it can't be used for div. So what better options are available?

Answer 1

You can add a conditional class to parent div something like

<div [ngClass]="{'disabled':yourCondition}">
<your-component></your-component>
</div>

then in css

.disabled
{
  pointer-events: none;
  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

Demo

Answer 2

You can include the child component in a fieldset container, and set the disabled property of that container with property binding:

<fieldset [disabled]="!childEnabled">
  <my-component></my-component>
</fieldset>

The disabled flag will apply to all the inputs and buttons included in the container. It will also prevent the user from accessing the fields by tabbing with the keyboard.

You can prevent the default styling associated with the fieldset element with the following CSS:

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

See this stackblitz for a demo.