@Input() value is always undefined : <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>
