{"flag":true,"single":true,"pageTitle":"Creating Custom Pipes in Angular | Angular Pipes | Angular 15+","post":{"id":81,"user_id":"1","slug":"creating-custom-pipes-in-angular-angular-pipes-angular-15--3eet","title":"Creating Custom Pipes in Angular | Angular Pipes | Angular 15+","body":"<p>In Angular, pipes are a way to transform, format, or filter data before displaying it in a view. They are used in Angular templates to modify or adjust the data according to specific requirements without changing the original data or its source. Pipes are particularly useful for formatting strings, currency amounts, dates, and other data types.<\/p>\r\n<p>Angular comes with several built-in pipes, such as:<\/p>\r\n<ul>\r\n<li><strong>DatePipe:<\/strong> Formats a date value according to locale rules.<\/li>\r\n<li><strong>UpperCasePipe:<\/strong> Transforms text to uppercase.<\/li>\r\n<li><strong>LowerCasePipe:&nbsp;<\/strong>Transforms text to lowercase.<\/li>\r\n<li><strong>CurrencyPipe:<\/strong> Transforms a number to a currency string, formatted according to locale rules.<\/li>\r\n<li><strong>DecimalPipe:<\/strong> Transforms a number into a string with a decimal point, formatted according to locale rules.<\/li>\r\n<li><strong>PercentPipe:<\/strong> Transforms a number to a percentage string, formatted according to locale rules.<\/li>\r\n<li><strong>SlicePipe:<\/strong> Creates a new array or string containing a subset of the elements.<\/li>\r\n<li><strong>JsonPipe:&nbsp;<\/strong>Converts a value into a JSON-formatted string.<\/li>\r\n<\/ul>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    This is new user {{name| uppercase}}\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p><strong>CUSTOM PIPE:<\/strong><\/p>\r\n<p><strong>1.goto app\/pipes open cmd and run below command<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>ng generate pipe percentage<\/code><\/pre>\r\n<p>it will create a file in <strong>app\/pipes\/percentage.pipe.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>import { Pipe, PipeTransform } from '@angular\/core';\r\n@Pipe({\r\n  name: 'percentage'\r\n})\r\nexport class PercentagePipe implements PipeTransform {\r\n  transform(value: any, ...args: unknown[]): unknown {\r\n    return value*10;\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>import it in app.module.ts<\/p>\r\n<pre class=\"language-markup\"><code>import { PercentagePipe } from '.\/pipes\/percentage.pipe';<\/code><\/pre>\r\n<p>use pipe in view<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    It will be 30*10 {{30| percentage}}\r\n&lt;\/div&gt;<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-29T05:03:41.000000Z","updated_at":"2023-03-29T05:03:41.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"In Angular, pipes are a way to transform, format, or filter data before displaying it in a view. They are used in Angular templates to modif - Creating Custom Pipes in Angular | Angular Pipes | Angular 15+ (Updated: March 29, 2023) - Read more about Creating Custom Pipes in Angular | Angular Pipes | Angular 15+ at my programming site [SITE]","categories":[]}