Tuesday, 12 September 2017

Pipe - AngularJS2

A pipe takes in data as input and transforms it to a desired output. Before starting with this article, I would recommend you setup your development for Angular 2.

1- Open Visual Studio Code.
2- Open the Integrated Terminal from View Menu.
3- Create a new Project "ngDemo" with the Command Line "ng new [Project name]"
4- Run you Project with command line "ng serve --port 4500".



 5-Click on localhost:4500 url by pressing ctrl button. it'll open the browser and run your web        
      application.

6- Add a folder "PipeComponent" inside of src/app directory.

7- Change Directory
                       cd src\app\ PipeComponent\

8- Add a Component
                       ng g c pipe -is --flat --spec false


It'll add two file in PipeComponent folder.
             pipe.component.html
             pipe.component.ts
 And It'll add the pipe component in app.Module file.

9-  Add a variable named "company" in pipe.component.ts file.

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

@Component({
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styles: []
})
export class PipeComponent implements OnInit {
company: string;
  constructor() { }

  ngOnInit() {
    this.company="DOTNET GURU";
  }
}

10- Now use this variable on pipe.component.html file.

<h2>Pipe</h2>

<h3>{{company | lowercase }}</h3>

11- The above code is using pre-built pipe (lowercase) in angular js.

[Note: Before running this application you need to set PipeComponent in bootstarp property in app.Module.ts file.]

12- Now see the output
       It changed the company name from upper case to lower case.

Creating Custom Pipe.

13- Add a folder "Pipe" inside src/app/ directory.

14- Change the directory in terminal
                        cd ..         <Enter>
cd Pipe    <Enter>

15- Add the Pipe with command line
                        ng g p reverse      <Enter>
Here i'm creating a pipe with the name "reverse"  to reverse the characters of any word.


The above command a creates two files in Pipe folder. in the reverse.pipe.ts file add the below code to reverse the word. Ignore reverse.pipe.spec.ts file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let result = '';
    for (let i = 0; i < value.length; i++) {
      result = value[i] + result;
    }
    return result;
  }
}

16- Now you are ready to use your custom pipe. use the reverse pipe in pipe.component.html.

<h2>Pipe</h2>

<h3>{{company | lowercase | reverse }}</h3>


17- Now see the output

Thanks and Regards
Suraj K. Mad.

0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (9) Web Service (1) XMl (1)