How to Develop @Pipes in Angular


Angular - How to Develop @Pipes in Angular, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE




Pipes

What is Pipes?

  • Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
  • A pipe takes in data as input and transforms it to the desired output. On this page, you'll use pipes to transform a component's birthday property into a human-friendly date.
  • We can says about pipes - Pipe will help to you transform your value in desired output

Types of Pipes

  • Built-in pipes : - These pipes are in build pipes comes with Angular. You can use them in any template e.g. DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe
  • Parameterizing a pipe : - These pipes can accept any optional parameter in order to transform your value in desired output
  • Chaining pipes :- You can chain pipes together in order to use usefull combination
  • Custom pipes : - Angular gives us the flexibility to create our own pipes based on your requirements. Whenever we create our own pipes i.e. is known as custom pipes.

Let's create a custom pipe: We need to convert the first character should get converted uppercase using pipes

  • Step 1 : Create a new Project using command : ng new custom-pipe-example
  • Step 2 :create a pipe in same project using command: ng generate pipe myPipe
  • Step 3 :Place below code in app.component.html <h1>Pipe Example - Angular </h1> <table> <tr> <td>Enter Your Name</td> <td><input type="text" [(ngModel)]="name"> </td> </tr> <tr> <td> Your name <strong>(After transformation using Pipe) :</strong> </td> <td> {{name | mypipe}} </td> </tr> </table>
  • Step 4 :Place below code in app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'pipe-demo'; name: string; }
  • Step 5 : open file mypipe.pipe.ts and replace below code with transform method transform(value: string, ...args: unknown[]): string { if (value) { return value.charAt(0).toUpperCase() + value.substring(1, value.length); }
  • Step 6 : hit ng serve command. You are ready to use your pipes

Output :-

Ref link

Comments

Post a Comment

Popular posts from this blog

React Native Fundamentals

Image
React Fundamentals, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   React Fundamentals React Native runs on  React , a popular open-source library for building  user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course   Here, we will learn how to create a simple Hello World in react native   Let’s create a simple application of React Native We will follow the below command to create a Hello Worlds in React Native   Use below command to install React native ·       npm install –g react-native-cli   The above instructions work best if you need to build native code in your application or want to integrate React Native in an existing application. If you want to quickly prototype an application and you can use  Create React Native App  module th...
Read more

How to disable table row in Angular

How to disable table row in Angular ? , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   How to disable table row in Angular In this article we will learn how to disable every alternate (even) row in Table by using CSS. Step 1: Let's create an HTML table using below code                                     <table class="main-table">                   <thead>                      <tr>                     ...
Read more

What’s the Difference Between Razor and Blazor

What is the Difference Between Razor and Blazor, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE Blazor Blazor enables sharing code across client- and server-side processes, server-side rendering functionality, and more. When building a single-page application, Angular or React are popular JavaScript frameworks to use.  Blazor is a framework for building interactive client-side web UI with .NET: ·          Create rich interactive UIs using C# instead of JavaScript. ·          Share server-side and client-side app logic written in .NET. ·          Render the UI as HTML and CSS for wide browser support, including mobile browsers. ·          Integrate with modern hosting platforms, such as  Docker . ...
Read more