title: Binding Input id with label in angular 4
body: <p>I am using a customised version of <code>DateTimePicker</code> in Angular4 application. It is working fine the only concern which I would like to solve is the calendar icon is not clickable. My current functionality is when I change the focus inside the input field of DateTimePicker, drop down calendar appears and it works fine. </p>
  
  <p>Now I would like to make a simple UX change so when someone clicks on calendar icon it also show the drop down calendar. I have seen so many articles and I know it is do-able by using input Id and bind it in label for attribute. For reference you can see the code snippet.</p>
  
  <pre><code>&lt;input class="form-control"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false"
       aria-label="Date picker"
       type="text"
       id="parentId"
       [name]="parentId"
       #dateInput
       [disabled]="isDisabled"
       (focus)="focusInput()"
       (input)="input$.next($event.target.value)"&gt;
    &lt;label class="input-group-append btn" for="parentId"&gt;
      &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
   &lt;/label&gt;
  </code></pre>
  
  <p>It is working fine and give me expected result <a href="https://i.stack.imgur.com/5ISVi.png" rel="nofollow noreferrer">see this image</a>.</p>
  
  <p>Now the problem is I used the hardcoded value of field ID inside the input. If I need to used two DateTimePicker then the second calendar icon click will also map to first one. I am looking for solution where I can assign the ID value dynamically and in the same way I could use it inside the label for attribute. I have tried the solution using [id] and [for] by getting values dynamically but it did not solve the issue. You can see the code snippet. Even tough when I check the value assign to ID using inspecter window on browser dynamic values have been assigned to both input Id and label for but in this case click on calendar icon does not work at all.</p>
  
  <pre><code>&lt;input class="form-control"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
           aria-label="Date picker"
           type="text"
           [id]="parentId"
           [name]="parentId"
           #dateInput
           [disabled]="isDisabled"
           (focus)="focusInput()"
           (input)="input$.next($event.target.value)"&gt;
    &lt;label class="input-group-append btn" [for]="parentId"&gt;
      &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
    &lt;/label&gt;
  </code></pre>
  
  <p>You can see the attached image for <a href="https://i.stack.imgur.com/6rKxG.png" rel="nofollow noreferrer">inspect window</a> also.
  Any help and suggestion in this regard will be highly appreciated. </p>
  
  <p><strong>Note: I am working on Angular 4 project.</strong></p>