title: angular 4 set focus in a field of a modal
body: <p>In my angular 4 project I need to focus some field inside a bootstrap-modal</p>
  
  <p>This is the modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
   &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
     &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
      &lt;i class="material-icons"&gt;clear&lt;/i&gt;
      &lt;/button&gt;
      &lt;h4 class="modal-title"&gt;{{'checkpoint.table.dialog.title' | translate }}&lt;/h4&gt;
     &lt;/div&gt;
     &lt;form #modelForm="ngForm"&gt;
    &lt;div class="modal-body"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div class="form-group label-floating"&gt;
  
                  &lt;label class="control-label"&gt;{{'checkpoint.table.dialog.labels.name' | translate }}
                  &lt;span class="star"&gt;*&lt;/span&gt;
                  &lt;/label&gt;
                  &lt;input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" #focus /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I open the dialog with a normal button</p>
  
  <pre><code>&lt;button type="button" class="btn btn-info btn-lg" 
  data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;
  </code></pre>
  
  <p>I have tried some solutions like:</p>
  
  <pre><code>@ViewChild('focus') inputElement: ElementRef;
  </code></pre>
  
  <p>and in the button when I open the modal:</p>
  
  <pre><code>this.inputElement.nativeElement.focus();
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>$('#myModal').on('shown.bs.modal', function () {
        $('#focus').focus();
  </code></pre>
  
  <p>But in the first case the inputElement is undefined and in the second case nothing happen</p>