angular-pipe

angular2 error with pipe filter in component

爱⌒轻易说出口 提交于 2019-12-22 00:14:10
问题 I'm trying to add simple search filter in input, so it could filter my records in table. But I'm receiving this kind of error: app/components/orders/orders.component.ts(12,2): error TS2345: Argument of type '{ moduleId: string; selector: string; templateUrl: string; pipes: typeof FilterPipe[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'. All files: orders.component.html, orders

Number pipe either 0 or 2 decimal places

北城以北 提交于 2019-12-21 21:25:09
问题 I'd like to achieve number formatting such that if the number is round there should be no decimal placeholders .00 and otherwise use 2 and only 2 decimal places. For example: 1.23 -> 1.23 1.23456 -> 1.24 1.2 -> 1.20 1.0 -> 1 1 -> 1 According to the docs, you can only specify range of decimal places (e.g. |number:'.0-2' ) and not specific choice (e.g. |number:'.0,2' ); am i right or is there a way? I'm aware I could achieve the same with some *ngIf -s but would like to avoid if possible. 回答1:

Angular 6 input type number and display 2 digits after comma

心已入冬 提交于 2019-12-13 16:55:13
问题 I want to display input and when user enters a number: 20 I want 20,00 to be displayed. For greater numbers I want to see thousand separator like 11 200,00 . <input type="number" (ngModelChange)="calculateSum()" (change)="calculateAmount(invoiceQuota)" [ngModel]="invoiceQuota.controls.grossAmount.value"> I tried to add: [ngModel]="invoiceQuota.controls.grossAmount.value | number:'1.2-2' but it does not work I can't find solution to solve my problem. 回答1: import { Component, Input, NgZone,

Pipe through large list

这一生的挚爱 提交于 2019-12-13 07:47:32
问题 So I have a list of 2000+ employees and I need to filter through them. As I currently have it, it goes super slow and lags for 2 seconds. Everytime I type in a letter, it passes that list each time. Any way to midigate the lag? Update This is some sample code: <div style="margin-bottom:30px;" *ngIf="emulatedList"> <input type="text" style="width:200px; background-color:#eeeeee;" name="searchText" [(ngModel)]="searchText" placeholder="Filter Dropdown List"> <select style="background-color:

How to do group-By using custom pipes in angular

可紊 提交于 2019-12-13 03:46:15
问题 I am trying to group by my list of an array by date using below code but it's not working and just showing group by date but not showing related child data I do not understand where did I do a mistake and I am a learner and I follow http://www.competa.com/blog/custom-groupby-pipe-angular-4/ link for doing my requirement home.ts: events: any; constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { this.events = [{ id: 1, category:'camera', title: 'First

Cannot read property 'toUpperCase' of undefined (“<input name= ”searchtext“ [(ngModel)]=”searchtext">

雨燕双飞 提交于 2019-12-12 10:09:20
问题 I am trying to do filter a number from a number array. but I got this errors.this a my codes. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NumberFilterPipe } from './number-filter.pipe'; import { FormsModule } from '@angular/forms'; import { StringFilterPipe } from './string-filter.pipe'; import { NumberFilterService } from './service/number-filter.service'; @NgModule

Using Angular2+ pipes with Dragula on an array

放肆的年华 提交于 2019-12-12 04:13:56
问题 I have a Trello-like web app. with Task s 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, by first defining my pipe: @Pipe({ name: 'taskFilter', pure: false }) export class TaskFilterPipe implements PipeTransform { transform(items: Task[], filter: Task): Task[] { if (!items || !filter) { return items; } // pipes items array, items

How to extend ngx-translate pipe

拜拜、爱过 提交于 2019-12-11 07:44:10
问题 I want to extend ngx-translate's pipe to make it potentially multi purpose within my app. My pipe: import { Pipe, PipeTransform } from '@angular/core'; import { TranslatePipe } from "@ngx-translate/core"; @Pipe({ name: 'msg' }) export class MsgPipe extends TranslatePipe implements PipeTransform { transform(value: any, args: any[]): any { return super.transform(value, args) } } In order to wait for the relevant translate modules to load, I have used Angular's APP_INITIALIZER: app.module:

Custom filter case sensitive

狂风中的少年 提交于 2019-12-11 05:14:10
问题 I've created custom pipe to filter my data from database There is pipe import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(aliases: any, term: any): any { // check if search term is undefined if (term === undefined) return aliases; // return updated array return aliases.filter(function(alias){ return alias.local_part.includes(term) || alias.domain.includes(term); }); } } and there is my search input <form

Align Phone Number With Angular Pipe

老子叫甜甜 提交于 2019-12-11 03:33:49
问题 I am trying to beautify phone number(999 999 9999) and display with Angular Pipe. Is there is any pipe to do that? Please help me out TS public phone; this.phone = 9999999999; HTML <h1>{{phone | ?? }}</h1> 回答1: You can do it with angular ‘slice’ pipe. Exp: {{ phone | slice:0:2 }} - {{ phone | slice:3:5 }} like that... 来源: https://stackoverflow.com/questions/54806689/align-phone-number-with-angular-pipe