Change html tag during *ngFor looping

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.

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

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.

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