[Fixed] disable select in angular2


I am writing angular2 app.
I need all my buttons and select with be disabled and then I need to enable them. I want to do that by using my class field butDisabled but with no luck.
I have this code:

  selector: 'my-app',
    <h1>Disable Enable</h1>
    <h2> this is a disabled select </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" disabled>
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
     <h2> this is a disabled button </h2>
    <button type="button" class="btn btn-default {{butDisabled}}">Disabled</button>

    <h2> Why can't I disable the select the same way? </h2>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" class="{{butDisabled}}">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>

export class AppComponent {
  butDisabled = "disabled";
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}


I don’t understand why I can’t use the {{butDisabled}} to disable the select.
What Am I doing wrong?
Thanks a lot

here is a plunker


You could just bind to the [disabled] attribute like so:

<button type="button" class="btn btn-default" [disabled]="butDisabled">Disabled</button>

<select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" [disabled]="butDisabled">
  <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>

And in your component make the variable a boolean:

export class AppComponent {
    butDisabled: boolean = true;

Working Plunker for example usage

Leave a Reply

(*) Required, Your email will not be published