2

I am trying to fire an event when input value changes. I am using ngModel with ngModelChanges. But its not working

HTML


<input type="number"
[(ngModel)]='myModel' (change)="myModelChange()" >

<button (click)='changeModel()'>Change</button>
Typescipt


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myModel: number;
  ngOnInit(){
    this.myModel =100;
  }
  changeModel() {
    this.myModel = Math.floor(Math.random() * 100);  
  }
  myModelChange() {
    console.log('changed');
  }
}

Example : Code here

Is it it possible to do this with ngModelChanges. If not then is there any other way?

IamGrooot
  • 940
  • 1
  • 17
  • 44
  • This is called two way binding. Why aren't you using it ? `[(ngModel)]='myModel'` –  May 17 '19 at 13:17
  • If you change directly at the input you will see you will get the `console.log`. But you do not have nothing related with your button and your `ngModelChange` or `ngModel` – TheCoderGuy May 17 '19 at 13:24
  • @Spritzig This code is just a demo. I want to achieve this in my project – IamGrooot May 17 '19 at 13:26
  • @trichetriche [(ngModel)] is used for the two way binding like from and to View and component,To use the ngModuleChange we need to split it [()] – IamGrooot May 17 '19 at 13:27
  • Do you want only when you click button or at the `ngModelChange` method? – TheCoderGuy May 17 '19 at 13:28
  • @NareshShetty I know how ngModel is used, thank you though. What I'm asking is why are you doing that, it's a really bad practice and it's the same principle as two way binding. –  May 17 '19 at 13:29
  • My point being that [you don't ask for help on something you think is the answer, but you rather explain your goal](http://xyproblem.info) –  May 17 '19 at 13:29
  • @Spritzig I want when there is change in myModel value change. That button is to just change that model value – IamGrooot May 17 '19 at 13:30
  • @trichetriche My goal is to fire fire an event when there is a change is ngModel value. I just wanted to achieve that. I didn't find any solution so tried with ngModelChanges – IamGrooot May 17 '19 at 13:35
  • And why would you fire an event when your model value changes ? –  May 17 '19 at 13:37
  • @trichetriche I have to update few other values based on this model value. – IamGrooot May 17 '19 at 13:39
  • There we go. Can't you use a custom component, a `ControlValueAccessor` implementation, or simply a reactive form ? –  May 17 '19 at 13:40
  • You can only use the ngModelChange thats make the thing you want. – TheCoderGuy May 17 '19 at 13:40
  • @trichetriche If its possible to fire an event like this then its straight forward solution for me. With other ways I have too many scenarios to consider so – IamGrooot May 17 '19 at 13:48
  • Then use `(change)` or `(input)`, and other solutions are the same as this one but sure. –  May 17 '19 at 13:50
  • @trichetriche I tried (change) but no luck. Can you please check. Am I missing anything? https://stackblitz.com/edit/angular-t5utsb?file=src%2Fapp%2Fapp.component.html – IamGrooot May 17 '19 at 13:55
  • @NareshShetty is this like selective reading or something ? If you had tried the second one, you would have seen it working. –  May 17 '19 at 14:02
  • @trichetriche I had tried (input) before trying ngModelChanges so I didn't mention about that – IamGrooot May 17 '19 at 14:15
  • @NareshShetty but it works, so why don't you use it ? –  May 17 '19 at 14:17
  • @trichetriche It wasn't working for me. https://stackblitz.com/edit/angular-t5utsb?file=src%2Fapp%2Fapp.component.html – IamGrooot May 17 '19 at 14:20
  • @NareshShetty you're giving me a working link ... –  May 17 '19 at 14:32
  • @trichetriche It's not. It should print in console if its working – IamGrooot May 17 '19 at 14:36
  • It does. Have you looked at the console ? –  May 17 '19 at 14:48
  • @trichetriche I wanted it to print on button click. Not after typing in input. Now I disabled the input. Now you might get clear idea about what I was trying to do https://stackblitz.com/edit/angular-t5utsb?file=src%2Fapp%2Fapp.component.html – IamGrooot May 17 '19 at 14:58
  • I see, then why do you need to listen to value changes when you already have a hook, hxixh is your function ? –  May 17 '19 at 15:18
  • @trichetriche I am new to angular 2+. I have no Idea which hook I can use for listening value changes. & whats hxixh ? – IamGrooot May 17 '19 at 15:22
  • Which * sorry, I'm on phone un a busy street, I don't double check before posting ! And simply bind your logging function to your button click and you're good to go, why do you need to listen to model changes ? –  May 17 '19 at 15:25
  • @trichetriche Actually that button was just to demonstrate the problem. Whenever there is an update in this.myData I want to fire an event. – IamGrooot May 17 '19 at 15:30

0 Answers0