angular-pipe

angular2 error with pipe filter in component

二次信任 提交于 2019-12-04 16:54:37
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.component.ts, filter.pipe.ts are in the same folder And there is code in files: HTML in orders.component.html

Number pipe either 0 or 2 decimal places

橙三吉。 提交于 2019-12-04 16:37:20
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. Adam A If you want to do more than one thing on your variable, the best practise is to create two diffrent

Angular: limitTo pipe not working

折月煮酒 提交于 2019-12-03 15:13:53
问题 I am trying to run limitTo pipe on Angular2 on a string: {{ item.description | limitTo : 20 }} And I get the following error: The pipe 'limitTo' could not be found Is it possible that this pipe was removed in Angular2? This is my app.module import { TruncatePipe } from './limit-to.pipe'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), RouterModule.forRoot([ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home',

Angular 2.0 Release: Pipes and Directives are not properties of @Component anymore

*爱你&永不变心* 提交于 2019-12-03 11:19:00
问题 I just upgraded my app which I built on RC5 to the final release, and I'm confused of the way I should be declaring Directives and Pipes now. I'm getting this error: ERROR in [default] C:\xampp\htdocs\meriem-car\public\src\app\components\administration.component.ts:12:4 Argument of type '{ moduleId: string; selector: string; directives: typeof LoginComponent[]; templateUrl: string; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and

How to use pipes in Angular 5 reactive form input

∥☆過路亽.° 提交于 2019-12-03 06:34:25
问题 I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe. My pipe name is 'udpCurrency' The closest answer I could find on stack overflow was this one: Using Pipes within ngModel on INPUT Elements in Angular2-View However this is not working in my case and I suspect it has something to do with the fact that

Angular: limitTo pipe not working

血红的双手。 提交于 2019-12-03 04:53:06
I am trying to run limitTo pipe on Angular2 on a string: {{ item.description | limitTo : 20 }} And I get the following error: The pipe 'limitTo' could not be found Is it possible that this pipe was removed in Angular2? This is my app.module import { TruncatePipe } from './limit-to.pipe'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), RouterModule.forRoot([ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: GridComponent }, ]) ], declarations: [ AppComponent, TopNavComponent, GridComponent,

How to use pipes in Angular 5 reactive form input

那年仲夏 提交于 2019-12-02 21:55:14
I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe. My pipe name is 'udpCurrency' The closest answer I could find on stack overflow was this one: Using Pipes within ngModel on INPUT Elements in Angular2-View However this is not working in my case and I suspect it has something to do with the fact that my form is reactive Here is all the relevant code: The Template <form [formGroup]="myForm" #f="ngForm"

Angular 2 Filter Pipe

时间秒杀一切 提交于 2019-12-01 21:51:29
问题 Trying to write a custom pipe to hide some items. import { Pipe } from '@angular/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators @Pipe({ name: 'showfilter' }) export class ShowPipe { transform(value) { return value.filter(item => { return item.visible == true; }); } } HTML <flights *ngFor="let item of items | showfilter"> </flights> COMPONENT import { ShowPipe } from '../pipes/show.pipe'; @Component({ selector: 'results', templateUrl: 'app/templates/results.html',

Dynamically updating [checked] in Angular2

最后都变了- 提交于 2019-12-01 19:04:27
问题 componentA.ts : @Input() array; <input type="checkbox" [checked]="array | contains: value"/> <label>{{array.length}}</label> componentB.ts : @Component({ selector: 'app-component-b', templateUrl: './app.component-b.html' }) export class AppComponentB { array = [1, 2, 3]; } I update array in some other components. While the label updates the array's length correctly, the check box doesn't seem to be updated. contains is just a simple pipe that checks if value is part of array . I put a console

Use async pipe in ngFor on Observable of Observables (Angular)

五迷三道 提交于 2019-12-01 04:43:39
I have variable defined like this: myVar: Observable<Observable<MyObject>[]> . I am using Angular4 feature to enumerate with async pipe *ngFor="let obsMyObject of (myVar | async)" now I have Observable of MyObject, but I need just MyObject. I could write something like that: <div *ngFor="let obsMyObject of (myVar | async)"> <div *ngIf="let obsMyObject | async; let MyObject"></div> </div> but I can not do this in inner div, because I am setting flex order (which doesn't have any effect on inner div) property so I need something like this: <div *ngFor="let obsMyObject of (myVar | async); let