python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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 -->
<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!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions