First way: paremeter One way to make a Pure Pipe becoming impure is add a parameter to your Pipe. when you want to refresh, just change the parameter. Second way: without parameter Pure Pipe will be fired when its input has a new instance. So with TypeScript 2.1+, the below code will copy the original … Read more
Here is a working plunkr with a filter and sortBy pipe. https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview As developer033 mentioned in a comment, you are passing in a single value to the filter pipe, when the filter pipe is expecting an array of values. I would tell the pipe to expect a single value instead of an array export class … Read more
Add to providers array in the component @Component({ selector: ‘app-root’, templateUrl: ‘…’, providers:[DatePipe] }) or inject it to module @NgModule({ providers:[DatePipe] }) or write a separate class extending the DatePipe and use it as a service @Injectable() export class CustomDatePipe extends DatePipe { transform(value, format) { return super.transform(value, format); } } and inject this to … Read more
You can use Array.prototype.join (notice the white space after the comma) <p class=”personaType”>{{cardData.names.join(‘, ‘)}}</p> This will print all the elements in the array, separated by a comma and a white space.
To use Angular-Material Tooltip you will need: Import the BrowserAnimationsModule and MatTooltipModule: app.module.ts import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; import { MatTooltipModule } from ‘@angular/material/tooltip’; @NgModule({ imports: [ BrowserAnimationsModule, MatTooltipModule, // … Add tooltip to your component test.component.html <div matTooltip=”Tooltip!”>Hover me</div> P.S If you haven’t already installed and imported HammerJs you may need to (Material … Read more
As mentioned by @Perry you will need to provide the date in milliseconds. From the Angular 2 reference for date we have: expression is a date object or a number (milliseconds since UTC epoch) or an ISO string So it can be simply be: {{load.loadDate * 1000 | date}}
You will also get this error if your component is not in the declarations array of its parent module.
This is what can happen when you mix template driven form and reactive form. You have two bindings fighting each other. Choose either template driven or reactive form. If you want to go the reactive route, you can use [value] for your pipe… Note, this pipe is rather only for showing the desired output in … Read more
If you want to use pipe’s transform() method in component, you also need to add CustomPipe to module’s providers: import { CustomPipe } from ‘../pipes/custom.pipe’; … @NgModule({ imports: [ .. ], declarations: [ CustomPipe ], exports: [ CustomPipe ], providers: [ CustomPipe ] }) export class SharedModule { }
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes. This is relevant for changes that are not detected by Angular when you pass an array … Read more