diff --git a/apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts b/apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts
index 9a8156a5f..742c9e95f 100644
--- a/apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts
+++ b/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 { UtilityPipe } from './pipes/utility-pipe';
 
 @Component({
   selector: 'app-root',
+  imports: [UtilityPipe],
   template: `
     @for (activity of activities; track activity.name) {
       {{ activity.name }} :
@@ -12,8 +13,11 @@ import { PersonUtils } from './person.utils';
         let index = $index;
         let isFirst = $first
       ) {
-        {{ showName(person.name, index) }}
-        {{ isAllowed(person.age, isFirst, activity.minimumAge) }}
+        {{ 'PersonUtils.showName' | utility: person.name : index }}
+        {{
+          'PersonUtils.isAllowed'
+            | utility: person.age : isFirst : activity.minimumAge
+        }}
       }
     }
   `,
@@ -30,8 +34,4 @@ export class AppComponent {
     { name: 'hiking', minimumAge: 25 },
     { name: 'dancing', minimumAge: 1 },
   ];
-
-  showName = PersonUtils.showName;
-
-  isAllowed = PersonUtils.isAllowed;
 }
diff --git a/apps/angular/10-utility-wrapper-pipe/src/app/date.util.ts b/apps/angular/10-utility-wrapper-pipe/src/app/date.util.ts
new file mode 100644
index 000000000..7b4e1a115
--- /dev/null
+++ b/apps/angular/10-utility-wrapper-pipe/src/app/date.util.ts
@@ -0,0 +1,7 @@
+const dateToString = (date: Date): string => {
+  return `${date.toDateString()} ${date.toLocaleTimeString()}`;
+};
+
+export const DateUtils = {
+  dateToString,
+};
diff --git a/apps/angular/10-utility-wrapper-pipe/src/app/pipes/UtilFnNames.ts b/apps/angular/10-utility-wrapper-pipe/src/app/pipes/UtilFnNames.ts
new file mode 100644
index 000000000..2c2c14965
--- /dev/null
+++ b/apps/angular/10-utility-wrapper-pipe/src/app/pipes/UtilFnNames.ts
@@ -0,0 +1,14 @@
+import type { DateUtils } from '../date.util';
+import type { PersonUtils } from '../person.utils';
+
+export type UtilFnNames = {
+  PersonUtils: keyof typeof PersonUtils;
+  DateUtils: keyof typeof DateUtils;
+};
+
+export type MethodMap = {
+  [K in keyof typeof PersonUtils as `PersonUtils.${K}`]: (typeof PersonUtils)[K];
+} & {
+  [D in keyof typeof DateUtils as `DateUtils.${D}`]: (typeof DateUtils)[D];
+};
+export type MethodKey = keyof MethodMap;
diff --git a/apps/angular/10-utility-wrapper-pipe/src/app/pipes/utility-pipe.ts b/apps/angular/10-utility-wrapper-pipe/src/app/pipes/utility-pipe.ts
new file mode 100644
index 000000000..3bf16b416
--- /dev/null
+++ b/apps/angular/10-utility-wrapper-pipe/src/app/pipes/utility-pipe.ts
@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DateUtils } from '../date.util';
+import { PersonUtils } from '../person.utils';
+import { MethodKey, MethodMap, UtilFnNames } from './UtilFnNames';
+
+@Pipe({
+  name: 'utility',
+})
+export class UtilityPipe implements PipeTransform {
+  transform<T extends MethodKey, F extends MethodMap[T]>(
+    fnName: T,
+    ...args: Parameters<F>
+  ): ReturnType<F> | undefined {
+    const util_type = fnName.split('.')[0] as keyof UtilFnNames;
+
+    if (util_type === 'PersonUtils') {
+      const method_name = fnName.split('.')[1] as UtilFnNames['PersonUtils'];
+      return (PersonUtils[method_name] as (...args: any) => any)(...args);
+    }
+    if (util_type === 'DateUtils') {
+      const method_name = fnName.split('.')[1] as UtilFnNames['DateUtils'];
+      return (DateUtils[method_name] as (...args: any) => any)(...args);
+    }
+  }
+}