Nasir Uddin

Nasir Uddin

1574134560

How to use Angular 8 command to create custom pipe in Angular app?

Are you looking for create custom pipe in Angular 8? Than I will help you to how to create custom pipe in Angular 8 step by step. I will create two types of pipe in Angular 8. I will create without parameters and with parameters pipe in Angular 8.

I written step by step creating custom pipe in Angular 8. We will use Angular 8 command to create custom pipe in Angular app.

You have to follow that command and I written very basic example so you will easily understand how pipe is work and what you can write logic in your custom pipe. So let’s see both example so that will help you to create custom pipe in angular 8.

Example 1: Pipe without Parameters

We need to run following command to creating pipe in angular 8 application.

ng g pipe genderPipe
hari@hari-pc:/var/www/me/ang/pipeApp$ ng g pipe genderPipe

CREATE src/app/gender-pipe.pipe.spec.ts (204 bytes)

CREATE src/app/gender-pipe.pipe.ts (213 bytes)

UPDATE src/app/app.module.ts (545 bytes)

Now we need to write some logic on our custom pipe ts file. so let’s write logic as i written for demo now.

gender-pipe.pipe.ts

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

  

@Pipe({

  name: 'genderPipe'

})

export class GenderPipePipe implements PipeTransform {

   

  transform(gender: any): string {

    if(gender == 0){

      return 'Male';

    }

    return 'Female';

  }

   

}

Now we need to create one array with some dummy records, so we will create new array in component ts file as like bellow:

app.component.ts

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

   

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'pipeApp';

   

  persons = [

    {

      id: 1,

      name: 'Hardik Savani',

      gender: 0,

      website: 'itsolutionstuff.com'

    },

    {

      id: 2,

      name: 'Kajal Patel',

      gender: 1,

      website: 'nicesnippets.com'

    },

    {

      id: 3,

      name: 'Harsukh Makawana',

      gender: 0,

      website: 'laracode.com'

    }

  ]

}

Ok, now we can use ‘genderPipe’ custom pipe in html file, so let’s write it.

app.component.html

<h1>Example from ItsolutionStuff.com</h1>

  

<table border="1">

  <tr>

    <th>ID</th>

    <th>Name</th>

    <th>Gender</th>

    <th>Website</th>

  </tr>

  <tr *ngFor="let person of persons">

    <td>{{ person.id }}</td>

    <td>{{ person.name }}</td>

    <td>{{ person.gender | genderPipe }}</td>

    <td>{{ person.website }}</td>

  </tr>

</table>

Example 2: Pipe with Parameters

We need to run following command to creating pipe with parameters in angular 8 application.

ng g pipe genderLabelPipe
hari@hari-pc:/var/www/me/ang/pipeApp$ ng g pipe genderLabelPipe

CREATE src/app/gender-label-pipe.pipe.spec.ts (225 bytes)

CREATE src/app/gender-label-pipe.pipe.ts (223 bytes)

UPDATE src/app/app.module.ts (555 bytes)

Now we need to write some logic on our custom pipe ts file. so let’s write logic as i written for demo now.

gender-label-pipe.pipe.ts

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

   

@Pipe({

  name: 'genderLabelPipe'

})

export class GenderLabelPipePipe implements PipeTransform {

   

  transform(name: string, gender: any): string {

    if(gender == 0){

      return 'Mr. '+name;

    }

    return 'Miss. '+name;

  }

  }

Now we need to create one array with some dummy records, so we will create new array in component ts file as like bellow:

app.component.ts

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

  

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'pipeApp';

  

  persons = [

    {

      id: 1,

      name: 'Hardik Savani',

      gender: 0,

      website: 'itsolutionstuff.com'

    },

    {

      id: 2,

      name: 'Kajal Patel',

      gender: 1,

      website: 'nicesnippets.com'

    },

    {

      id: 3,

      name: 'Harsukh Makawana',

      gender: 0,

      website: 'laracode.com'

    }

  ]

}

Ok, now we can use ‘genderPipe’ custom pipe in html file, so let’s write it.

app.component.html

<h1>Example from ItsolutionStuff.com</h1>

   

<table border="1">

  <tr>

    <th>ID</th>

    <th>Name</th>

    <th>Gender</th>

    <th>Website</th>

  </tr>

  <tr *ngFor="let person of persons">

    <td>{{ person.id }}</td>

    <td>{{ person.name | genderLabelPipe:person.gender }}</td>

    <td>{{ person.gender }}</td>

    <td>{{ person.website }}</td>

  </tr>

</table>

Now you can run your angular 8 app and check.

I hope it can help you…

#angular

What is GEEK

Buddha Community

How to use Angular 8 command to create custom pipe in Angular app?
Harry Patel

Harry Patel

1614145832

A Complete Process to Create an App in 2021

It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.

Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.

You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?

This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.

The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.

Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.

From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.

Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.

#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app

Top Enterprise Angular Web Apps Development Company in USA

AppClues Infotech is one of the leading Enterprise Angular Web Apps Development Company in USA. Our dedicated & highly experienced Angular app developers build top-grade Angular apps for your business with immersive technology & superior functionalities.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top enterprise angular web apps development company in usa #enterprise angular web apps development #hire enterprise angular web apps developers #best enterprise angular web app services #custom enterprise angular web apps solution #professional enterprise angular web apps developers

Custom AngularJS Web App Development Company in USA

Looking for the best custom AngularJS app development company? AppClues Infotech is a top-rated AngularJS app development company in USA producing robust, highly interactive and data-driven AngularJS web and mobile applications with advanced features & technologies.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom angular js web app development company in usa #best angular js app development company in usa #hire angular js app developers in usa #top angular js app development company #professional angular js app developers #leading angular js app development agency

Custom Mobile App Development Services Company in USA

AppClues Infotech is the best custom mobile app development company in USA. We offer custom mobile app development services in USA to effectively solve your business purpose.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom mobile app development #custom app development services #custom app development company in usa #custom mobile app developers in usa #custom app development agency in usa #hire custom mobile app developers

Custom Mobile App Development Services in USA

Want to build a custom mobile app for your business or startup? We at AppClues Infotech, provide the best custom mobile app development services in USA. We have highly skilled & creative team of custom mobile app designers and developers that will help to make a perfect mobile app with the latest features & functionalities.

However big or small your app development needs, we’ll build you a finest & effective mobile app that’s tailored specifically to your business needs.

Our Custom Mobile App Development Services:
• Android & iOS App Development
• Cross-Platform & Hybrid App Development
• Enterprise Mobility Solutions
• Mobile Commerce App Development
• Mobile Wallet App Development
• Wearable App Development
• UI/UX Design
• Mobile App Consulting

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom mobile app development company in usa #hire custom mobile app developers #top custom app development company in usa #how to build custom mobile app #custom mobile app development #custom mobile app development services in usa