Skip to main content

Posts

Showing posts with the label 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 c...
Read more

Angular 4 and 5 NgIf and NgSwitch Examples

The Angular *NgIf directive is used when we wants to remove/display an elements from the DOM based on our condition. If your condition is false [ *ngIf='false' ] the element the directive is attached to will be removed from DOM . What Are the Difference Between [hidden] = 'false' and *ngIf = 'false' ? The [hidden] = ‘false’ is used to simply hides the elements but the *ngIf= ‘false’ is used to removes the element completely from the DOM when the condition is not true. See the below examples – Used of Angular *NgIf import { NgModule , Component } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ; @ Component ({   selector: 'ngif' ,   template: `       <h4>NgIf</h4>       <ul *ngFor="let person of people">         <l...
Read more