material datepicker error when providing unique id \ name

Question

as part of a *ngFor loop, I would like to provide a unique id or name, but getting an error: You provided 'undefined' where a stream was expected.

Here is my HTML code.

    <mat-form-field appearance="fill" class="notValid">
                    <mat-label>{{selectedLanguage.trLeidaYeled}}</mat-label>
                   <input matInput 
                     [matDatepicker]="trLeidaYeled" 
                     id="trLeidaYeled{{i}}" 
                     [(ngModel)]="child.trLeida" 
                     name="trLeidaYeled{{i}}"
                     />
                   <mat-datepicker-toggle matSuffix for="trLeidaYeled{{i}}"></mat-datepicker-toggle>
                   <mat-datepicker #trLeidaYeled ></mat-datepicker>
    </mat-form-field>

I have also tried the follow but getting the same error.

 <mat-form-field appearance="fill" class="notValid">
                    <mat-label>{{selectedLanguage.trLeidaYeled}}</mat-label>
                   <input matInput 
                     [matDatepicker]="trLeidaYeled" 
                     [id]="'trLeidaYeled'+i" 
                     [(ngModel)]="child.trLeida" 
                     [name]="'trLeidaYeled'+i"
                     />
                   <mat-datepicker-toggle matSuffix [for]="'trLeidaYeled'+i"></mat-datepicker-toggle>
                   <mat-datepicker #trLeidaYeled ></mat-datepicker>
                 </mat-form-field>