Angular 4 NgIf

Angular 5 and 4 NgIf Then Else Examples

What Is ng-template Element in Angular 5 and 4?
The “<ng-template></ng-template>” is an angular element for rendering HTML. It is never displayed directly. Suppose we have following code in our HTML template.

The “<ng-template></ng-template>” is used by structural directive such as NgIf.
Stayed Informed – Angular 5 and Angular 4 Documents

Example -
<!--ng-template -->
    <h2>Hello, Anil!</h2>

When the above code runs then the code written inside <ng-template> will not be displayed. It writes a comment.

What Is NgIf then Else in Angular 5 and 4?
The NgIf directive is structural directives which use to add or remove the DOM element and it does perform in DOM layout at run time.

Example –
<!-- ngIf condition -->
<div *ngIf="condition">...</div>

<!-- ngIf with template and condition -->
<div template="ngIf condition">....</div>

<!-- ngIf with ng-template and condition -->
<ng-template [ngIf]="condition"><div>....</div></ng-template>

//ngIf Else
<div *ngIf="Age > 18; else notEligible">
    <h2>Eligible to watch.</h2>
 <ng-template #notEligible>
    <b>Not Eligible to watch.</b>

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions