Action based on Local variable Angular2

I want to know how to disable button depending on the value of local template varibale. here is my code –

<input type="text" #name>     
<button [disabled]='name.value' (click)='getvalue()'>Demo</button>

i want to disbale the button whenever the value of #name change, also how to get the value of #name in the class (component class) ?

here is plnkr for the same
http://plnkr.co/edit/3ZHS7jfQIVl2WVsK8BEb?p=preview

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Angular doesn’t run change detection because no event relevant to Angular is fired. If you bind to an event then Angular runs change detection and the binding works

Adding (input)="null" like

  <input type="text" #name (input)="null">

makes your example work.

Plunker example

Jason
Guest

After Searching found One Alternate,

actually this does’t work because Angular change detection works only when any event fires, but here in this case local variable does’t fire any event,
so to make change detection, we must add any event to the input field. we can do it either by calling any function or alternativly we can do it
by calling simply keyup event on input field like this –

<input type="text" #name (keyup)='name.value' />

<button [disabled]='!name.value' (click)='getvalue(name.value)' class="btn btn-md btn-primary">Demo</button>