How to show the best conditional pattern in angular 4

Question

I am currently practicing angular 4. when a regular user views this and then displays the public content. When a Registered User enters a web page, then display the edit or some content . best practices show a conditional template or some examples of HTML content.

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

In fact, I want to know how for the best.

Answer 1

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

You can use it as follows:

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

but in your case the most beautiful 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>

Answer 2

NgIf else

<div *ngIf="isUser;else Other">
    some Content  here......
</div>

<ng-template #Other> some Content here .....</ng-template>

Answer 3

NgIf is a structural directive . This means that your component will be destroyed when the expression becomes false.

So, if your component is often destroyed and created again, this can be a problem. In this case, the directive should be considered [hidden]. He installs only display:none. In this case, your component will not be destroyed.

<div [hidden]="expression">{{val}}</div>