question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

Screen Shot 2020-05-28 at 11 57 35 Screen Shot 2020-05-28 at 12 09 19

Can I open up a PR to make this change?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Airbladercommented, Jun 5, 2020

But how multiple parameters are passed to a pipe from the template is clearly an Angular related question.

Definitely agreed.

1reaction
Airbladercommented, Jun 4, 2020

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found