Ionic2 dymanic content

Ionic Framework ionic-v3
1

Hi Fellow devs, I have a page with a ionic2 list item, so the list is a list of videos,

<ion-content>
  <ion-list>
    <ion-item *ngFor="#item of items" (click)="viewItem($event, item)">{{item.title}}<p>{{item.description}}</p>
    </ion-item>
  </ion-list>
</ion-content>

I want to have a,

<ion-card>
  <ion-card-content>
    {{selectedItem.description}}
  </ion-card-content>
</ion-card>

on the very top before the list item, this will display the first video, when the list items are clicked I want to load the video for the clicked item.

How do I go about this ?

2

i would create an own compontent for that.

it has an input “video”. and if you click in list an a video --> set the input “video” to the clicked one

@Component({
  selector: 'video-component',
  template: `
<ion-card>
<ion-card-content>
{{video.description}}
</ion-card-content>
</ion-card>
  `
})
export class VideoComponent {
  @Input video;
}

Now in your videoList component

@Component({
  selector: 'video-list-component',
  directives: [VideoComponent],
  template: `
<ion-content>
<video-component [video]="selectedVideo"></video-component>
<ion-list>
<ion-item *ngFor="#item of items" (click)="viewItem($event, item)">{{item.title}}<p>{{item.description}}</p>
</ion-item>
</ion-list>
</ion-content>
  `
})
export class VideoListComponent {
  public selectedVideo: Object<any>;

  viewItem(event, video) {
    selectedVideo = video;
  }
}