how to best conditional template show in angular 4

Question

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 1

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>

Answer 2

NgIf is a structural directive. That means your component would be destroyed when the expression becomes false.

So if your component is often destroyed and created again than this can be an issue. In this case the [hidden] directive should be considered. It only sets display:none. In this case your component would not be destroyed.

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

Answer 3

use NgIf with else condition

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

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

Answer 4

You can change the template and style files at the compilation level as well. We use different templates and styles due to environment variables. For large projects, this approach happened to be more clear for us.

First, we add two fields to the environment.cs files like:

export const environment = {
   production: false,

   componentTemplateFile: './tenants/tenant-name.html',
   componentStyleFile: './tenants/tenant-name.scss',

   ...
}

Then, while declaring the components instead of using inline strings we use those environment variables like:

@Component({
  selector: 'app-enroll-footer',
  templateUrl: environment.componentTemplateFile,
  styleUrls: [environment.componentStyleFile]
}) 
export class EnrollFooterComponent implements OnInit, OnDestroy {
...

Lastly, instead of adding files to the root of the component folder, we have a child folder named tenants, and the template and style files are located under that with the names declared in the environment.cs files.

Example folder structure:

enroll-footer/
enroll-footer/enroll-footer.component.ts
enroll-footer/tenants/tenant-name.html
enroll-footer/tenants/tenant-name.scss
enroll-footer/tenants/other-tenant-name.html
enroll-footer/tenants/other-tenant-name.scss

When we change the environment variables (for another configuration) to other-tenant-name, the angular cli basically uses these files while compiling.