How to enable a disabled text box onclick a button using angular

Question

I have a text box which is disabled using simple disabled html tag.I need to enable it when I click enable button, again I need to disable it when click disable button. Here is the code below -

app.component.html

<input  type="text" disabled value="Sample text box">

<button (click)="enable()" type="button">Enable</button>
<button (click)="disable()" type="button">Disable</button>

app.component.ts

enable(){

}

disable(){

}

Answer 1

You probably don't need TypeScript for this, you can reference the input from within the template

<input #input type="text" disabled value="Sample text box">

<button (click)="input.disabled = false" type="button">Enable</button>
<button (click)="input.disabled = true" type="button">Disable</button>

Answer 2

HTML

<input  type="text" [disabled]='toggleButton' value="Sample text box">

<button (click)="enable()" type="button">Enable</button>
<button (click)="disable()" type="button">Disable</button>

TS

export class pageName {
     public toggleButton: boolean = false;

     constructor(){}


    enable(){
       this.toggleButton = false
    }

    disable(){
       this.toggleButton = true
    }
}

Answer 3

Try like this:

HTML:

<input  type="text" [disabled]="isDisabled" value="Sample text box">

TS:

isDisabled:boolean = false;

enable(){
   this.isDisabled = false
}

disable(){
   this.isDisabled = true
}

Answer 4

This could be one approach:

<input  type="text" [disabled]="isDisabled" value="Sample text box">

<button (click)="isDisabled = false" type="button">Enable</button>
<button (click)="isDisabled = true" type="button">Disable</button>

Also, disabled is not a tag, is an attribute