Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 623
Md. Abu Sayed Avatar asked Oct 16 '17 12:10

Md. Abu Sayed


People also ask

Why * is used in ngIf?

The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.

Can a component have multiple templates Angular?

You can simply extend your base component and overwrite the template. This allows you to have different components with the exact same functionality, but different templates. Save this answer.

Can a component have multiple templates?

Note Although it's possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead. Create multiple HTML files in the component bundle.


1 Answers

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>
like image 148
Jaroslaw K. Avatar answered Sep 20 '22 18:09

Jaroslaw K.