The goal is to ensure you have a properly compiled QTDIR. In your case one for VS and one for gcc (if you want the two).
Depending on what you downloaded Qt Creator uses gcc but you can specify alternative QT directories under Options > Qt4 > Qt Versions. The path and version will show in the dialog box.
Go to the VS command line and run configure.exe
& nmake
with a clean source repository. Then add this QTDIR to you Qt Creator. I suggest you run make clean before.
Then make sure qmake
and nmake
can be run from the Qt command-line without errors. You should have a Qt Command line icon installed if you used Qt installer. If not, make sure you have QTDIR environment variable set, with %QTDIR%/bin
in the path.
Do step 1 again, but this time do not use VS but make sure gcc is in the path. Run configure.exe etc again but in a separate directory specially for gcc. Add this version to your Qt Creator.
When compiling your project, run qmake first. You can change Qt versions, but do not forget to run qmake.
Hope this helps.
Basically, you write a pipe which you can then use in the *ngFor
directive.
In your component:
filterargs = {title: 'hello'};
items = [{title: 'hello world'}, {title: 'hello kitty'}, {title: 'foo bar'}];
In your template, you can pass string, number or object to your pipe to use to filter on:
<li *ngFor="let item of items | myfilter:filterargs">
In your pipe:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myfilter',
pure: false
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], filter: Object): any {
if (!items || !filter) {
return items;
}
// filter items array, items which match and return true will be
// kept, false will be filtered out
return items.filter(item => item.title.indexOf(filter.title) !== -1);
}
}
Remember to register your pipe in app.module.ts
; you no longer need to register the pipes in your @Component
import { MyFilterPipe } from './shared/pipes/my-filter.pipe';
@NgModule({
imports: [
..
],
declarations: [
MyFilterPipe,
],
providers: [
..
],
bootstrap: [AppComponent]
})
export class AppModule { }
Here's a Plunker which demos the use of a custom filter pipe and the built-in slice pipe to limit results.
Please note (as several commentators have pointed out) that there is a reason why there are no built-in filter pipes in Angular.
Best Answer
As usual in Angular, you can rely on dependency injection:
Add
DatePipe
to your providers list in your module; if you forget to do this you'll get an errorno provider for DatePipe
:Update Angular 6: Angular 6 now offers pretty much every formatting functions used by the pipes publicly. For example, you can now use the
formatDate
function directly.Before Angular 5: Be warned though that the
DatePipe
was relying on the Intl API until version 5, which is not supported by all browsers (check the compatibility table).If you're using older Angular versions, you should add the
Intl
polyfill to your project to avoid any problem. See this related question for a more detailed answer.