{"id":59853,"date":"2018-05-03T15:15:19","date_gmt":"2018-05-03T09:45:19","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59853"},"modified":"2024-04-12T14:20:48","modified_gmt":"2024-04-12T08:50:48","slug":"built-in-angular-pipes","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/built-in-angular-pipes\/","title":{"rendered":"Built-in Angular Pipes"},"content":{"rendered":"

Built-in Angular Pipes<\/h1>\n

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.<\/p>\n

Once data arrive, you could push their raw toString values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).<\/p>\n

Clearly, some values benefit from a bit of editing. You may notice that you desire many of the same transformations repeatedly, both within and across many applications. You can almost think of them as styles. In fact, you might like to apply them in your HTML templates as you do styles.<\/p>\n

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.<\/p>\n

Usage of pipes<\/strong><\/p>\n

You can display only some filtered elements from an array.
\nYou can modify or format the value.
\nYou can use them as a function.
\nYou can do all of the above combined.<\/p>\n

Why pipes?<\/strong><\/p>\n

Pipes don\u2019t give you any new feature. In angular 2 you can use logics in templates too. You also can execute a function in the template to get its returned value. But pipes is a handsome way to handle these things in templates. It makes your code more clean and structured.
\nGeneral syntax<\/p>\n

myValue | myPipe:param1:param2 | mySecondPipe:param1<\/p>\n

myValue | myPipe:param1:param2 | mySecondPipe:param1<\/p>\n

The pipe expression starts with the value followed by the symbol pipe (|), than the pipe name. The params for that particular pipe can be sent separated by colon (:) symbol. The order of execution is from left to right. However the pipe operator only works in your templates and not in JavaScript code. In JavaScript the pipe symbol works as bitwise operator.<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n