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?

[disabled]="condition"

maryrio7
– maryrio7

2019-09-26 16:18:29 +00:00
Commented Sep 26, 2019 at 16:18 — maryrio7
– maryrio7, Commented Sep 26, 2019 at 16:18
I dont think that works for divs. Would give a try though.

Mandroid
– Mandroid

2019-09-26 16:23:34 +00:00
Commented Sep 26, 2019 at 16:23 — Mandroid
– Mandroid, Commented Sep 26, 2019 at 16:23

Ravikant · Accepted Answer · 2019-09-26 16:32:07Z

11

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

edited Sep 26, 2019 at 16:32

answered Sep 26, 2019 at 16:25

Ravikant

1421 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Parenteau Over a year ago

We can still access the field by tabbing with the keyboard, and modify the value (see the stackblitz).

Martin Parenteau · Accepted Answer · 2019-09-26 16:45:07Z

9

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.

answered Sep 26, 2019 at 16:45

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Collectives™ on Stack Overflow

disabling entire angular component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related