Why does this line in Angular Material source code has `|| null`?

Question

I'm trying to create my own component library for another CSS framework. So I studied the source code of Angular Material as an example. And then I came across this line:

https://github.com/angular/material2/blob/2a086ce4751d71db8cfb85a33e2ca702f02ce1c0/src/lib/button/button.ts#L73

@Component({
  moduleId: module.id,
  selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],
             button[mat-flat-button]`,
  exportAs: 'matButton',
  host: {
    '[disabled]': 'disabled || null', // This line!
    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  },
  templateUrl: 'button.html',
  styleUrls: ['button.css'],
  inputs: ['disabled', 'disableRipple', 'color'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MatButton extends _MatButtonMixinBase {
  ...
}

I just want to confirm my understanding, is the line I highlighted does not need to have || null part?

My understanding is as follows: this component is bind to a HTMLButtonElement, which has its own disabled property. The boolean value can be passed to the element just fine.

Any answer would be appreciated. (Especially Kara, as it was you who introduced this line :P)

I believe it's used in order to NOT set the disabled on the element. something like [this question](https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2). — Stavm, Feb 24 '19 at 20:37
Setting `[disabled]="false"` or `[disabled]="null"` on a button appears to give the same result. That code may have been copied/pasted from [another part of the code](https://github.com/angular/material2/blob/2a086ce4751d71db8cfb85a33e2ca702f02ce1c0/src/lib/button/button.ts#L73) where they bind `[attr.disabled]`. In the case of the attribute, it makes a difference. See [this stackblitz](https://stackblitz.com/edit/angular-7trq1j?file=src%2Fapp%2Fapp.component.html). — ConnorsFan, Feb 24 '19 at 20:44
@Stavm That's my point. Because it is binding to `HTMLButtonElement`'s `disabled` property, which can be set to false or true. So I think that line doesn't need the `|| null` part? — Sarun Intaralawan, Feb 24 '19 at 20:46
@ConnorsFan, that's one of my theory too that the line was copied from the class below. — Sarun Intaralawan, Feb 24 '19 at 20:48
@ConnorsFan and I think you mean [this line](https://github.com/angular/material2/blob/2a086ce4751d71db8cfb85a33e2ca702f02ce1c0/src/lib/button/button.ts#L156) instead? — Sarun Intaralawan, Feb 24 '19 at 20:49
@SarunIntaralawan - Yes. That is what we get when we copy/paste and don't check afterwards, like I did when writing my previous comment. :-) — ConnorsFan, Feb 24 '19 at 20:51
@ConnorsFan could you please "convert" that comment of yours into an answer below? So I can accept it. — Sarun Intaralawan, Feb 24 '19 at 21:00

ConnorsFan · Accepted Answer · 2019-02-24T21:19:53.440

Binding the disabled button property to the values false or null both keep the button enabled:

<button [disabled]="false"> --> Button enabled
<button [disabled]="null">  --> Button enabled

Consequently, I don't see why they use disabled || null. I suspect the line of code referred to in the question to have been copied/pasted from another part of the code, where the disabled attribute is bound. In the case of the attribute, binding to false disables the button (it sets the attribute to the string "false", which is truthy), while binding to null keeps the button enabled (it removes the disabled attribute):

<button [attr.disabled]="false"> --> Button disabled
<button [attr.disabled]="null">  --> Button enabled

See this stackblitz for a demo.

Why does this line in Angular Material source code has `|| null`?

1 Answers1