Change html tag during *ngFor looping

Ionic Framework ionic-v3
1

Hi, in ionic1 using angularJs, if i want to pass ng-repeat array object to a custom directive, i can do it like this;
return {
templateUrl: ‘directives/plot.html’,
scope: true,
link: function (scope, element, attrs) {
//do whatever, change html DOM
}
};

Now, i’m quite new in using ionic3 and typescript, i’m just clueless on how to pass the*ngFor array to custom directive. Anyone can help guide me? Thanks.

2

This might be easier to answer if you describe what you are actually trying to achieve, pretending that AngularJS and Ionic1 didn’t exist.

3

so i have an array of fileURI that contains both photo and video.
i want to display the array(using *ngFor) on single row of thumbnails,like a preview before upload.
so i was thinking maybe create custom directive,to check whether each of array item is an image or a video.
then use the respective html tag needed to display them.

4 
<ng-container *ngFor="let phodeo of phodeos">
<img *ngIf="phodeo.flavor === 'photo'" [src]="phodeo.url">
<video *ngIf="phodeo.flavor === 'video'" [src]="phodeo.url">
</ng-container>