How can I dynamically assign a template reference variable in angular

Question

I am using the owl date time and I need to dynamically generate #id template reference variable when using in ngFor

  <td>
  <div class="input-group">
  <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" [owlDateTime]="dt4">
  <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
  </div>

  </td>
  <td>
  <div class="input-group">
  <input type="text" [(ngModel)]="trips.endDateTime" [min]="trips.startDateTime" 
     [max]="today" name="tripenddate" class="form-control form-control-sm" tabindex="5" [owlDateTimeTrigger]="dt3" [owlDateTime]="dt3">
   <owl-date-time #dt3 [hour12Timer]="true"></owl-date-time>
   </div>
   </td>
   <td>
   <input type="text" name='startOdoReading[{{i}}]' class="form-control form-control-sm" [(ngModel)]="trips.startOdoReading [value]=trips.startOdoReading />
   </td>

dynamical change #d4 and [owlDateTimeTrigger]="dt4"

Thanks

It would be really nice if you could share a more complete code example or a link to a StackBlitz project. There is no `ngFor` in your code above. I don't believe it is possible to make a dynamic `#d4` property. You could use the index of the ngFor for the other dynamic property and then use a different selector to get that element, but you would need to show a more complete example for help with that. — peinearydevelopment, Sep 20 '18 at 18:34
Possible duplicate of [Dynamic template reference variable inside ngFor (Angular 2)](https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-2) — ConnorsFan, Sep 20 '18 at 18:38
You don't have to make the variable names different inside an `ngFor` loop. There is a distinct variable for each iteration. — ConnorsFan, Sep 20 '18 at 18:38

score 0 · Answer 1 · 2018-09-22T10:35:07.590

You can do it in *ngFor as you did in your example, because template reference variables are already unique. Below is an example of how you can do this:

<td *ngFor='let ex of example'>
 <div class="input-group">
   <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" 
     [owlDateTime]="dt4">
   <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
 </div>
</td>

Or you can try to get all your templateRef variables from *ngFor like so:

@ViewChildren('dt4') dtTime: QueryList<TemplateRef>;

and do so:

<td *ngFor='let ex of example; let i = index'>
 <div class="input-group">
   <input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
     class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" 
     [owlDateTime]="dtTime[i]">
   <owl-date-time #dt4 [hour12Timer]="true"></owl-date-time>
 </div>
</td>

How can I dynamically assign a template reference variable in angular

1 Answers1