Manage multiple templates in a single page in Angular

Question

I have a use case where I need 1 view (Template) to show on screen based on a condition. Their are over 10 templates available but only one of them needs to be visible at a time.

Which of the following solutions is most relevant

1. Using ngIf over each div
2. Using ngSwitch and show div based on the condition
3. Using templates (how to manage this)
4. Any other way..?

I want to use templates for each view type, so that my code stays clean and scalable.

Answer 1

You can use ngSwitch with multiple templates, this solution looks clear for me.

    <ng-container [ngSwitch]="condition">
        <ng-container *ngSwitchCase="condition1" [ngTemplateOutlet]="condition1Template"></ng-container>
        <ng-container *ngSwitchCase="condition2" [ngTemplateOutlet]="condition2Template"></ng-container>
    </ng-container>
    <ng-template #condition1Template></ng-template>
    <ng-template #condition1Template></ng-template>