Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 Pipes

Angular 8 Pipes

Pipes are a useful feature in Angular. These are the simple way to transform values in an Angular template. It takes the integers, strings, array, and dates as input separated with | to be converted in the format as required and display same as an in the browser. 

Inside the interpolation expression, we define the pipe and use it based on the situation because there are many types of pipes. We can use in our angular applications.

A pipe holds in data as input and transforming it into the desired output. Some values benefit for a bit of editing. We may notice that we want many of the same transformations repeatedly, both within and across many applications.

We can almost think of them as styles, and In fact, we might like to apply them in our HTML templates.

Syntax:

{{title | uppercase}}

See an example of the pipe; previously, we display the title text in upper and lower case with the help of pipes.

Example:

Define a variable named "title" in the component.ts file.

Import {Component} from ‘@angular/core’;
@Component ({
selector: ‘app-root’,
templateUrl: ‘.app.component.html’,
styleUrls: [‘./app.component.css’]
}]
title=’my-first-app’;
} 

 here, we are using the pipe symbol in component.html file:

{{ title | uppercase}}

{{ title | lowercase }}

Run ng serve and see the result. You will see the following result. We can see that pipes have changed the title in upper and lowercase.

Angular 8 Pipes

Built-in Angular pipes

Angular has a stock of pipes such as Date Pipe, Uppercase Pipe, Lowercase Pipe, currency pipe, and percent pipe. They are available for use in any angular template. Angular doesn't have the Filter Pipe or any Orderbypipe. Angular doesn't provide the pipes for filtering and sorting the lists. Pipes are an excellent way to encapsulate and share a collective display-value transformation.

Built-in Angular pipes
  • AsyncPipe
  • Currencypipe
  • Datapipe
  • Decimalpipe
  • Jsonpipe
  • Percentpipe
  • Lower case pipe
  • Upper case pipe
  • Slicepipe
  • Title case pipe

Parameterizing a pipe in Angular 8

We can also move a parameter to the pipe; we can use the HTML code to pass the parameter.

app.component.html

Rohan’s birthday is {{ birthday | date:”dd/mm/yyyy”}}

Chaining pipes

We can chain pipes together and creates useful combinations and also can use the lowercase and upper case pipe in our example.

app.component.html

Rohan’s birthday is {{birthday | date | uppercase}}

Now, our date is in upper case letter.

Pure and Impure pipes

There are two categories of pipes:

  1. Pure
  2. Impure

By default, pipes of angular are pure. Every pipe we have seen are pure and built-in pipes. We can make the pipe impure by setting the pure flag into false.

Pure pipes

Angular executes the pure pipe only when if it detects the perfect  change in the input value. The real difference is either in the shift to the primitive input value (Number, Boolean, Symbol, String) or a changed object reference (Array, Function, Object, Date).

Impure pipes

Angular executes the corrupted pipe during every component change detection cycle. The impure pipe is called often every keystroke or mouse-move.

How to Create a Custom Angular Pipe?

To create a custom pipe, we create a new ts file and use the code according to work, and we have to import Pipe, Pipe Transform from Angular/Core.

Create a sqrt custom pipe.

component.ts file:

import {Pipe, PipeTransform} from
‘@angular/core’;
@Pipe ({
name: ‘sqrt’
})
Export class SqrtPipe implements PipeTransform {
transform (val: number) : number{
Return Math.sqrt(val);
}
}  

We have to make changes in the app.module.ts. Create a class named as SqrtPipe.

This class will implement PipeTransform. The transform method defined in the class can take arguments as the number and will return the number after taking the square root.

We have to add the same code in app.module.ts file

module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule
],
providers: [],
AppComponent]
})
export class AppModule {
}

Now, use sqrt pipe in the component.html file.

component.html file:

Example of Custom Pipe

Square root of 225 is: {{225 | sqrt}}


Square root of 164 is: {{164 | sqrt}}


Output:

Create a Custom Angular Pipe



ADVERTISEMENT
ADVERTISEMENT