1

I am learning the angularjs and am pretty new to it. I am trying to create 5 mat-datepicker components on the GUI using ngFor in the following manner (after a lot of online search)

<div fxLayout="row" fxFlex=20 fxLayoutAlign="center center" fxLayoutGap="35px">
            <mat-form-field fxFlex=20 appearance="outline" *ngFor="let pay of loanDetails.paymentOptions; index as i;">
                <mat-label>Start Date</mat-label>
                <input matInput [matDatepicker]="i" placeholder="Start date" [(ngModel)]="pay.paymentDate" (dateChange)="getLoanOutputData()">
                <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
                <mat-datepicker #i></mat-datepicker>
            </mat-form-field>
</div>

However, this does not seem to be working (meaning, the calendar was not opening when I am clicking on the calendar icon) and there a few exceptions being thrown.

Error on the loading of the page: enter image description here

And when clicking on the calendar icon, I am getting the below error: enter image description here

This is the structure of my loanDetails in the ts file

loanDetails = {
        principal: 100000,
        interestRate: 9.5,
        tenure: 5,
        startDate: new Date(),
        paymentOptions: [this.oneTimePay, this.yearlyPay, this.halfYearlyPay, this.quarterlyPay, this.monthlyPay]
    };

oneTimePay = {
        paymentType: "OneTime Payment",
        paymentDate: new Date(),
        paymentAmt: 0
    }

All the other "pays" like monthlyPay etc. follow the same pattern as of the oneTimePay

Please help me in understanding where it is going wrong.

Ravi
  • 879
  • 2
  • 9
  • 23

1 Answers1

2

Really you are working with Angular (not Angularjs). Well, in a *ngFor you has not take care about the "template reference variable" name, you should use the same (you can not use "i" because Angular has two variables "i" -the variable of the loop and the template reference-

       <mat-form-field fxFlex=20 appearance="outline" 
         *ngFor="let pay of loanDetails.paymentOptions; index as i;">
            <mat-label>Start Date</mat-label>
             <!--see that use always 'picker'-->
            <input matInput [matDatepicker]="picker" placeholder="Start date" [(ngModel)]="pay.paymentDate" (dateChange)="getLoanOutputData()">
            <!--again 'picker'-->
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <!--and again 'picker'-->
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Eliseo, never thought this was so easy. I have come across the articles, where I read that the 'picker' reference has to be unique for each datepicker component, so i was trying to bring in that uniqueness by using the index. Can you also please elaborate me on what is "template reference"? Also, the difference between angular and angularjs? Happy to browse through the web pages if you redirect to me some. Thanks – Ravi Oct 25 '20 at 10:09
  • 1
    @Ravi, Angular and AngularJs are completly different -AngularJs is made on October 2010 and nowaday out of date- Angular is made for the same guys, but change all -else the name, I supose it was a nostalgic tribute-: use typescript, modules, components.... As "template reference" I want to say template reference variable and yes, has to be uniq in the sense has a "scope". In general the "scope" is all the component, but if you has inside a *ngFor, the scope is inside the *ngFor -you can get it from the .ts using ViewChildren, but you can not use in the hmtl outside the *ngFor- – Eliseo Oct 25 '20 at 10:34
  • Holy crap on a cringle. "Angular already uses i" is I think my answer. switched to picker and a bug I've been hunting and pecking at for way to long seems solved. +1 – WernerCD Jul 08 '22 at 04:58