Ngfor with agm-circle

[KumailHussain]

i want to generate n number of circles using ngfor with agm-circle but it throws error: Can't bind to 'ngFor' since it isn't a known property of 'agm-circle'. Seriously !!! here is my HTMl:

  <agm-circle *ngFor="data in circles"
                  [latitude]="data.lat"
                  [longitude]="data.lng"
                  [circleDraggable]="true"
                  [editable]="true"
                  [fillColor]="'data.color'"
                  [radius]="data.radius"
      >
      </agm-circle>

and data is:

this.circle = [ {lat: 51.79, lng: 7.8, radius: 60000, color: 'red'}, {lat: 52.79, lng: 12.8, radius: 60000, color: 'green'}, {lat: 54.79, lng: 10.8, radius: 60000, color: 'yellow'}, {lat: 51.79, lng: 8.8, radius: 60000, color: 'yellow'}, {lat: 60.79, lng: 7.8, radius: 60000, color: 'green'}, ];

[olalew]

I think the error is that *ngFor should be used rather in that way *ngFor="let data of circles" and it should work.