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
13
votes
3 answers

Angular 4 - How to use currency pipe in input type

I have an HTML input: I want to format its value and use an existing pipe: .... [(ngModel)]="item.value | currency:'USD':true" ..... Also I'm trying to use it the following way, but…
Mahendra Waykos
  • 666
  • 2
  • 7
  • 18
12
votes
1 answer

Pipe reuse in multiple modules , NG6007 (is declared by more than one NgModule) or NG6002 (could not be resolved to an NgModule class),

My Pipe located in apps\administrator\src\app\modules\messenger\pipes\custom-message.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe for Custom Message for boolean */ @Pipe({ name: 'customMessage', }) export class…
user1410223
11
votes
2 answers

Angular - The pipe 'keyvalue' could not be found

I'm testing Angular's keyvalue pipe with simple code: import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `
key: {{prop.key}}
value:…
Abdul Rafay
  • 3,241
  • 4
  • 25
  • 50
11
votes
3 answers

Search for a string in all properties of an object in Angular 2

How to search for a string in all properties of an object in Angular 2 with TS. I have an array of customers rendered in a table with a search box, if the user types a value I want to search for all properties values to push a customer that matches…
J.Rem
  • 545
  • 2
  • 6
  • 24
11
votes
1 answer

Applying a pipe or transform to a Reactive Form value

I'm building a simple reactive form. For simplicity, lets say the only data I want to display is a date. test.component.html
test.component.ts private…
cgatian
  • 22,047
  • 9
  • 56
  • 76
10
votes
4 answers

Angular 9 Keyvalues pipe doesn't build for production

My app that I've created runs fine on the development server, ng serve, but when I attempt to build for production it fails with this error ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of type 'object' is not assignable to…
10
votes
2 answers

Angular 6 Date Pipe not showing anything on iPhone safari browser

I'm using simple date pipe to format date which is working fine on web and android browsers but on IOS it's showing nothing. If I remove the PIPE and display data then it's shown but not with the PIPE. {{race.race_date | date:'M/d/y'}} You can…
Umair Malik
  • 1,403
  • 3
  • 30
  • 59
10
votes
1 answer

Angular 5 percent pipe digitInfo not working as expected

If I do this in an Angular 5 template: {{0.7 | percent:'1.2-5'}} I get this as expected: 70.00% However, when I do this: {{0.07 | percent:'1.2-5'}} I get 7.00000% instead of what the expected 7.00% Am I just doing something wrong or is this a bug…
9
votes
8 answers

How to change time from 24 to 12 hour format in angular 5

I have used input type time in my application to receive time:

Atul Stha
  • 1,404
  • 8
  • 23
  • 46
9
votes
1 answer

Angular 6 - Importing shared module for child modules

I'm trying to make a shared module, but it's don't want to work somehow. The shared module looks like this: import { ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedMetaModule }…
user8778731
  • 155
  • 1
  • 2
  • 9
9
votes
4 answers

Angular 5 - how to make the period field type lowercase in DatePipe

Using DatePipe in Angular 5.1, I need to format the period field type (AM/PM) in lowercase. According to the documentation, Tuesday, December 19, 7:00 am should be date:'EEEE, MMMM d, h:mm a' However, the period field type always displays in…
ebakunin
  • 3,621
  • 7
  • 30
  • 49
9
votes
3 answers

How to use custom pipe on async pipe?

I'm trying to create custom pipe on asynchronous pipe, I tried many solutions, but still not working. Here is the snippet of code. product.sort.ts - custom pipe import { PipeTransform, Pipe } from '@angular/core'; import { Observable } from…
Sagar Ganesh
  • 2,454
  • 3
  • 20
  • 32
8
votes
1 answer

The pipe 'async' could not be found - Angular 11

I am trying to fetch data with with Angular 11 as observable and I am having issues using async or json pipe in a lazy loaded component/module. I get the error in the console. The module: import { NgModule } from '@angular/core'; import {…
Bozhinovski
  • 2,496
  • 3
  • 20
  • 38
8
votes
2 answers

Angular Pipe not working when selecting the browser suggestion for input field

I am using the built-in pipe titlecase on an input field - username in a reactive form. It is working properly only when i am typing in the input field and its not working when i select from the browser suggestion for that input field, even when i…
Avinash
  • 1,245
  • 11
  • 19
8
votes
1 answer

Angular 2 Pipes executing before ngOnInit

I have a implemented a custom Pipe in Angular 2 RC5 which processes data that I get from the server. The problem I'm having is that the Pipe executes before the ngOnInit which is where I am making the calls to the server. As a test I passed…
Daniel Grima
  • 2,765
  • 7
  • 34
  • 58
1 2
3
44 45