Tuesday, 12 May 2020

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 {
  isVisibleboolean = true;
};



app.component.html
<div>
  <div *ngIf="isVisible">Dispaly Section</div>
</div>

Friday, 8 May 2020

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.




Sunday, 3 May 2020

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() bgColorstring;

@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 {
  colorstring = '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'bgColorstring;

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

Angular 8 Session 21 - ngFor Directive In Angular

ngFor Directive Content will be resume soon. Stay tuned!