@ViewChild возвращает значение undefined — Angular 2

Я пытаюсь использовать @ViewChild, чтобы получить нужный мне элемент DOM. У меня есть следующий компонент, который описывает мою проблему:

import {Component, ViewChild, ElementRef, OnInit, Input} from "@angular/core";


@Component({
  selector: 'some-comp',
  template: `

  <input
    #myInputOut
    type = "text"
    class = "google-place-input"
    placeholder = "Type to search..">

   <span class = "row form-group">
     <required-input
       class = "col-12 has-danger"
       [label] = "'somel:'"
       [controlName] = "'somel'"
       [form] = "group"
      </required-input>
    </span>

 <div class = "row form-group2 required">
    <label class = " col-3 control-label" for = "street">label:</label>
    <input #myInputIn class = "col-7" id = "someid" placeholder = "Type to search.." /></div>
`
})
export class someClass implements OnInit{

  @ViewChild('myInputOut') myInputOut: ElementRef;
  @ViewChild('myInputIn') myInputIn: ElementRef;


  private element: HTMLInputElement;
  private element2: HTMLInputElement;

    constructor(  private databaseService : DatabaseService,
               private router : Router){

  }


  ngOnInit(){
    this.element = this.myInputOut.nativeElement;
    this.element2 = this.myInputIn.nativeElement;
  }
}

По какой-то причине myInputOut возвращается правильно, но myInputIn возвращает неопределенное значение. Как я могу это решить?