Questions tagged [angular-pipe]

Use for discussion of Angular 2+ pipes

An Angular 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 (version 2 and on) introduced a similar concept, now called pipe.

671 questions
6
votes
2 answers

ngx chart data with pipe

I am using a filter pipe with the ngx-charts data array. The data is filtered by 2 dates: fromDate and toDate. The pipe is working fine when filtering with dates that make the array smaller, but when I filter first with a smaller date-range and then…
Max R.
  • 1,574
  • 2
  • 12
  • 27
6
votes
1 answer

Use async pipe in ngFor on Observable of Observables (Angular)

I have variable defined like this: myVar: Observable[]>. I am using Angular4 feature to enumerate with async pipe *ngFor="let obsMyObject of (myVar | async)" now I have Observable of MyObject, but I need just MyObject. I could…
Makla
  • 9,899
  • 16
  • 72
  • 142
6
votes
3 answers

Angular pipe - get current element reference

I want to access the current element where the pipe is being used in. Is it possible in Angular? Pipe is used as follows e.g. Here is an example of the actual pipe @Pipe({ name:…
Stan
  • 25,744
  • 53
  • 164
  • 242
6
votes
6 answers

Angular 4 Filter Search Custom Pipe

So I am trying to build a custom pipe to do a search filter of multiple values in a ngFor loop. I have looked for a number of hours for a good working example, and most of them are based on previous builds and don't seem to work. So I was building…
T. Evans
  • 959
  • 3
  • 14
  • 27
6
votes
1 answer

How to use the filters (pipes) in components in Angular 2 (not in DOM using pipes)

In angular 1 we are having filters, those filters can be used in both DOM and Typescript/Javascript. In Angular 2 we use pipes to do that stuff, but the pipes are accessible to use only in DOM. Is there any other way to use the pipe function in…
5
votes
2 answers

Angular - How to implement switchMap for multiple http requests?

In my project, I sometimes want to update the available options in a list when the user changes the selected value in another list. To do this, I've used valueChanges with the pipe operator and switchMap like…
Chris
  • 1,417
  • 4
  • 21
  • 53
5
votes
2 answers

Number formatting Angular Pipe

I am looking for a pipe that transforms like below, just wanted to round 2 decimal points. I tried [ngModel]="item.value | number number:'1.0-X'", but it's not working in all cases 239.779 > 239.78 0.674 > 0.67 35355.453 > 35355.45
Jayesh
  • 641
  • 4
  • 13
  • 32
5
votes
1 answer

which performance are better? ngx-translate Directive or Pipe?

I'm using ngx-translate 11.x with angular 7 in a huge project. When use pipe transform show first empty string And when use directive, show first path to translate string. Directive way: Pipe way:
5
votes
1 answer

Angular: Pipes vs methods in model

I use functions in models as in this example: //user.madel.ts class User { getFullname () { return this.firstname + ' ' + this.lastName; } } // in html I can do this: {{ user.getFullName() }} Is it proper or should I…
5
votes
1 answer

Ascending and Descending Sort in Angular 4

Why is it that sort function is working : Transaction Date
user8743396
5
votes
4 answers

Number pipe either 0 or 2 decimal places

I'd like to achieve number formatting such that if the number is round there should be no decimal placeholders .00 and otherwise use 2 and only 2 decimal places. For example: 1.23 -> 1.23 1.23456 -> 1.24 1.2 -> 1.20 1.0 -> 1 1 ->…
crollywood
  • 523
  • 1
  • 6
  • 17
5
votes
1 answer

Currency pipe wrong format

In my angular 4 project I want to display some italian amouts, so I am using the default standard currency pipe like: {{amount | currency:'EUR':true}} But it shows a number formatted like this: €12.00 that is not the italian standard, I expect…
Alessandro Celeghin
  • 4,039
  • 14
  • 49
  • 95
5
votes
1 answer

How to call pipe only on value change

I am using angular 2 with primeng p-dropdown and have a case where I need to filter a child dropdown when the user selects a parent. I did it using a custom pipe like
Ali Baig
  • 3,819
  • 4
  • 34
  • 47
5
votes
2 answers

How to use Numeral.js library in angular2/ionic 2 typescript app?

I have been successful using Numeral.js library in my angularJs(1.x) applications to format my numbers in different formats. This is how I use angular1 filters: filter.js .filter('numeral', function () { return function (count) { var…
Sukumar MS
  • 748
  • 1
  • 11
  • 42
5
votes
1 answer

Set input field placeholder from pipe

I would like to dynamically set placeholders using pipes. (this method does not work) The pipe itself works perfectly fine e.g.

{{ myVariable | getText}}

will correctly render,…
longbow
  • 1,593
  • 1
  • 16
  • 39