<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>Angular Filter Pipe</title>
<!-- Angular Filter Pipe -->
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
Angular Filter Pipe
</my-app>
<div style="position: absolute; bottom: 10px; left: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://github.com/joejordanbrown" target="_blank">GitHub</a>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://uixd.co.uk" target="_blank">Created by UIXD</a>
</div>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, OnInit, ChangeDetectorRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HttpModule } from '@angular/http';
import {FormsModule} from '@angular/forms';
import { FilterByPipe } from './filter.pipe';
import { OperationService } from './operation.service';
@Component({
selector: 'my-app',
template: `
<h1>Angular Filter Pipe</h1>
<div id="search-box-div">
<div id="search-field" class="top-div">
<input #input type="text" placeholder="Filter" [(ngModel)]="search">
</div>
</div>
<ul>
<!-- generate list, name only -->
<div *ngIf="operationCatalogue">
<li *ngFor='let operation of operationCatalogue | filterBy: {name: search}'>
<label>{{operation?.name}}</label>
</li>
</div>
</ul>`
})
export class App implements OnInit {
operationCatalogue: [];
search: = "";
constructor(private ref: ChangeDetectorRef, private operationService: OperationService) { }
ngOnInit() {
setTimeout(() => {
this.operationCatalogue = this.operationService.getOperations();
this.ref.markForCheck();
}, 300);
}
}
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule ],
declarations: [ App, FilterByPipe ],
providers: [ OperationService ],
bootstrap: [ App ]
})
export class AppModule {}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
private filterByString(filter) {
filter = filter.toLowerCase();
return value => {
return !filter || value.toLowerCase().indexOf(filter) !== -1;
}
}
private filterByObject(filter) {
return value => {
for (let key in filter) {
if (!value.hasOwnProperty(key)) {
return false;
}
const type = typeof value[key];
let isMatching;
if (type === 'string') {
isMatching = this.filterByString(filter[key])(value[key]);
} else if (type === 'object') {
isMatching = this.filterByObject(filter[key])(value[key]);
} else {
isMatching = this.filterDefault(filter[key])(value[key]);
}
if (!isMatching) {
return false;
}
}
return true;
}
}
/**
* Defatul filterDefault function
*
* @param filter
* @returns {(value:any)=>boolean}
*/
private filterDefault(filter) {
return value => {
return !filter || filter == value;
}
}
private isNumber(value) {
return !isNaN(parseInt(value, 10)) && isFinite(value);
}
transform(array: any[], filter: any): any {
const type = typeof filter;
if (type === 'string') {
if (this.isNumber(filter)) {
return array.filter(this.filterDefault(filter));
}
return array.filter(this.filterByString(filter));
}
if (type === 'object') {
return array.filter(this.filterByObject(filter));
}
return array.filter(this.filterDefault(filter));
}
}
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';
export class Operation {
constructor(public name : string, public description : string){}
}
@Injectable()
export class OperationService {
private operationCatalogue: Operation[] = [];
private url = './src/data.json';
constructor(private http:Http) {
this.init();
}
init(){
this.fetchOperations().subscribe(res => {
var i;
for(i in res["operations"]){
this.operationCatalogue[i] = new Operation(res["operations"][i]["name"], res["operations"][i]["description"]);
}
});
}
getOperations(){
console.log(this.operationCatalogue);
return this.operationCatalogue;
}
fetchOperations(): Observable<Operation[]>{
return this.http.get(this.url).map(res => res.json());
}
}
{
"operations":[
{
"name": "Variable",
"description": "test description"
},
{
"name": "RunQtScript",
"description": "test description"
},
{
"name": "StringListBuilder",
"description": "test description"
},
{
"name": "Workspace",
"description": "test description"
},
{
"name": "WorkspaceInput",
"description": "test description"
},
{
"name": "WorkspaceOutput",
"description": "test description"
}
]
}