Dynamic marker is not working

See more:

Javascript

Typescript

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