Angular 6 detect changes to graph

Question

Iam working in angular 6 and Leaflet for mapping. I want to create an interactive map that changes view based on the property selected in my form.

I have set the condition to draw the graph in ngOninit but the condition only works when the application is loaded whereas I want it to work every time the form is modified.

Can someone put me on the track please?

Component.ts

export class GeoComponent implements OnInit, OnChanges {

    searchForm: FormGroup;
    geosToDisplay;
    topping: string;
    toppings = new FormControl( [''];
    toppingList: string[] = [
     'Evaluation de la douleur',
     'Evaluation psychologique'
      ];  

constructor(private geoService: GeoService, private router: Router, private database: AngularFireDatabase,private formBuilder: FormBuilder,private matIconRegistry: MatIconRegistry) { }           

ngOnInit() { 
this.geosToDisplay = this.geoService.getGeos();

this.searchForm.valueChanges.subscribe((value) => {
let val =this.toppings.value;
this.toppings.valueChanges.subscribe(val=>console.log(val));
console.log(val);

const myfrugalmap = L.map('frugalmap').setView([47.482019, -0.554399], 7);

L.tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {attribution: 'SoS Map' }).addTo(myfrugalmap);

const myIcon = L.icon({
 iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png',
 iconSize: [ 25, 41 ],
 iconAnchor: [ 13, 41 ],
});

L.marker([ 47.210804, -1.554723 ], {icon: myIcon}).bindPopup('CHU Nantes').addTo(myfrugalmap);

if (val.includes('Evaluation de la douleur')) 
{ L.marker([ 47.482019, -0.554399  ], {icon: myIcon}).bindPopup('CHU Angers').addTo(myfrugalmap);}
else{}
});    
}
}

Component.HTML

    <mat-form-field  appearance="outline" style="width:100%" >
      <mat-label>Rechercher un soin de support</mat-label>
      <mat-select placeholder="Toppings" [formControl]="toppings" multiple Z>
        <button 
                  mat-raised-button 
                  class="mat-primary fill text-sm" 
                  (click)="selectAll()">
                  Tout sélectionner
                </button>&nbsp;&nbsp;
                <button 
                  mat-raised-button 
                  class="mat-warn fill text-sm" 
                  (click)="deselectAll()">
                  Tout désélectionner
                </button>
        <mat-option *ngFor="let topping of toppingList" [value]="topping" >{{topping}}</mat-option>
      </mat-select>
    </mat-form-field>
    <div id="frugalmap">

    </div>

score 1 · Answer 1 · answered Sep 04 '18 at 13:04

1

You should be able to do this:

this.someFormGroup.valueChanges.subscribe((value) => {
  // Do something
});

This assumes you have created a FormGroup and added FormControls to it. You have those imported in your component file so I am thinking you'd be using those.

Reactive Forms

Form Group

answered Sep 04 '18 at 13:04

theblindprophet

7,767
5
37
55

Thanks ! always in my ngoninit ? – Newbiiiie Sep 04 '18 at 13:08
Create the `FormGroup` in the constructor. You should be able to make that subscribe in either the constructor or `ngOnitInit` – theblindprophet Sep 04 '18 at 13:09
I update my post with i was understand of your solution. But now i don't have the map. What do you think of this ? – Newbiiiie Sep 04 '18 at 13:18

Angular 6 detect changes to graph

1 Answers1