PipeTransform docs unclear when dealing with multiple parameters
See original GitHub issue📚 Docs or angular.io bug report
Description
The PipeTransform’s transform
parameters are unclear as it can now support multiple individual parameters or a rest param. It should be clarified how you can pass multiple parameters to the transform method. I suggest adding an additional example with multiple parameters as both of these ways of invoking the method are valid:
export class MyPipe implements PipeTransform {
// specify every argument individually
transform(value: any, arg1: any, arg2: any, arg3: any): any { }
// or use a rest parameter
transform(value: any, ...args: any[]): any { }
}
Example addition suggestion:
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number, trail: string): string {
return value.substring(0, limit) + trail;
}
}
Invoking {{ ‘Truncate me’ | truncate:8:‘!’ }} in a template produces Truncate!.
Additionally, it would be nice to document how to write a unit test for a pipe with multiple parameters. Similar to this:
it('should support multiple pipe parameters in the template', () => {
@Component({
template: `{{ text | truncate:8:'...' }}`,
})
class App {
text = 'Truncate me';
}
TestBed.configureTestingModule({declarations: [App, TruncatePipe]});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toEqual('Truncate...');
});
What’s the affected URL?**
https://angular.io/api/core/PipeTransform
📷Screenshot
Can I open up a PR to make this change?
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
How do I call an Angular 2 pipe with multiple arguments?
In your component's template you can use multiple arguments by separating them ... export class MyPipe implements PipeTransform { // specify every argument...
Read more >Using Pipes to transform data in Angular
Angular help us to convert values for display using Pipes; the pipes are a way to transform input data to a desired or...
Read more >Transforming Data Using Pipes - Angular
If the pipe accepts multiple parameters, separate the values with colons. ... The app.component.html template uses a format parameter for the DatePipe ...
Read more >How to create custom pipes in Angular | by Pankaj Kumar
Pipe with Multi arguments. In any case we want to append/ or add deduct some value from the available data then multiple arguments...
Read more >Pass Multiple returns to a function. - Google Groups
I really don't see how that code is confusing. You have a function with 3 parameters and two functions with 1 and 2...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Definitely agreed.
These are framework tests, so you want to make sure the pipe as a mechanism works end to end. When writing your own pipe you don’t need to test that the framework works, though.
Note that there certainly are pipes where a component unit test can be useful, just the majority of pipes in my experience wouldn’t need it.