I have to disable/enable a button based on the value from a textbox.
This is how I do it currently
<input [(ngModel)]="confirmationText" type='text'>
<button [disabled]="confirmationText != 'yes'">Delete</button>
The problem: This works, but I have to declare confirmationText in my component.ts file and I use it only in the template, So I'm looking for a way to declare it within the component's template so that I can keep my component class clean.
You can use a template reference variable to achieve what you want. Please note that the ngModel directive must be set on the input element in order to make it work.
<input #textInput type="text" ngModel>
<button [disabled]="textInput.value !== 'yes'">Delete</button>
See this stackblitz for a demo.
ngModel directive is what I missed, Thanks :)you must get the value in the template reference like this
<input [(ngModel)]="confirmationText" type='text' #myInput>
<button [disabled]="myInput.value != 'yes'">Delete</button>
look at my solution
ngModel directive, it doesn't work, for example, try this <input type='text' #myInput>
ngModel directive is set in the input element. However, it involves the declaration of confirmationText in the component class, which is what you want to avoid.