title: @Input() value is always undefined
body: <p>I have created a <code>user photo component</code> which takes an <code>@Input()</code> value, this value is the userId.  If the value is passed in then I retrieve information from <code>Firebase</code> linking to this userId, if it doesn't then I do something else.</p>
  
  <p>My user-photo component</p>
  
  <pre><code>import { Component, OnInit, OnDestroy, Input } from '@angular/core';
  
  @Component({
      selector: 'user-photos',
      templateUrl: './user-photos.component.html',
      styleUrls: ['./user-photos.component.css']
  })
  
  export class UserPhotoComponent implements OnInit {
  
      @Input() userId: string;
  
      constructor() { 
  
          console.log('userId is:',this.userId);
  
      }
  
  
      ngOnInit() {
  
  
      }
  
      ngOnDestroy() {
  
      }
  }
  </code></pre>
  
  <p>As you can see I have declared the userId as <code>@Input()</code>, now on my <code>edit-profile component</code> I have the following:</p>
  
  <pre><code>&lt;user-photos [userId]="TestingInput"&gt;&lt;/user-photos&gt;
  </code></pre>
  
  <p>Now the User Photo component gets rendered as I see the <code>h1</code> tag appearing, however the userId is always undefined ?</p>
  
  <p>No errors are appearing in the developer console, so I'm not entirely sure what I've done wrong. </p>