Skip to content

Commit 4b1405b

Browse files
committed
feat: implement wrap function pipe
1 parent c0af4fa commit 4b1405b

File tree

2 files changed

+21
-5
lines changed

2 files changed

+21
-5
lines changed

apps/angular/9-wrap-function-pipe/src/app/app.component.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
import { NgFor } from '@angular/common';
2-
import { Component } from '@angular/core';
2+
import { Component, OnInit } from '@angular/core';
3+
import { WrapFnPipe } from './wrap-fn.pipe';
34

45
@Component({
56
standalone: true,
6-
imports: [NgFor],
7+
imports: [NgFor, WrapFnPipe],
78
selector: 'app-root',
89
template: `
910
<div *ngFor="let person of persons; let index = index; let isFirst = first">
10-
{{ showName(person.name, index) }}
11-
{{ isAllowed(person.age, isFirst) }}
11+
{{ showName | wrapFn: person.name : index }}
12+
{{ isAllowed | wrapFn: person.age : isFirst }}
1213
</div>
1314
`,
1415
})
15-
export class AppComponent {
16+
export class AppComponent implements OnInit {
1617
persons = [
1718
{ name: 'Toto', age: 10 },
1819
{ name: 'Jack', age: 15 },
1920
{ name: 'John', age: 30 },
2021
];
2122

23+
ngOnInit(): void {
24+
console.log(typeof this.showName);
25+
}
26+
2227
showName(name: string, index: number) {
2328
// very heavy computation
2429
return `${name} - ${index}`;
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Pipe, PipeTransform } from '@angular/core';
2+
3+
@Pipe({
4+
name: 'wrapFn',
5+
standalone: true,
6+
})
7+
export class WrapFnPipe implements PipeTransform {
8+
transform<R>(func: (...arg: any[]) => R, ...args: any[]): R {
9+
return func(...args);
10+
}
11+
}

0 commit comments

Comments
 (0)