How to dynamically change template in Angular?

Question

I have a common abstract component that renders tree.

I need to able change template for this component dynamically by condition?

I think tree logic should be in separeted service. And I have to create two components with different templates, that use tree service, is not?

Lets assume, I have tree of country/cities.

On one page I need to show that in DOM structure:

<div class="root">
    <div class="parent">
       <div class="children"></div>
    </div>
</div>

In another page I need to show the same DOM but with some differences.

  <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>

So, certainly I can use one template and use *ngIf to determine which DOM element show/hide.

But I need to separate templates and load them dinamically.

Answer 1

Show template based on variable. To choose template use *ngIf. Let me show an example:

HTML of shared component:

<ng-container *ngIf="showWithoutLabel; else showWithLabel">
    <div class="root">
        <div class="parent">
           <div class="children"></div>
        </div>
    </div>
</ng-container>
<ng-template #showWithLabel>
    <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>
</ng-template>

TypeScript:

showWithoutLabel = false;