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 -->
<ng-template>
<h2>Hello, Anil!</h2>
</ng-template>
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>
And
//ngIf Else
<div
*ngIf="Age
> 18; else notEligible">
<h2>Eligible
to watch.</h2>
</div>
<ng-template
#notEligible>
<b>Not
Eligible to watch.</b>
</ng-template>
I hope you are
enjoying with this post! Please share with you friends. Thank you!!