I'm working on a project with a child component as a map and a parent component as a form. The parent component has a field for writing the address, and when an address is entered, an HTTP request is triggered to find the latitude and longitude coordinates. These coordinates are then displayed as markers on the map in the child component. However, currently, this functionality only works the first time the map is rendered. How can I ensure that the markers are updated every time a new address is entered?
Below is the HTML code for the parent component:
<form [formGroup]="form">
.....
<input formControlName="address" (focusout)="focusoutHandler($event)" required>
.....
<div class="row mt-2 mb-2" *ngIf="data != undefined">
<div class="col-12">
<h3>MAP</h3>
<app-map [form]="form" [data]="data"></app-map>
</div>
</div>
.....
</form>
And here is the TypeScript file:
focusoutHandler(event){
const address = {
address: ${this.form.get('address').value}
}
this.dataService.getData(address).subscribe(
(resp) => this.data = resp,
error => console.log(error)
);
}
}
Lastly, here is the TypeScript file for the child component:
export class MapComponent implements OnInit, OnDestroy {
@Input() form: FormGroup;
@Input() data;
constructor() {
}
ngOnInit(): void {
// This function should be executed every time the data changes
this.createMap(this.data);
}
createMap(data){
...
}
}