Angular2: child component does not receive a uri as parameter

Question

In my angular2 app, I am trying to pass set of parameters to a child component.

Here is my child component:

@Component({
    selector: 'comment' ,
    template: `    
                    <div class="col-lg-6 col-md-6 col-xs-6 thumb">
                        <div class="post-owner">
                            <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                          <img class="media-object rounder" src=imageURI >
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h3 class="media-heading"><strong>{{username}}</strong></h3>
                                                {{comment}}
                                    </div>
                            </div>
                        </div>
                    </div>`
})

export class CommentCompoent{
    @Input() imageURI;
    @Input() comment;
    @Input() username;
    constructor(){
        console.log("imageURI: "+ this.imageURI);
    }

}

And here is my the parent component:

<comment [username]=username   [comment]=comment [imageURI]=profile_pic></comment>

export class SinglePictureComponent{
    username='Salman Lashkarara';
    comment="I love you";
    profile_pic='https://scontent-arn2-1.cdninstagram.com/t51.2885-19/s150x150/13743117_1060048037418472_411027981_a.jpg';

}

As a result, the first two parameters are passed correctly. The problem is imageURI does not have a value, I print it in the constructor of child. It seems that imageURI is undefined. So how i can i handle it?

Answer 1

@Inputs() are not yet assigned when the constructor() is executed

This should do what you want:

ngOnInit(){
    console.log("imageURI: "+ this.imageURI);
}