Stack Overflow
Stack Overflow

Questions tagged [angular2-pipe]

An Angular 2 pipe takes in data as input and transforms it to a desired output.

An Angular 2 pipe takes in data as input and transforms it to a desired output.

The first version of AngularJS, used the concept of filters to format the value of an expression for display to the user.

Angular 2 introduced a similar concept, now called pipe.

187 questions
330
votes
6 answers

How do I call an Angular 2 pipe with multiple arguments?

I know I can call a pipe like this: {{ myData | date:'fullDate' }} Here the date pipe takes only one argument. What is the syntax to call a pipe with more parameters, from component's template HTML and directly in code?
Eran Shabi
  • 14,201
  • 7
  • 30
  • 51
140
votes
11 answers

The pipe ' ' could not be found angular2 custom pipe

I can't seem to fix this error. I have a search bar and an ngFor. I am trying to filter the array using a custom pipe like this: import { Pipe, PipeTransform } from '@angular/core'; import { User } from '../user/user'; @Pipe({ name:…
Sumama Waheed
  • 3,579
  • 3
  • 18
  • 32
106
votes
4 answers

Angular 2 Pipe under condition

Is it possible in Angular 2 to apply a pipe under condition? I would like to do something like: {{ variable.text | (variable.value ? SomePipe : OtherPipe) }} If not, what is the preferred way to achieve this effect?
Daniel Kucal
  • 8,684
  • 6
  • 39
  • 64
91
votes
5 answers

What is an impure pipe in Angular?

@Pipe({name:'myPipe', pure: false}) I am unable to understand impure pipes. What's the difference between pure and impure pipes? Please explain with a simple and basic example.
Mr_Perfect
  • 8,254
  • 11
  • 35
  • 62
89
votes
11 answers

Angular2: custom pipe could not be found

The built-in pipe is work,but all custom pipes that i wanna use are the same error: the pipe 'actStatusPipe' could not be found [ERROR ->]{{data.actStatus | actStatusPipe}} I have tried two ways,declare it in app.module's…
rui
  • 1,003
  • 1
  • 7
  • 5
66
votes
9 answers

How to mock Pipe when testing Component

Currently I am overriding providers to use mocked services like this: beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { tcb.overrideProviders(AddFieldToObjectDropdownComponent, [ provide(ServiceA, {…
harunurhan
  • 1,516
  • 1
  • 17
  • 21
36
votes
1 answer

Angular 2 - Pipe reuse in multiple modules - error not found or duplicate definition

Im working on angular 2 final release. I have declared two modules: main app and one for the settings page. The main module is declaring globally pipes. This module is also including the settings module. app.module.ts @NgModule({ imports:…
kitimenpolku
  • 2,604
  • 4
  • 36
  • 51
29
votes
7 answers

Dynamically change locale for DatePipe in Angular 2

I'm making an Angular project where the user has the ability to switch languages. Is it possible to make the locale dynamic? I have seen that you can add it in the NgModule, but I'm guessing it's not dynamic when I put it there? Or can I change it…
Martijn van den Bergh
  • 1,434
  • 1
  • 20
  • 40
26
votes
1 answer

Decimal Pipe in Angular 2 - Commas Only, No Decimal Places

I currently use this pipe {{ product.productPrice | number:'.2-2' }} And result is 1,000,000.00 but I want to remove the .00 How do you do that?
Char
  • 2,073
  • 8
  • 28
  • 45
25
votes
5 answers

How to re-trigger all pure pipes on all component tree in Angular 2

I have pure pipe TranslatePipe that translates phrases using LocaleService that has locale$: Observable current locale. I also have ChangeDetectionStrategy.OnPush enabled for all my components including AppComponent. Now, how can I reload…
Ivan Zyranau
  • 879
  • 2
  • 14
  • 33
23
votes
8 answers

Dynamic pipe in Angular 2

I'm trying to create a component where you can pass which pipe that should be used for a list inside the component. From what I could find by testing and looking around for answers the only solution appears to create something like:
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
19
votes
3 answers

Split string based on spaces and read that in angular2

I am creating a pipe in angular2 where I want to split the string on white spaces and later on read it as an array. let stringToSplit = "abc def ghi"; StringToSplit.split(" "); console.log(stringToSplit[0]); When I log this, I always get "a" as…
Abhinav Mishra
  • 193
  • 1
  • 1
  • 6
16
votes
5 answers

Get length of array in ngFor after pipes transformation

I have the following template:
Here is the length of my ngFor : {{l}}
Unfortunately length doesn't exist in ngFor. How can I work around this issue to have the…
Scipion
  • 11,449
  • 19
  • 74
  • 139
14
votes
2 answers

Using number pipe throws InvalidPipeArgumentException (Invalid argument '1' for pipe 'DecimalPipe')

I want to write some number into and dynamically display it as a decimal inside {{}} through pipe. It throws exception instead. Here's my code: app.template.html:

amount = {{amount|number:'1.2-2'}}

Celebes
  • 1,371
  • 1
  • 12
  • 21
13
votes
8 answers

Angular 2 ngFor - reverse order of output using the index

Trying to learn something about filtering and ordering in Angular 2. I can't seem to find any decent resources and I'm stuck at how to order an ngFor output in reverse order using the index. I have written the the following pipe put it keeps giving…
Hamburgersn Heroin
  • 207
  • 1
  • 2
  • 12
1
2 3
…
12 13