Ionic 2 ion-list to host dynamic content in ion-item

Hi
I would like to host dynamic control in ion-list

<ion-content>
<ion-list>
<ion-item *ngFor="#item of items" >
<myhost [data]="item"></myhost>
</ion-item>
</ion-list>
</ion-content>

<myhost [data]="item"></myhost> is component can load the data using dynamic loader
https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html#!#dynamic-loading

I can load <myhost> on a separate page successfully but when I add it under ion-list , items do not appear and looks like its hidden… any suggestions what is required to load the component in ion-list item ?

Your syntax for *ngFor should be *ngFor="let item of items". Does your solution build without errors?

sorry , its a typo in my post - yes I have *ngFor=“let item of items” but the list do not show the contents or resize to the content , is there any setting I missed ?

Try with a lower level declaration aka in your .html:

<ion-list>
<ion-item *ngFor="item of items" >
<myhost [data]="item"></myhost>
</ion-item>
</ion-list>

And in your .ts file, which is the issue most probably, log all errors with an alertController on popup:

this.items = this.http(map).res=> (your data).then.()
else{ // your alert message
}

Recently done that with the camera plugin to help me debug:

this.camera.getPicture(options).then((imageData) => {
  this.base64Image = "data:image/jpeg;base64," + imageData;

  this.photos.push(this.base64Image);
  this.photos.reverse();
  this.alertMessage('base64Image', this.base64Image);
  // this.isbase64PicReady = true;

})
.catch(err=>{
  console.log(err);
  this.alertMessage('err', err);
})
 }

Hope that helps :slight_smile:

As described in the docs, things inside <ion-item> must have an attribute of item-left, item-content, or item-right.