What's the best way to structure the DOM?-CodePudding

When I set the block style to ng-template my doesn't work.

How to fix it?

<div  *ngIf="user; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>
    <fa-icon [icon]='["fas", "user-alt"]' ></fa-icon>
    <button >Logout</button>
</ng-template>
<ng-template #elseBlock>
    <button >Login</button>
</ng-template>

CodePudding user response：

The problem here is that the whole div gets repaced when the then and else conditions are used.

Maybe try something like this:

<div >
 <ng-container *ngIf="user; then thenBlock else elseBlock"></ng-container>
</div>

<ng-template #thenBlock>
    <fa-icon [icon]='["fas", "user-alt"]' ></fa-icon>
    <button >Logout</button>
</ng-template>
<ng-template #elseBlock>
    <button >Login</button>
</ng-template>

Then everything should get rendered correctly inside the div