0

I have a component, where I call a function, which allows users to measure distance on the map. But I only want it to be called (and to work), when the user turns the radio button on. I have a feeling, I should use eventbinding, but in the official angular documentation, they only showed the @Input-@Output-way, which allows communication between components only.

Here is the button in the template: `

<div class="form-check form-switch d-flex justify-content-center">
  <input class="form-check-input btn-secondary" type="checkbox" id="flexSwitchCheckDefault" [(ngModel)]="measurement" (change)="checkValue(measurement?true:false)"/>
  <label class="form-check-label ps-2" for="flexSwitchCheckDefault">Távolságmérés</label>
</div>

In the component, this is the property:

measurement = false;
  checkValue(event: any){
    console.log(this.measurement);
  }

When I click the button, in the console it prints out true/false every time, so it works. Then, I have the so-called function, which is implemented and called in the

ngAfterViewInit()

block:

addInteraction.bind(this)(this.measurement);

If the page is loaded, the function is already called, and it does not care, what I do with the boolean property after. When I change the value of the measurement boolean manually to false, the addInteraction() function is not called, so I think, I should somehow bind it to an event, to listen to the value change of the measurement, but I'm not sure. Any idea, what I missed? (here is the complete code: https://github.com/nabsabt/object-upload, we are talking about the src/app/map component)

nabsabt
  • 15
  • 3

1 Answers1

0

Check this question:

How do I detect change to ngModel on a select tag (Angular 2)?

You can use the event (ngModelChange)

dmance
  • 628
  • 1
  • 8
  • 26
  • Thank you, but here they only show the one way binding, which already works for me. My goal is to call the addInteraction() function ONLY, when the value of the property is set to 'true' by clicking the radio button, and if the client turns it off, then the addInteraction() function should NOT be called. For that, maybe I need to re-load the whole component every time, the radio button is clicked? – nabsabt Nov 11 '22 at 09:02