Angular: In which lifecycle hook is input data available to the Component

Input properties are populated before ngOnInit() is called. However, this assumes the parent property that feeds the input property is already populated when the child component is created.

In your scenario, this is not the case – the images data is being populated asynchronously from a service (hence an http request). Therefore, the input property will not be populated when ngOnInit() is called.

To solve your problem, when the data is returned from the server, assign a new array to the parent property. Implement ngOnChanges() in the child. ngOnChanges() will be called when Angular change detection propagates the new array value down to the child.

You can also add a setter for your images which will be called whenever the value changes and you can set your default selected image in the setter itself:

export class ImageGalleryComponent {
  private _images: Image[];

  @Input()
  set images(value: Image[]) {
      if (value) { //null check
          this._images = value;
          this.selectedImage = value[0]; //setting default selected image
      }
  }
  get images(): Image[] {
      return this._images;
  }

  selectedImage: Image;
}

You can resolve it by simply changing few things.

  export class ImageGalleryComponent implements OnInit {

  @Input() images: Image[];
  selectedImage: Image;

  ngOnChanges() {
      if(this.images) {
        this.selectedImage = this.images[0];
      }
  }

 }

And as another one solution, you can simply *ngIf all template content until you get what you need from network:

...
<image-gallery *ngIf="imagesLoaded" [images]="images"></image-gallery>
...

And switch flag value in your fetching method:

  getProfile() {
    let profileId = this.routeParams.get('id');
    this.profileService.getProfile(profileId).subscribe(
    profile => {
     this.profile = profile;
     this.images = profile.images;
     for (var album of profile.albums) {
       this.images = this.images.concat(album.images);
     }
     this.imagesLoaded = true; /* <--- HERE*/
    }, error => this.errorMessage = <any>error
   );
 }

In this way you will renderout child component only when parent will have all what child needs in static content. It's even more useful when you have some loaders/spinners that represent data fetching state:

...
<image-gallery *ngIf="imagesLoaded" [images]="images"></image-gallery>
<loader-spinner-whatever *ngIf="!imagesLoaded" [images]="images"></loader-spinner-whatever>
...

But short answer to your questions:

• When inputs are available?
  • In OnInit hook
• Why are not available to your child component?
  • They are, but at this particular point in time they were not loaded
• What can I do with this?
  • Patiently wait to render child component utul you get data in asynchronous manner OR learn child component to deal with undefined input state