How to use ngbDatepicker in for loop - html

Question

I have a problem when using "ngbDatepicker" in form array. The date input cannot be opened. I think because the toggle() function cannot be called correctly.
I have tried creating toggleDate function and call toggle() by using this code
toggleDate(event){
var f = new Function(event+'.toggle()');
f();
}
I have also put
(click)="this[toggle]()"
in my html input date but it doesn't work
This is my HTML Code
<div formArrayName="appntTimes" *ngFor="let appnts of
inputForm.controls.appntTimes?.value; let i = index">
<div [formGroupName]="i">
<div class="form-group row">
<label class="col-2 control-label col-form-label">Date</label>
<div class="col-7">
<div class="input-group date" >
<input class="form-control m-b" formControlName="annceDate1" id="{{'annceDate1'+i}}" name="{{'annceDate1'+i}}" ngbDatepicker #annceDate1{{i}}="ngbDatepicker"
placeholder="DD/MM/YYYY" (click)="toggleDate($event)"/>
<span class="input-group-addon" >
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
I have used multiple datepickers in my page and it worked perfectly but when I put it in ngFor loop and use index to define it’s name and id, It doesn’t work.