pipes that call functions

src/app/organizations/organizations/organizations.component.html

@@ -55,6 +55,9 @@
     <div *ngIf="organizations.length > 0; else noOrganizationsFound">
       <div fxLayoutAlign="start" fxLayout="row wrap" fxLayoutGap="2rem grid">
         <div *ngFor="let org of organizations" fxFlex="33.3" fxFlex.lt-lg="50" fxFlex.lt-md="100">
+          {{ org | function: this:brace | uppercase }}
+          {{ org | method: org.getLink }}
+          {{ org | method: 'getLink' }}
           <mat-card style="height: 340px" class="pb-3">
             <div class="h-100" fxLayout="column" fxLayoutAlign="space-between stretch">
               <div fxLayout="column" fxLayoutGap="2rem">

src/app/organizations/organizations/organizations.component.ts

@@ -108,4 +108,8 @@ export class OrganizationsComponent extends Base implements OnInit {
   clearSearch() {
     this.organizationSearchForm.get('name').setValue('');
   }
+
+  brace(org) {
+    return '{' + org.name + '}';
+  }
 }

src/app/shared/pipe/function-pipes.ts

@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'method',
+})
+export class MethodPipe implements PipeTransform {
+  transform(thisValue: any, ...fnAndArgs: any): any {
+    if (fnAndArgs.length < 1) {
+      return null;
+    }
+    const fn = fnAndArgs[0];
+    if (typeof fn !== 'function') {
+      return null;
+    }
+    const args = fnAndArgs.slice(1);
+    return fn.bind(thisValue)(...args);
+  }
+}
+
+@Pipe({
+  name: 'function',
+})
+export class FunctionPipe implements PipeTransform {
+  transform(firstArg: any, ...thisFnAndOtherArgs: any): any {
+    if (thisFnAndOtherArgs.length < 2) {
+      return null;
+    }
+    const thisValue = thisFnAndOtherArgs[0];
+    const fn = thisFnAndOtherArgs[1];
+    if (typeof fn !== 'function') {
+      return null;
+    }
+    const args = [firstArg, ...thisFnAndOtherArgs.slice(2)];
+    return fn.bind(thisValue)(...args);
+  }
+}

src/app/shared/pipe/pipe.module.ts

@@ -10,6 +10,8 @@ import { GetHistogramStylePipe } from '../../search/get-histogram-style.pipe';
 import { MapFriendlyValuesPipe } from '../../search/map-friendly-values.pipe';
 import { SelectTabPipe } from '../entry/select-tab.pipe';
 import { BaseUrlPipe } from '../entry/base-url.pipe';
+import { MethodPipe } from './function-pipes';
+import { FunctionPipe } from './function-pipes';
 
 const DECLARATIONS: any[] = [
   FilePathPipe,
@@ -22,6 +24,8 @@ const DECLARATIONS: any[] = [
   GravatarPipe,
   RouterLinkPipe,
   BaseUrlPipe,
+  MethodPipe,
+  FunctionPipe,
 ];
 @NgModule({
   imports: [CommonModule],