Angular 8 Session 21 - ngFor Directive In Angular

ngFor Directive

Content will be resume soon. Stay tuned!

Session 20: ngIf Directives In Angular

ngIf Directives

* ngIf is one of structural directive we do have which takes Boolean expression and appear or disappears a DOM element. 

* This directive not hides the element like CSS does instead it removes physically the element from DOM.

Why Remove Instead Hide 

* The difference between remove & hide doesn’t matter for a paragraph but it really does matter when the host element associated to an intensive component. The behaviour of hosted element still continues which retains in DOM. 

* In result to that it consumes the memory space and listens the events and executes its processing and it causes a slight performance issue too. 

* On positive side, it reloads to DOM quickly and also preserved state can be retained..

What asterisk (*) prefix does

* The asterisk (*) prefix is just a syntactical representation but actually does a bit more things. 

* It translates internally from *ngIf to <ng-template> element, wrapped around host element.

* ngIf turns into a property within <ng-template> directive which encloses the hosted element with in it and based on condition satisfies it renders the portion.

app.component.ts

import { Component } from '@angular/core';

import { IDropdownItem } from './Model/idropdown-item';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  isVisible: boolean = true;

};

app.component.html

<div>

  <div *ngIf="isVisible">Dispaly Section</div>

</div>

Session 19: Structural Directives In Angular

Structural Directives

* Structural Directives restructures or reshapes the HTML element by adding/removing/manipulating the DOM elements.

 * It easily can be traced because of the structural directives precedes with an asterisk (*) mark.

 * We have generally 3 types of built-in structural directive:

1. *ngIf:    Shows/hides a DOM element based on condition satisfies.

                                <div *ngIf=“isVisible”>Welcome to {{data}}</div>

 2. *ngFor: Repeats the node for each item on applied list.

                                        <div *ngFor=“let item of lstItem”> {{item.ItemName}}</div>

3. *ngSwitch: Selects 1 element out of a series of items in DOM based on a condition satisfies. 

                                <div [ngSwitch]=“item.color”>

                                               <p *ngSwitchCase=“’yellow’”>some text…</p>

                                               <p *ngSwitchCase=“’green’”>some text…</p>

                                              </div>

 * Unlike we have custom attribute directive we can create our own custom structural directive too.

Angular 8 Session 18 - Custom Attribute Directive With Input Decorator

Custom Attribute Directive With Input Decorator

* @Input is a decorator which makes a class filed as Input Property.

* It bound to a DOM property in template and while running it updates the input  field with DOM property value.

* Input decorator is a part of @angular/core library. 

@Input() bgColor:string;

Using @Input 

Step-1: Modify elementhighlighter.directive.ts as below with introduction of an input field.

@Input() bgColor: string;

@HostListener('mouseenter') onMouseEnter() {

  this.takeEffect(this.bgColor || 'green');

};

Step-2: Create a field in app.component.ts to assign a color to directive.

export class AppComponent {

  color: string = 'pink';

};

Step-3: Modify the UI as below with use of newly created @Input property.

<div>

  <div appElementHighlighter [bgColor]='color'>This tutorial elaborates custom directive</div>

  <br />

  <p appElementHighlighter>This is SKMDotNet Tutorial.</p>

</div>

Using @Input With Alias 

* An alias name can be given with any name, but here we are using same as directive selector to avoid confusion.

Step-1: Modify elementhighlighter.directive.ts as below with alias name to an input field.

@Input('appElementHighlighter') bgColor: string;

  @HostListener('mouseenter') onMouseEnter() {

    this.takeEffect(this.bgColor || 'green');

  }

Step-2: Modify app.component.html to bind the property using alias name.

<div>

  <div [appElementHighlighter]='color'>This tutorial elaborates custom directive</div>

  <br />

  <p appElementHighlighter>This is SKMDotNet Tutorial.</p>

</div>