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
0
votes
0 answers

Pipe's array order changes even though data does not

I have created the following pipe: @Pipe({ name: 'orderBy', pure: false }) export class OrderByPipe implements PipeTransform { transform(array: Array, orderProperty: string): Array { array.sort((a: any, b: any) => { if…
Jesper
  • 2,644
  • 4
  • 30
  • 65
0
votes
2 answers

Make component, directive and pipe public and use outside a module

How do I make a component, directive and pipe public? This is because when I add them to declarations array in a module, they become visible everywhere in the module where they are declared and are private to the module. If I've to use outside the…
0
votes
1 answer

Angular 2 filter by exact values (strict equality)

I have created a pipe which filters data based on user input search in angular 2. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filterName', pure:false }) export class FilterNamePipe implements PipeTransform { …
0
votes
1 answer

Angular conditionally render different element

I need to do something like depending on the Type property of an object, render a different component: My pipe returns a specific element Can I assign to a template variable an expression? Simplest way to do this? Thanks in advance
CREM
  • 1,929
  • 1
  • 25
  • 35
0
votes
2 answers

Angular4 / AngularFire2: Querying firebase from within a pipe?

Is it possible -- from within a pipe --to query a Firebase database and return a value? I have the following HTML

{{item.firstName}} {{item.middleName}} {{item.lastName}}

eat-sleep-code
  • 4,753
  • 13
  • 52
  • 98
0
votes
3 answers

How to get current day (trimmed to 3 char only) in angular2/4

Have used currentDate = new Date(); in my typescript file and tried to render by using {{currentDate}} but it shows full format like Sun Aug 06 2017 15:36:11 GMT+0530 (IST). I took reference from AngularDatePipe , then i render {{currentDate |…
0
votes
2 answers

Why pipe not working?

I have created one pipe to sort an object array based on the value of the object property.keep all Objects with property show==0 and show==1 are removed,there is no any error and can be seen in the console. pipe.ts @Pipe({ name:…
Ajith
  • 775
  • 1
  • 13
  • 47
0
votes
1 answer

How to use TimeAgoPipe of MomentModule from typescript file in angular 2

I want to use moment.js for displaying the age of a marker shown in google map in my ionic 2 app. I have installed moment.js as npm install --save angular2-moment The doc of angular2-moment explains how to use amTimeAgo from template. But I…
Dijish U.K
  • 159
  • 1
  • 22
0
votes
3 answers

Custom pipe to templateUrl

I have created a custom pipe. import { Component, Pipe,PipeTransform} from '@angular/core'; @Component({ selector: 'app-summary', templateUrl: './summary.component.html', styleUrls: ['./summary.component.css'] }) @Pipe({ …
Bigeyes
  • 1,508
  • 2
  • 23
  • 42
0
votes
0 answers

Angular2: How to bind the currency pipe currency

How do you bind to the currency field in Angular2? If I have a table of data: Currency | Amount | Desired Result USD | 12,000 | $12,000 EUR | 10,000 | €10,000 I know the standard formatting pipe: {{ item.Amount |…
Chris A
  • 144
  • 2
  • 11
0
votes
3 answers

Using Angular2+ pipes with Dragula on an array

I have a Trello-like web app. with Tasks that can be dragged & dropped in status boxes (To do, ogoing and done). I use ng2-dragula to achieve the drag & drop feature and wanted to implement a way to filter my tasks with an Angular 2 pipe. So I did,…
Christopher
  • 1,712
  • 2
  • 21
  • 50
0
votes
0 answers

Angular2 pipes time interval on json data

I'm building an angular2 app with highcharts. I have set up my data importing service and i can already proces the data to go into highcharts, but now i want to group the data on 5 minute intervals. The data i have is in epochtime. now i want to…
DataNewB
  • 121
  • 9
0
votes
2 answers

Angular custom Pipe declaration

I am trying to use a custom Pipe to filter a list of items. // pipes/my-filter/my-filter.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'my-filter', }) export class MyFilter implements PipeTransform { transform(value:…
TGrif
  • 5,725
  • 9
  • 31
  • 52
0
votes
0 answers

how to have a pipe used inside input tag

The above field is supposed to be currency field. I am using currencyMask to format the field value as the user enters. But when the…
radio_head
  • 1,306
  • 4
  • 13
  • 28
0
votes
1 answer

Is this the correct way to implement a Pipe in Angular 2

I am working on an Angular 2 application with Webpack. I am implementing a pipe in Angular 2 to format phone number using google-libphonenumber. Everything is working as expected. I am not very knowledgeable on how require works i.e., it is as…
TechCrunch
  • 2,924
  • 5
  • 45
  • 79