Stack Overflow
Stack Overflow

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
371
votes
17 answers

Format date as dd/MM/yyyy using pipes

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible? //our root app component import {Component} from 'angular2/core' @Component({ …
Jp_
  • 5,973
  • 4
  • 25
  • 36
187
votes
5 answers

What is pipe() function in Angular

Pipes are filters for transforming data (formats) in the template. I came across the pipe() function as below. What does this pipe() function exactly mean in this case? return this.http.get(url) .pipe( tap(_ => this.log(`fetched hero…
Dinesh Sharma
  • 2,117
  • 3
  • 13
  • 9
161
votes
2 answers

Is it possible to use a pipe in the code?

When I use my custom pipe in a template, it is like this: {{user|userName}} And it works well. Is it possible to use a pipe in the code? I try to use it like this: let name = `${user|userName}`; But it shows userName is not defined My…
Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
150
votes
12 answers

angular keyvalue pipe sort properties / iterate in order

When using the Angular keyvalue pipe to iterate over an object's properties as follows:
{{item.key}}:{{item.value}}
I have experienced an issue where the properties were not iterated in the…
danday74
  • 52,471
  • 49
  • 232
  • 283
126
votes
10 answers

NgFor doesn't update data with Pipe in Angular2

In this scenario, I'm displaying a list of students (array) to the view with ngFor:
  • {{student.name}}
    • It's wonderful that it updates whenever I add other student to the list. However, when I give it a pipe to…
    Chu Son
    • 1,520
    • 3
    • 12
    • 13
    108
    votes
    19 answers

    OrderBy pipe issue

    I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component…
    user4956851
    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
    86
    votes
    3 answers

    No Provider for CustomPipe - angular 4

    I've a custom decimal format pipe that uses angular Decimal pipe inturn. This pipe is a part of the shared module. I'm use this in feature module and getting no provider error when running the application. Please ignore if there are any…
    mperle
    • 3,342
    • 8
    • 20
    • 34
    72
    votes
    9 answers

    How to use pipes in Angular 5 reactive form input

    I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe. …
    Dallas Caley
    • 5,367
    • 6
    • 40
    • 69
    56
    votes
    3 answers

    Convert timestamp to date using Angular 2 pipes

    I'm trying to convert a timestamp to a date format using Angular pipes. I wrote this in the HTML template: {{myTimestamp | date}} Where myTimestamp is of type number. I get unexpected results, for example, the timestamp 1468251287 (Which matches…
    Platus
    • 1,753
    • 8
    • 25
    • 51
    51
    votes
    8 answers

    Angular - No pipe found with name

    I've created a pipe using "ng g pipe" command. I'm getting a console error when I'm using it in my code. The screenshots of the code are attached below. Error: error NG8004: No pipe found with name…
    Riyasree
    • 567
    • 1
    • 4
    • 10
    36
    votes
    2 answers

    How to print an array in comma separated string in angular html

    I have to display a parse an array inside a json in HTML:

    {{cardData.names}}

    where names is names: Array(5) 0:"Person" 1:"Artist" 2:"Performing Artist" 3:"Production Artist" 4:"Visual Artist" 5:"Intermedia Artist" I…
    Always_a_learner
    • 4,585
    • 13
    • 63
    • 112
    36
    votes
    8 answers

    Tooltip issue, MatTooltip not working in Angular

    I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated. module.ts .. import {MatTooltipModule} from…
    Soumyadip Chakraborty
    • 735
    • 2
    • 7
    • 10
    34
    votes
    2 answers

    How to use pipes in Component

    I want to use the datePipe in my component. I followed the instructions here but I am met with Error: StaticInjectorError[DatePipe]: StaticInjectorError[DatePipe]: NullInjectorError: No provider for DatePipe! Here is my code: Component import {…
    M.Nar
    • 512
    • 1
    • 9
    • 24
    1
    2 3
    …
    44 45