File tree Expand file tree Collapse file tree 2 files changed +21
-5
lines changed
apps/angular/9-wrap-function-pipe/src/app Expand file tree Collapse file tree 2 files changed +21
-5
lines changed Original file line number Diff line number Diff line change 11import { 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 } ` ;
Original file line number Diff line number Diff line change 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+ }
You can’t perform that action at this time.
0 commit comments