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
4
votes
2 answers

Pipe with piped parameter in angular 2

I'd like to write something like

{{"CURRENT_DATE" | translate:(value:(currentDate | date:getDateFormat))}}

where translate is a pipe function from ng2-translate. I'd like to display: "Today is 2016-07-13", so CURRENT_DATE is "Today is…
Gnujeremie
  • 570
  • 3
  • 17
3
votes
2 answers

Can promises in Angular pipes break an application?

I have this small library that provides a translation pipe. Everything works well, if I use Observables. The relevent code is…
tobias47n9e
  • 2,233
  • 3
  • 28
  • 54
3
votes
1 answer

How could I define global @pipe() which would be used in all lazy loaded module in Angular without using shared module?

I am using a pipe in angular to return a value. To use this pipe I need to declare this pipe in every lazy loaded module. I am using this pipe with shared module. But I think this is not good practice to import pipemodule in every module file to use…
3
votes
1 answer

Angular - innerHTML attribute - delay of one part of the innerHTML

I am using [innerHTML] to display a string. A string is made from two properties of the same object. The object comes from from passing a list of objects(from Observable from NgRx) to *ngFor. Also, the pipe is used to decide what should be in…
3
votes
5 answers

Angular pipe that transforms number to readable fraction

I would like to create an Angular 5 pipe that translates a more readable fraction from a number. For example: 0,66 -> ⅔ 0,25 -> ¼ 1.25 -> 1 ¼ Here is what I already have, but I would like to make it more dynamic: export class FracturePipe…
Fargho
  • 1,267
  • 4
  • 15
  • 30
3
votes
2 answers

How to use PercentPipe in input field

I am trying to create input field for percentage. And I am using PercentPipe to display percentage. However I am getting error when I input some number
user9876776
3
votes
1 answer

Writing a custom table filter in Angular 6

I wanted to add a custom table filter to my angular code. Did web search and found this blog post: https://www.code-sample.com/2018/07/angular-6-search-filter-pipe-table-by.html It works pretty well and here the pipe code: import { Pipe,…
Red Cricket
  • 9,762
  • 21
  • 81
  • 166
3
votes
1 answer

Angular Filter Pipe for KeyValue and AutoComplete

First of all I want to show countries with this pipe and filter them with inserted characters and I need the ISO codes to show the flags of the countries. The problem is that I want to use a library which has all countries with ISO codes and stuff.…
CptDayDreamer
  • 1,526
  • 6
  • 25
  • 61
3
votes
2 answers

Is unsubscribe needed if an Observable uses an async pipe?

I need to determine whether two different approaches for handling Observables are equally valid, or if one will cause memory issues. In the following example, foo$ and bar are template variables that receive their values from a service. Each has its…
ebakunin
  • 3,621
  • 7
  • 30
  • 49
3
votes
5 answers

How to store and use angular pipe result to add ngClass in html file

What I am doing: html file
ts file: someArray = [1, 2, 3] results = [ {id:1, name:'abc'}, {id:2, name:'xyz'}, {id:4,…
Always_a_learner
  • 4,585
  • 13
  • 63
  • 112
3
votes
3 answers

Angular pipe could not be found using ionic 4

recently l create my own pipe in ionic4 name is StatusairportPipe . Then l imported it in app module.ts , now when l am trying to use it l got errors: ERROR Error: Uncaught (in promise): Error: Template parse errors: The pipe 'my' could not be found…
Ali Ghassan
  • 1,280
  • 1
  • 22
  • 59
3
votes
2 answers

span doesn't apply css style when entered via innerHTML

I have and Angular app, and as part of it I show query result in a div (has ID of JSONContainer). I wanted to highlight the specific query inside the result, so I used a pipe that searchs the results, and replaces the FIELD:VALUE in the text…
yishain11
  • 245
  • 1
  • 6
  • 12
3
votes
1 answer

Angular 4 OrderBy Pipe not sorting if name ends with number

I want to use pipe to sort names ending with numbers. I have used custom pipe and getting results as expected $Apple fruit -symbol 1Apple fruit -numbers Apple fruit -alphabetically But it is not sorting if name ends with number. Result…
Jesse W
  • 91
  • 1
  • 8
3
votes
2 answers

How to highlight searched text in angular6, using pipe?

I want to build a search box in angular, that would return the array of item,and also highlight the searcchedTerm in the results array. For example: In Chrome if you are searching any text, it would highlight with light yellow background. Similar to…
Raj
  • 1,100
  • 3
  • 20
  • 33
3
votes
2 answers

Using a pipe under a different name

I'm using the ngx-translate internationalization library in my Angular 6 app. Right now a translation in one of my templates is done like this: {{ 'HELLO' | translate:param }} However, it would be great if I could have it this…
tom
  • 2,137
  • 2
  • 27
  • 51