Answer:10 Utility wrapper pipe

apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
-import { PersonUtils } from './person.utils';
+import { WrapperUtilsPipe } from './wrapper-utils.pipe';
 
 @Component({
   selector: 'app-root',
+  imports: [WrapperUtilsPipe],
   template: `
     @for (activity of activities; track activity.name) {
       {{ activity.name }} :
@@ -12,8 +13,9 @@ import { PersonUtils } from './person.utils';
         let index = $index;
         let isFirst = $first
       ) {
-        {{ showName(person.name, index) }}
-        {{ isAllowed(person.age, isFirst, activity.minimumAge) }}
+        {{ 'showName' | wrappFn: person.name : index }}
+        {{ 'isAllowed' | wrappFn: person.age : isFirst : activity.minimumAge }}
+        <hr />
       }
     }
   `,
@@ -30,8 +32,4 @@ export class AppComponent {
     { name: 'hiking', minimumAge: 25 },
     { name: 'dancing', minimumAge: 1 },
   ];
-
-  showName = PersonUtils.showName;
-
-  isAllowed = PersonUtils.isAllowed;
 }

apps/angular/10-utility-wrapper-pipe/src/app/person.utils.ts

@@ -15,3 +15,16 @@ export const PersonUtils = {
   showName,
   isAllowed,
 };
+
+export type PersonUtils = typeof PersonUtils;
+
+export type PersonUtilsFnKey = {
+  [K in keyof PersonUtils]: PersonUtils[K] extends (...args: any[]) => any
+    ? K
+    : never;
+}[keyof PersonUtils];
+
+export type PersonUtilParams<K extends PersonUtilsFnKey> =
+  PersonUtils[K] extends (...args: infer A) => any ? A : never;
+export type PersonUtilReturnType<K extends PersonUtilsFnKey> =
+  PersonUtils[K] extends (...args: any[]) => infer R ? R : never;

apps/angular/10-utility-wrapper-pipe/src/app/wrapper-utils.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {
+  PersonUtilParams,
+  PersonUtilReturnType,
+  PersonUtils,
+  PersonUtilsFnKey,
+} from './person.utils';
+
+@Pipe({
+  name: 'wrappFn',
+})
+export class WrapperUtilsPipe implements PipeTransform {
+  transform<T extends PersonUtilsFnKey>(
+    fn: T,
+    ...args: PersonUtilParams<T>
+  ): PersonUtilReturnType<T> {
+    return (PersonUtils[fn] as Function)(...args);
+  }
+}