Skip to main content

Posts

Showing posts with the label ng-template

NgForOf in Angular | What Is NgForOf in Angular?

What Is NgForOf in Angular? Structural directives render a template for-each item in a collection and this directive is placed on an element, which becomes the parent of the cloned templates. The ngForOf directive is generally used in the shorthand form * ngFor . In the below example, the template to be rendered for each iteration is the content of an anchor element containing the directive. The following example shows the shorthand syntax with some options, contained in an <li> element. < li   *ngFor = "let item of items; index as i; trackBy: trackByFn" > ... </ li > The shorthand form expands into a long form that uses the ngForOf selector on an <ng-template> element. The content of the <ng-template> element is the <li> element that held the short-form directive. Here is the expanded version of the short-form example. < ng-template   ngFor   let-item   [ngFo...

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...