angularangular-template

how to best conditional template show in angular 4


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.


Solution

  • 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>