I am new at angular and to practice I am placing markers read from a json on a map. I'm placing them like this, in the .html:
<agm-marker *ngFor="let punto of farmacias.features, let i=index" (markerClick)="clickedMarker(i)" [latitude]="punto.geometry.coordinates[1] " [longitude]="punto.geometry.coordinates[0]" [iconUrl]=" icon"></agm-marker>
And reading the json with this.http.get( .
The problem is that <agm-marker> is executed before the json has been read and causes errors in the console. And I can not put a *ngIf because it only supports one ng per label. Compile and work well, but with those ads in the console.
How would you do it?
I suppose I could hide the entire map with a loading until then, but I do not know if there is a better way to do it.
I put the relevant part of the code:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var require: any;
@Component({
selector: 'mapa',
templateUrl: './mapa.component.html',
styles: ['agm-map { height: 300px;}']
})
export class mapaComponent implements OnInit {
mostrar: boolean;
nombre = "";
telefono = "";
barrio = "";
values = [
{ id: 1, name: "Barrio: Todos", value: "Todos" },
{ id: 2, name: "Barrio: Oeste", value: "Oeste" },
{ id: 3, name: "Barrio: Centro", value: "Centro" },
{ id: 4, name: "Barrio: Este", value: "Este" }
];
lat = 40.353861306107959;
lon = -3.534167475411653;
zoom = 12;
puntos: any;
farmacias: any;
filtro = "todos";
public onChange(event): void { // event will give you full breif of action
var newVal = event.target.value;
this.filtro = newVal;
if (newVal != "Todos") {
this.puntos = this.farmacias.features.filter(item => item.properties.BARRIO == newVal);
}
}
};
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get('./assets/farmacias.json').subscribe(data => {
this.farmacias = data;
});
}
}