i create an array in .ts file , but when i try to run ngFor loop on that array it not working in <agm marker="">
following is my .ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-marker-list',
templateUrl: './marker-list.component.html',
styleUrls: ['./marker-list.component.css']
})
export class MarkerListComponent implements OnInit {
lat: number = 18.955113;
lng: number = 72.813758;
markerList: Marker[] = [];
constructor() {
this.markerList = [
{ lat: 51.678418, lng: 7.809007 },
{ lat: 18.955113, lng: 72.813758 },
{ lat: 18.954793, lng: 72.814246 },
{ lat: 18.954204, lng: 72.815055 },
{ lat: 18.95314, lng: 72.815982 },
{ lat: 18.952091, lng: 72.816912 },
{ lat: 18.950728, lng: 72.818209 },
{ lat: 18.948541, lng: 72.820011 },
{ lat: 18.946867, lng: 72.821399 },
{ lat: 18.942403, lng: 72.823517 },
{ lat: 18.9392, lng: 72.824119 },
{ lat: 18.936472, lng: 72.824151 },
{ lat: 18.933324, lng: 72.82397 },
{ lat: 18.933025, lng: 72.827109 },
{ lat: 18.932812, lng: 72.828343 },
{ lat: 18.932625, lng: 72.830708 },
{ lat: 18.932168, lng: 72.834165 },
{ lat: 18.932473, lng: 72.835184 },
{ lat: 18.93157, lng: 72.835495 },
{ lat: 18.929984, lng: 72.834939 },
{ lat: 18.928633, lng: 72.83424 },
{ lat: 18.927237, lng: 72.833958 },
{ lat: 18.92677, lng: 72.833454 },
{ lat: 18.927704, lng: 72.832035 },
{ lat: 18.927095, lng: 72.831498 }
];
console.log(this.markerList);
}
ngOnInit() {
}
}
class Marker {
lat: number;
lng: number;
}
---- html ------
<agm-map [latitude]="lat" [longitude]="lng" minZoom="0" maxZoom="20" [fullscreenControl]="false"
[streetViewControl]="false" [zoomControl]="false">
<agm-marker *ngFor="let marker of markerList" [latitude]="marker.lat"
[longitude]="marker.lng">
<agm-info-window>Hello World</agm-info-window>
</agm-marker>
</agm-map>
What I have tried:
i tired everything,search it on google and everything but code is not working can anybody help me in this