What are Pipes ? Default Pipes? Custom Pipes?

A pipe is a way to write display-value transformations that you can declare in your HTML. It takes in data as input and transforms it to a desired output.

Please note – Pipe only change the display value and not the real time values , they remain as it is.

Use Case : Alter Date format in display or make a text uppercase

Angular provides number of default pipes which suffices many of the requirements.

Exhaustive list is present at https://angular.io/api/common#pipes.

How to use : 

To apply a pipe, use the pipe operator (|) within a template expression as shown in the following code example, along with the name of the pipe. Also ,we can pass multiple parameters by using colon.

Few Examples : 

<p>{{ 'angular' | uppercase }}</p>   //ANGULAR

<p>{{ 0.123456 | percent }}</p>  // 12%

@Pipe({

name: 'truncateText'

})

<span>

{{longString | truncateText : 12 : 18}}

</span>

transform(value: string, startLen , endLen): unknown {

return `${value.substr(startLen,endLen)}...`;

}

Few words about ng-container

It allows us to create a division or section in a template without introducing a new HTML element.

It is not render in the DOM, but content inside it is rendered.

It is just a syntax element , which is rendered as a comment.

Custom Directives

@Directive({

selector: '[appHoverEffect]'

})

<tr *ngFor="let employee of employees;let i =index;" appHoverEffect [mouseEnterColor]="'gray'">

constructor(private _el : ElementRef) { }

@Input() mouseEnterColor : string;

@HostListener('mouseenter') onMouseEnter() {

this.hoverEffect(this.mouseEnterColor);

}

private hoverEffect(color){

this._el.nativeElement.style.backgroundColor = color;

}

Peculiar use case

Use case - Sometimes , there occurs a need where in we need to use two structural directives simultaneously. We need to hide and show a grid and within the grid we want to iterate over the list.

Alert Point!!!!!.....We can’t use two structural directives in the same DOM element.

Solution :

Not so elegant solution – Use two different HTML tag , one with ngIf and other with ngFor. Unnecessary Dom addition , which can affect the layout.

Elegant Solution – use ng-container

Built in Structural Directives

*ngIf - ngIf is used to display or hide the DOM Element based on the expression value assigned to it. The expression value may be either true or false.

*ngIf-else - ngIf-else works like a simple If-else statement, wherein if the condition is true then ‘If’ DOM element is rendered, else the other DOM Element is rendered. Angular uses ng-template with element selector in order to display the else section on DOM.

*ngFor - *ngFor is used to loop through the dynamic lists in the DOM. Simply, it is used to build data presentation lists and tables in HTML DOM.

*ngSwitch - ngSwitch is used to choose between multiple case statements defined by the expressions inside the *ngSwitchCase and display on the DOM Element according to that. If no expression is matched, the default case DOM Element is displayed. 

Structural Directive

These are responsible for rendering the HTML layout.

Structural directives shape or reshape the DOM’ structure typically by adding, removing, or manipulating elements.

Identifier for a structural directives are (*). The asterisk is actually short for ng-template with the attribute passed in.

Built-in Attribute Directive

NgClass - add or remove multiple CSS classes simultaneously based on condition within ngClass.

NgStyle – used to set multiple inline styles simultaneously, based on the state of the component.

NgModel—adds two-way data binding to an HTML form element.

Attribute Directive

Attribute directives deal with changing the look and behavior of an element, component, or another directive.

When to use ?

These are used when we  want logic or events to change the appearance or behavior of the view.

When we have a UI element that will be common throughout our app, we can implement an attribute directive and share it across components and modules to avoid repeating the code for the same functionality.

Component Directive

Created with @Component Decorator.

This type of directive is the most common directive type.

Only type of directives which have a view attached i.e they have a template associated.

What are Directives ?

Directives are the Document Object Model (DOM) instruction sets, which decide how logic implementation can be done.

They add additional behavior to elements in your Angular applications.

These are Typescript class which is declared with decorator @Directive or @Component.

Based on Type of operation that can be performed , Directives are further classified into:  

Component Directive 

Attribute Directive

Structural Directive