Angular 2, input attribute is removed from DOM

Question

I've got a button that I can enable/disable via a binding:

<button [disabled]="model.disabled">Do Something</button>

I've got some styling that's dependent on that attribute, for example:

button[disabled] {
  background: red;
}

So far so good.

Now I attach a directive to that button which uses the disabled attribute an input:

@Directive({
  selector: "[some-directive]"
})
class SomeDirective {
  @Input("disabled") disabled: boolean;
}

If I attach this directive to a node:

<button some-directive [disabled]="model.disabled">Do Something</button>

This strips the disabled attribute from the DOM, which breaks my styling.

Why is it doing this? Can I stop it from doing this?

but [disabled] is a know Angular property, why would you need to make a directive? Name collision will occur also — Vega
I've reduced my problem to a simple example. I'm not creating a disabled directive. I have numerous controls and components in my code that can be disabled via the disabled attribute. I also have a tooltip directive, which displays a custom tooltip. If the node that's attached to gets disabled, I need to know about it so I can dismiss the tooltip. So I make the disabled attribute an input. There should be no name collision. It's an input, not an output. I should be able to have 100 directives that watch that input and act on it if I wish. — Mud

mok mok · Accepted Answer · 2017-08-22T03:17:29

In your directive use another name for the input to avoid the conflict:

@Input("_disabled") disabled: boolean;

Then it works.