feat: implement wrap function pipe

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

@@ -1,24 +1,29 @@
 import { NgFor } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { WrapFnPipe } from './wrap-fn.pipe';
 
 @Component({
   standalone: true,
-  imports: [NgFor],
+  imports: [NgFor, WrapFnPipe],
   selector: 'app-root',
   template: `
     <div *ngFor="let person of persons; let index = index; let isFirst = first">
-      {{ showName(person.name, index) }}
-      {{ isAllowed(person.age, isFirst) }}
+      {{ showName | wrapFn: person.name : index }}
+      {{ isAllowed | wrapFn: person.age : isFirst }}
     </div>
   `,
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   persons = [
     { name: 'Toto', age: 10 },
     { name: 'Jack', age: 15 },
     { name: 'John', age: 30 },
   ];
 
+  ngOnInit(): void {
+    console.log(typeof this.showName);
+  }
+
   showName(name: string, index: number) {
     // very heavy computation
     return `${name} - ${index}`;

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

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'wrapFn',
+  standalone: true,
+})
+export class WrapFnPipe implements PipeTransform {
+  transform<R>(func: (...arg: any[]) => R, ...args: any[]): R {
+    return func(...args);
+  }
+}