how to best conditional template show in angular 4

Md. Abu Sayed picture Md. Abu Sayed · Oct 16, 2017 · Viewed 28.1k times · Source

currently, i am practiced angular 4. when a normal user view this then show public content When A Registered user enter the web page then show edit or some content. how to the best practices show conditionally template Or Some Html Contents Example:

<div *ngIf="isUser">
    some Content  here......
</div>
<div *ngIf="!isUser">
    some Content here .....
</div>

actually, i want to know how to the best.

Answer

Jaroslaw K. picture Jaroslaw K. · Oct 16, 2017

In angular 4 you can use if.. else.. structure for html templates

You can use it in this way:

<div *ngIf="isUser; else otherContent">
    some Content  here......
</div>
<ng-template #otherContent>
    <div>
        some Content here .....
    </div>
</ng-template>

but in your case, the prettiest solutions will be if... then... else... conditional

<ng-container *ngIf="isUser; then someContent else otherContent"></ng-container>

<ng-template #someContent ><div>some content...</div></ng-template>
<ng-template #otherContent ><div>other content...</div></ng-template>