How to show all elements from an array?

What I want to accomplish is to show all elements from an array. This array contains various types of components (yes, components), and all these components extends from an abstract class.

Here's my code:

Abstract Class Plugin:

export abstract class Plugin {
constructor() { }
}


Watch Component:

@Component({
selector: 'watch',
template: `
{{clock | async | date:'medium'}}
`
})

export class WatchCmpt extends Plugin {
clock = Observable.interval(1000).map(() => new Date())
constructor() {
super();
}
}


Demo Component:

@Component({
selector: 'demo',
template: `
<h1>Hello {{name}}</h1>
`
})

export class DemoCmpt extends Plugin {
name: string = "Jose";
constructor() {
super();
}
}


I'm using this code in my view to display it in my HTML file:

<? *ngFor="let target of targetList; let x = index">{{target}} </?>


What should I use in the <?> ?

targetList is an array like this: [demo, watch]

EDIT:

@Component({
selector: 'dndPanel',
templateUrl: 'dragNdropPanel.cmpt.html'
})

export class DragNDropPanelCmpt {
@ViewChild(DemoCmpt) demo1: DemoCmpt;
@ViewChild(WatchCmpt) watch: WatchCmpt;

constructor() {
}

targetList: Plugin[] = [
this.demo1,
this.watch,
];

addTo($event: any) {
this.targetList.push($event.dragData);
}
}


This is the complete HTML:

div class="col-sm-6">
<div class="panel panel-info" dnd-sortable-container [sortableData]="targetList">
<div class="panel-heading">Target List</div>
<div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']">
<ul class="list-group">
<li *ngFor="let target of targetList; let x = index" class="list-group-item" dnd-sortable [sortableIndex]="x" [dragEnabled]="true">
{{target}}
</li>
</ul>
</div>
</div>
</div>

Continue reading...