Ordering components in angular

Question

I need to sort components dynamically in the following template

<div class="orderList">
    <componentA></componentA>
    <componentB></componentB>
    <componentC></componentC>
</div>

by the object like

orders: {
    componentA: 2,
    componentB: 3,
    componentC: 1
}

So I expect to see componentC at first then componentA and finally componentB?

Notes: components are more than three

Answer 1

As @GünterZöchbauer suggested in comments this answer uses ngComponentOutlet to sort components dynamically

<ng-container 
    *ngFor="item in sortedComponent" 
    *ngComponentOutlet="item.component">
</ng-container>

sortedComponent = [
    {index: 4, component: 'componentA'},
    {index: 5, component: 'componentB'},
    {index: 2, component: 'componentC'},
].sort((a, b) => a.index > b.index)