I have three tables
<table class="table1">
...
<tbody>
<tr *ngFor="let data of datasource1">
...
</tr>
</tbody>
</table>
<table class="table2">
...
<tbody>
<tr *ngFor="let data of datasource2">
...
</tr>
</tbody>
</table>
<table class="table3">
...
<tbody>
<tr *ngFor="let data of datasource3">
...
</tr>
</tbody>
</table>
and I want to somehow be in control of which table should be displayed in which order, i.e., first table3 then table1 then table2 (or some other order). How would I do that?
Templates can be created for each table and rendered in the required order based on a condition.
Create table templates:
<ng-template name="table1">
<table class="table1">
...
<tbody>
<tr *ngFor="let data of datasource1">
...
</tr>
</tbody>
</table>
</ng-template>
... similarly for table2, 3
I am assuming there is a variable order in your component.ts file which defines the order to use. And
So the html to render in required order could be one of the following as per your case
1.
<ng-container *ngIf="order === 1">
<ng-container *ngTemplateOutlet="table1">
<ng-container *ngTemplateOutlet="table2">
<ng-container *ngTemplateOutlet="table3">
</ng-container>
<ng-container *ngIf="order === 2">
<ng-container *ngTemplateOutlet="table2">
<ng-container *ngTemplateOutlet="table3">
<ng-container *ngTemplateOutlet="table1">
</ng-container>
Note: *ngIf needs to be updated with required condition
.... other conditions
<ng-container *ngTemplateOutlet="order === 1 ? table1 : order === 2 ? table2 : table3">
<ng-container *ngTemplateOutlet="order === 1 ? table2 : order === 2 ? table3 : table1">
<ng-container *ngTemplateOutlet="order === 1 ? table3 : order === 2 ? table1 : table2">
You can use CSS, wrap the tables in a div and apply flex box - display: flex; Assign tot each table an order - order: 0; order:1; and so on.