angular2-pipe

Angular filter table using custom pipe upon button click

由 心已入冬 提交于 2019-12-12 18:56:00
问题 I have a table which I successfully filter using a custom pipe. The filter is based on two inputs which are together a form. The functionality I want to add is for the filtering not to happen until a submit button is clicked. So it's more like a search button. I've found plenty of information on pipes, but nothing about activating them upon button clicks. mainpage.component.html: <div> <label>Start Date:</label> <input type="text" [(ngModel)]="startDateValue"> </div> <label>End Date:</label>

Bind component variable to pipe filter

由 ≡放荡痞女 提交于 2019-12-11 07:04:12
问题 i have a problem when passing values to my pipe filter. I need to pass an argument value in the form of a variable called pagex from my component and I cant find the syntax to make it work... or I'm missing something. Thanks for the help. myComponent export class ItemsComponent { items:any[] pagex:number; constructor(private ItemService:ItemService){ this.ItemService.getItems() .subscribe(items =>{ this.items=items; this.pagex=2; }); } The following, passing the value manually, works: <div

Test an async PipeTransform

由 左心房为你撑大大i 提交于 2019-12-11 04:38:58
问题 Context I have a basic PipeTransform , expect the fact that it is async. Why? because I have my own i18n service (because of parsing, pluralization and other constraints, I did my own) and it returns a Promise<string> : @Pipe({ name: "i18n", pure: false }) export class I18nPipe implements PipeTransform { private done = false; constructor(private i18n:I18n) { } value:string; transform(value:string, args:I18nPipeArgs):string { if(this.done){ return this.value; } if (args.plural) { this.i18n

Angular2 RC1 Pipes Always Passing Undefined

由 雨燕双飞 提交于 2019-12-10 18:24:38
问题 After upgrading to RC1 from Beta, pipes don't seem to be correctly passing data. I am receiving the following: ORIGINAL EXCEPTION: TypeError: Cannot read property '1' of undefined ORIGINAL STACKTRACE: TypeError: Cannot read property '1' of undefined This is an old plunker, but it shows the way I am using pipes within my application. https://plnkr.co/edit/DHLVc0?p=preview Sometimes I get no errors at all and it treats the page as if there were no pipes whatsoever. 回答1: On version 2.0.0-beta.16

How to convert seconds to time string in angular2?

由 依然范特西╮ 提交于 2019-12-07 17:07:18
问题 So I've been looking for this functionality throughout the net and haven't found a solution that I could use to convert seconds to years, months, days, hours, minutes and seconds that could be represented as a string. 回答1: I have came up with solution of a Pipe in Angular2, however I would like to get some feedback on things that could be done better to improve it. Moreover maybe some other people will be in a need of this kind of pipe, so I'm just leaving it here to share. import {Pipe} from

Using pipe name as a variable in the template in Angular2

由 心已入冬 提交于 2019-12-07 10:13:30
问题 I am struggling with using a standard angular2 pipe in a non-standard way and I was wondering if there are any ways around it. Assume I have a variable which its value equals the definition of a standard pipe, for example, the common "date:'medium'" pipe. let a = "date:\':medium\'"; Now, somewhere in my html, I would like to be able to use this "a" variable the following way: <p>{{myRecord.date | a}}</p> And I want this "a" to have the same effect of the date pipe it contains. Is there any

Angular 2 Table Search Pipe Filter not working

由 本小妞迷上赌 提交于 2019-12-07 05:00:34
I am creating a table component in Angular 2, in which I am creating a common table search filter pipe, it is working correctly but not displaying the values in their appropriate columns. When I start typing the search keys in the text box the filtered values are displayed correctly but not under their appropriate columns. Sorry if this question is a duplicated one, I have spent enough time in searching the web but I was unable to get a solution for it. Below is the code for your reference component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: '

Angular 2 ngFor - reverse order of output using the index

由 泄露秘密 提交于 2019-12-06 01:35:52
问题 Trying to learn something about filtering and ordering in Angular 2. I can't seem to find any decent resources and I'm stuck at how to order an ngFor output in reverse order using the index. I have written the the following pipe put it keeps giving me errors that array slice in not a function. @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(arr) { var copy = arr.slice(); return copy.reverse(); } } and my ngfor looks like this. <div class="table-row

Using pipe name as a variable in the template in Angular2

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-05 15:49:55
I am struggling with using a standard angular2 pipe in a non-standard way and I was wondering if there are any ways around it. Assume I have a variable which its value equals the definition of a standard pipe, for example, the common "date:'medium'" pipe. let a = "date:\':medium\'"; Now, somewhere in my html, I would like to be able to use this "a" variable the following way: <p>{{myRecord.date | a}}</p> And I want this "a" to have the same effect of the date pipe it contains. Is there any way to achieve this? 来源： https://stackoverflow.com/questions/43788650/using-pipe-name-as-a-variable-in

Angular 2: Cursor issue with “number” pipe on ngModel input

由 丶灬走出姿态 提交于 2019-12-04 09:20:07
I have an input that I want to be displayed like currency. I want only two decimal places to be allowed and for it to only allow numbers while automatically adding commas when necessary. Basically, if the user types "12345", I want the input to automatically display as "12,345.00". "12,345" would be acceptable too, but if they type in "12345.5" then it would need to be displayed as "12,345.50". I'm trying to use pipes to accomplish this and decided to use the "number" pipe since I don't want a currency symbol shown (I already have a dollar sign as a label before the input). Here is my code:
订阅 angular2-pipe