Documentation: https://angular.io/api?query=pipe
use pipe in template: {{ something-want-to-transform | pipe-name}}
Build your own pipe:
- create a file with name: name.pipe.ts
- @Pipe({name: ‘pipeName, [pure: false] })
- export class PipeNamePipe implements PipeTransform {
- transform(value, param1, param2…) {
- return value.someTransform…
- }
- }
- transform(value, param1, param2…) {
- export class PipeNamePipe implements PipeTransform {
- declare Pipe in app.module.ts ( or where the component using this Pipe)
- If Pipe accepts arguments, only arguments are changed, the pipe will recalculate the transformed data. However, if the original data is changed (before transform) it will not be recalculated, because if every changes will trigger the recalculation, the performance will be in challenging.
- However, you can make this to be corrected, which could be done by adding the second property in @Pipe decorator [Pure: false]