How to remove angular expression attributes from element

Question

I'd like to know whether it's possible to remove Angular expressions dynamically. I tried the following without any success:

My button

<button myDirective [disabled]="someExpression">Clippy</button>

My Directive

@Directive({
   selector: '[myDirective]'
})
export class MyDirective {
   constructor(private element: ElementRef) {}

   ngOnInit() {
      this.element.nativeElement.removeAttribute('disabled');
   }
}

The problem

Initially the button won't be disabled, but once someExpression re-evaluates it'll add the disabled attribute back to the element.

Just for clarification, I want to remove an Angular expression dynamically. In the above example it's [disabled]. But this can be any binding in the future. I want my directive to overrule the existing binding.

you can achieve this by setting @Input property to the custom directive and achieve this — Aravind
– Aravind, Commented Dec 6, 2017 at 13:00
You don't need a Directive to remove [disable] (not for removeAttribute) "someExpression" can be a boolean variable in your component — Eliseo
– Eliseo, Commented Dec 6, 2017 at 13:05
@Eliseo no, disabled is just an example. I want my directive to overrule the, in this case, disabled attribute — Dieterg
– Dieterg, Commented Dec 6, 2017 at 13:10

yurzui · Accepted Answer · 2017-12-06 13:55:00Z

3

As workaround you can try this:

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() disabled;

  constructor(private element: ElementRef) { }

  ngOnChanges() {
    if (this.disabled) {
      this.element.nativeElement.removeAttribute('disabled');
    }
  }
}

Stackblitz Example

answered Dec 6, 2017 at 13:55

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Comments

Eliseo · Accepted Answer · 2017-12-06 14:12:51Z

1

Use @HostBinding, e.g.

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[statusDirective]',
})
export class StatusDirective {
  @HostBinding('disabled') disable = true;
  constructor() {}
}

//Your input never enabled
//<input type="text" name="id" [disabled]="false" statusDirective  >

answered Dec 6, 2017 at 14:12

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Dieterg Over a year ago

This works untill the expression changes, I think I have to use ngOnChanges as posted by @yurzui

nayakam · Accepted Answer · 2017-12-06 13:46:45Z

0

<button myDirective [disabled]="hideAttr">Clippy - {{hideAttr}}</button>

the disabled attribute is not removed when hideAttr is false

https://plnkr.co/edit/h86IUsny6MiLfRI9tsPx

edited Dec 6, 2017 at 13:46

answered Dec 6, 2017 at 13:06

nayakam

4,2717 gold badges44 silver badges64 bronze badges

3 Comments

Dieterg Over a year ago

I know, that's not what I want. I want to remove the entire binding

nayakam Over a year ago

@Dieterg ok Thanks

Eliseo Over a year ago

you can use @hostBinding

kodebot · Accepted Answer · 2017-12-06 13:49:12Z

0

You probably need two copies of the button but only one of them displayed at a time

<ng-container *ngIf="showButtonWithDisabledExpr">
        <button [disabled]="someExpression">Clippy</button>
</ng-container>

<ng-container *ngIf="!showButtonWithDisabledExpr">
        <button>Clippy</button>
</ng-container>

answered Dec 6, 2017 at 13:49

kodebot

1,7881 gold badge22 silver badges31 bronze badges

Comments

dastrobu · Accepted Answer · 2022-01-28 10:12:00Z

0

In newer Angular versions you need to make sure the expression evaluates to null or undefined:

When the expression resolves to null or undefined, Angular removes the attribute altogether.

See Attribute Binding.

So an example would be:

<button [disabled]="someExpression ? '' : null">Clippy</button>

answered Jan 28, 2022 at 10:12

dastrobu

1,7651 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to remove angular expression attributes from element

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related