title: How can I dynamically assign a template reference variable in angular
body: <p>I am using the owl date time and I need to dynamically generate #id template reference variable when using in ngFor</p>
  
  <pre><code>  &lt;td&gt;
    &lt;div class="input-group"&gt;
    &lt;input type="text" [(ngModel)]="trips.startDateTime" [max]="today" name="tripstartdate" 
       class="form-control form-control-sm"  [owlDateTimeTrigger]="dt4" [owlDateTime]="dt4"&gt;
    &lt;owl-date-time #dt4 [hour12Timer]="true"&gt;&lt;/owl-date-time&gt;
    &lt;/div&gt;
  
    &lt;/td&gt;
    &lt;td&gt;
    &lt;div class="input-group"&gt;
    &lt;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"&gt;
     &lt;owl-date-time #dt3 [hour12Timer]="true"&gt;&lt;/owl-date-time&gt;
     &lt;/div&gt;
     &lt;/td&gt;
     &lt;td&gt;
     &lt;input type="text" name='startOdoReading[{{i}}]' class="form-control form-control-sm" [(ngModel)]="trips.startOdoReading [value]=trips.startOdoReading /&gt;
     &lt;/td&gt;
  </code></pre>
  
  <p>dynamical change #d4 and [owlDateTimeTrigger]="dt4"</p>
  
  <p>Thanks</p>