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

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 2

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 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