CODEWITHSUNDEEP
angular
Mandroid
Mandroid

Reputation: 7514

disabling entire angular component

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?

Upvotes: 7

Views: 18189

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73751

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.

Upvotes: 9

Ravikant
Ravikant

Reputation: 142

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

Upvotes: 11

Related Questions