disabled property on button

I have a simple angular code like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
            <input type="number" #mytext (keyup)="onclickfunc(mytext.value)">
            <button [disabled]="myVar==0" > Test </button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  myVar=0;

  onclickfunc(mytext){
    this.myVar=mytext;
  }
}

As you can see, the button should become disabled when myVar is 0. The code works fine as it is. But if I change [disabled]="myVar==0" to [disabled]="myVar===0", it acts strangely. I mean, even if I type 0 in the input box, the button doesn't become disabled.

Could you please explain the reason?

Upvotes: 0

Views: 39

Answers (1)

The === operator checks value and type while the == operator only checks value. For example :

1 == "1" -> true
1 === "1" -> false (because types are not equal)

Upvotes: 1

Related Questions