Angular2: Multiple date pickers

Question

I am using the following code to create a date picker.

<input (dateChange)="dateChanged()" class="editable-form-field" *ngIf="isEditable" [satDatepicker]="rosterHireDate" [(ngModel)]="roster.probationDate" [min]="minStartDateForClass" readonly matInput>
<sat-datepicker *ngIf="isEditable" #rosterHireDate [rangeMode]="false"></sat-datepicker>
<sat-datepicker-toggle *ngIf="isEditable" style="position: absolute; right: 0;" matSuffix [for]="rosterHireDate"></sat-datepicker-toggle>

But when I try to create multiple date pickers like below it throws an error

<ng-template ngFor let-roster [ngForOf]="rosters" let-i="index">
    <input (dateChange)="dateChanged()" class="editable-form-field" *ngIf="isEditable" [satDatepicker]="rosterHireDate" [(ngModel)]="roster.probationDate" [min]="minStartDateForClass" readonly matInput>
    <sat-datepicker *ngIf="isEditable" #rosterHireDate [rangeMode]="false"></sat-datepicker>
    <sat-datepicker-toggle *ngIf="isEditable" style="position: absolute; right: 0;" matSuffix [for]="rosterHireDate"></sat-datepicker-toggle>
</ng-template>

Error:

ERROR TypeError: Cannot read property 'rangeMode' of undefined
    at SatDatepickerInput._minValidator (saturn-datepicker.js:4215)
    at forms.js:658
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:658)
    at SatDatepickerInput._validator (forms.js:623)
    at SatDatepickerInput.push../node_modules/saturn-datepicker/fesm5/saturn-datepicker.js.SatDatepickerInput.validate (saturn-datepicker.js:4522)
    at forms.js:923
    at forms.js:658
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:658)

Then I realized I have to supply a different # value but not sure how to do that. Is there a way to create multiple date pickers with dynamically generated ids?

I am using a third party date picker called saturn date picker because we want to be able to select range of dates in other parts of the application.