From 47e0d70558a010f34bd678aca9173a72bd2bbc55 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Fri, 21 Apr 2017 20:42:37 +0200
Subject: [PATCH 1/9] #31 match arrays, at least one match between value-array
 and filter-array is required for the match. For now check entire values.

---
 .../src/app/shared/ng2-filter.pipe.spec.ts    | 34 ++++++++++++++++++-
 .../ng-cli/src/app/shared/ng2-filter.pipe.ts  | 32 ++++++++++++++---
 src/ng2-filter.pipe.spec.ts                   | 34 ++++++++++++++++++-
 src/ng2-filter.pipe.ts                        | 32 ++++++++++++++---
 4 files changed, 122 insertions(+), 10 deletions(-)

diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
index f8744099..9f34e994 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
@@ -146,7 +146,39 @@ describe('Pipe: Ng2FilterPipe', () => {
     const filter = { num: '2' };
 
     expect(pipe.transform(objects, filter)).toEqual([objects[1]]);
-  })
+  });
+
+  it('should filter array by string', () => {
+    const objects = [
+      { languages: ['English'] },
+      { languages: ['English', 'German'] },
+      { languages: ['German'] },
+      { languages: ['German', 'English'] }
+    ];
+
+    const filter = { languages: 'English' };
+
+    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+  });
+
+  it('should filter array by array', () => {
+    const objects = [
+      { languages: ['English'] },
+      { languages: ['English', 'German'] },
+      { languages: ['German'] },
+      { languages: ['German', 'English'] }
+    ];
+
+    const filter = { languages: ['English'] };
+
+    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+
+    const filter1 = { languages: ['English', 'German'] };
+    expect(pipe.transform(objects, filter1)).toEqual(objects);
+
+    const filter2 = { languages: ['German'] };
+    expect(pipe.transform(objects, filter2)).toEqual([ objects[1], objects[2], objects[3]]);
+  });
 
   // it('should filter by using $or operator', () => {
   //   const objects = [
diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
index 2969c262..1e0a579b 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
@@ -35,14 +35,16 @@ export class Ng2FilterPipe {
         }
 
         let val = this.getValue(value[key]);
-        const type = typeof filter[key];
+        const filterType = typeof filter[key];
         let isMatching;
 
-        if (type === 'boolean') {
+        if (filterType === 'boolean') {
           isMatching = this.filterByBoolean(filter[key])(val);
-        } else if (type === 'string') {
+        } else if (filterType === 'string') {
           isMatching = this.filterByString(filter[key])(val);
-        } else if (type === 'object') {
+        } else if (filter[key] instanceof Array && val instanceof Array) {
+          isMatching = this.filterByArray(filter[key])(val);
+        } else if (filterType === 'object') {
           isMatching = this.filterByObject(filter[key])(val);
         } else {
           isMatching = this.filterDefault(filter[key])(val);
@@ -57,6 +59,28 @@ export class Ng2FilterPipe {
     }
   }
 
+  /**
+   * Filter array by array
+   * Match at least one value
+   * @param filter
+   * @returns {(value:any[])=>boolean}
+   */
+  private filterByArray(filter: any[]) {
+    return (value: any[]) => {
+      let hasMatch = false;
+      const length = value.length;
+
+      for (let i = 0; i < length; i++) {
+        if (filter.indexOf(value[i]) !== -1) {
+          hasMatch = true;
+          break;
+        }
+      }
+
+      return hasMatch;
+    };
+  }
+
   /**
    * Checks function's value if type is function otherwise same value
    * @param value
diff --git a/src/ng2-filter.pipe.spec.ts b/src/ng2-filter.pipe.spec.ts
index f8744099..9f34e994 100644
--- a/src/ng2-filter.pipe.spec.ts
+++ b/src/ng2-filter.pipe.spec.ts
@@ -146,7 +146,39 @@ describe('Pipe: Ng2FilterPipe', () => {
     const filter = { num: '2' };
 
     expect(pipe.transform(objects, filter)).toEqual([objects[1]]);
-  })
+  });
+
+  it('should filter array by string', () => {
+    const objects = [
+      { languages: ['English'] },
+      { languages: ['English', 'German'] },
+      { languages: ['German'] },
+      { languages: ['German', 'English'] }
+    ];
+
+    const filter = { languages: 'English' };
+
+    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+  });
+
+  it('should filter array by array', () => {
+    const objects = [
+      { languages: ['English'] },
+      { languages: ['English', 'German'] },
+      { languages: ['German'] },
+      { languages: ['German', 'English'] }
+    ];
+
+    const filter = { languages: ['English'] };
+
+    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+
+    const filter1 = { languages: ['English', 'German'] };
+    expect(pipe.transform(objects, filter1)).toEqual(objects);
+
+    const filter2 = { languages: ['German'] };
+    expect(pipe.transform(objects, filter2)).toEqual([ objects[1], objects[2], objects[3]]);
+  });
 
   // it('should filter by using $or operator', () => {
   //   const objects = [
diff --git a/src/ng2-filter.pipe.ts b/src/ng2-filter.pipe.ts
index 2969c262..1e0a579b 100644
--- a/src/ng2-filter.pipe.ts
+++ b/src/ng2-filter.pipe.ts
@@ -35,14 +35,16 @@ export class Ng2FilterPipe {
         }
 
         let val = this.getValue(value[key]);
-        const type = typeof filter[key];
+        const filterType = typeof filter[key];
         let isMatching;
 
-        if (type === 'boolean') {
+        if (filterType === 'boolean') {
           isMatching = this.filterByBoolean(filter[key])(val);
-        } else if (type === 'string') {
+        } else if (filterType === 'string') {
           isMatching = this.filterByString(filter[key])(val);
-        } else if (type === 'object') {
+        } else if (filter[key] instanceof Array && val instanceof Array) {
+          isMatching = this.filterByArray(filter[key])(val);
+        } else if (filterType === 'object') {
           isMatching = this.filterByObject(filter[key])(val);
         } else {
           isMatching = this.filterDefault(filter[key])(val);
@@ -57,6 +59,28 @@ export class Ng2FilterPipe {
     }
   }
 
+  /**
+   * Filter array by array
+   * Match at least one value
+   * @param filter
+   * @returns {(value:any[])=>boolean}
+   */
+  private filterByArray(filter: any[]) {
+    return (value: any[]) => {
+      let hasMatch = false;
+      const length = value.length;
+
+      for (let i = 0; i < length; i++) {
+        if (filter.indexOf(value[i]) !== -1) {
+          hasMatch = true;
+          break;
+        }
+      }
+
+      return hasMatch;
+    };
+  }
+
   /**
    * Checks function's value if type is function otherwise same value
    * @param value

From cd8ef56630d9a3ca7710e0d30cf6c4f5a6800f22 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Sun, 28 May 2017 19:14:26 +0200
Subject: [PATCH 2/9] #31 #4 added $or functionality

---
 .../src/app/shared/ng2-filter.pipe.spec.ts    | 42 +++++++++----------
 .../ng-cli/src/app/shared/ng2-filter.pipe.ts  | 16 ++-----
 src/ng2-filter.pipe.spec.ts                   | 10 ++---
 3 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
index 9f34e994..eabb8c9f 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
@@ -161,7 +161,26 @@ describe('Pipe: Ng2FilterPipe', () => {
     expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
   });
 
-  it('should filter array by array', () => {
+  // it('should filter array by array', () => {
+  //   const objects = [
+  //     { languages: ['English'] },
+  //     { languages: ['English', 'German'] },
+  //     { languages: ['German'] },
+  //     { languages: ['German', 'English'] }
+  //   ];
+  //
+  //   let filter = { languages: ['English'] };
+  //
+  //   expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+  //
+  //   filter = { languages: ['English', 'German'] };
+  //   expect(pipe.transform(objects, filter)).toEqual(objects);
+  //
+  //   filter = { languages: ['German'] };
+  //   expect(pipe.transform(objects, filter)).toEqual([ objects[1], objects[2], objects[3]]);
+  // });
+
+  it('should filter by using $or operator', () => {
     const objects = [
       { languages: ['English'] },
       { languages: ['English', 'German'] },
@@ -169,25 +188,6 @@ describe('Pipe: Ng2FilterPipe', () => {
       { languages: ['German', 'English'] }
     ];
 
-    const filter = { languages: ['English'] };
-
-    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
-
-    const filter1 = { languages: ['English', 'German'] };
-    expect(pipe.transform(objects, filter1)).toEqual(objects);
-
-    const filter2 = { languages: ['German'] };
-    expect(pipe.transform(objects, filter2)).toEqual([ objects[1], objects[2], objects[3]]);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }})).toEqual(objects);
   });
-
-  // it('should filter by using $or operator', () => {
-  //   const objects = [
-  //     {
-  //       valueA: 1,
-  //       valueB: 2
-  //     }
-  //   ];
-  //
-  //   expect(pipe.transform(objects, { $or: [{ valueA: 1 }, { valueB: 2 }] })).toEqual(objects);
-  // });
 });
diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
index 1e0a579b..e108cabf 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
@@ -42,10 +42,8 @@ export class Ng2FilterPipe {
           isMatching = this.filterByBoolean(filter[key])(val);
         } else if (filterType === 'string') {
           isMatching = this.filterByString(filter[key])(val);
-        } else if (filter[key] instanceof Array && val instanceof Array) {
-          isMatching = this.filterByArray(filter[key])(val);
         } else if (filterType === 'object') {
-          isMatching = this.filterByObject(filter[key])(val);
+          isMatching = filter[key].hasOwnProperty('$or') ? this.filterByOr(filter[key])(val) : this.filterByObject(filter[key])(val);
         } else {
           isMatching = this.filterDefault(filter[key])(val);
         }
@@ -59,19 +57,13 @@ export class Ng2FilterPipe {
     }
   }
 
-  /**
-   * Filter array by array
-   * Match at least one value
-   * @param filter
-   * @returns {(value:any[])=>boolean}
-   */
-  private filterByArray(filter: any[]) {
+  private filterByOr(filter: { $or: any[] }) {
     return (value: any[]) => {
       let hasMatch = false;
-      const length = value.length;
+      const length = filter.$or.length;
 
       for (let i = 0; i < length; i++) {
-        if (filter.indexOf(value[i]) !== -1) {
+        if (value.indexOf(filter.$or[i]) !== -1) {
           hasMatch = true;
           break;
         }
diff --git a/src/ng2-filter.pipe.spec.ts b/src/ng2-filter.pipe.spec.ts
index 9f34e994..d53cfb0a 100644
--- a/src/ng2-filter.pipe.spec.ts
+++ b/src/ng2-filter.pipe.spec.ts
@@ -169,15 +169,15 @@ describe('Pipe: Ng2FilterPipe', () => {
       { languages: ['German', 'English'] }
     ];
 
-    const filter = { languages: ['English'] };
+    let filter = { languages: ['English'] };
 
     expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
 
-    const filter1 = { languages: ['English', 'German'] };
-    expect(pipe.transform(objects, filter1)).toEqual(objects);
+    filter = { languages: ['English', 'German'] };
+    expect(pipe.transform(objects, filter)).toEqual(objects);
 
-    const filter2 = { languages: ['German'] };
-    expect(pipe.transform(objects, filter2)).toEqual([ objects[1], objects[2], objects[3]]);
+    filter = { languages: ['German'] };
+    expect(pipe.transform(objects, filter)).toEqual([ objects[1], objects[2], objects[3]]);
   });
 
   // it('should filter by using $or operator', () => {

From f893c7b077c0f781e8332c10b951e44b459eaa01 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Mon, 29 May 2017 22:38:26 +0200
Subject: [PATCH 3/9] #31 #4 further development

---
 .../src/app/shared/ng2-filter.pipe.spec.ts     | 18 +++++++++++++++++-
 .../ng-cli/src/app/shared/ng2-filter.pipe.ts   | 13 +++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
index eabb8c9f..330d56b0 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
@@ -180,7 +180,7 @@ describe('Pipe: Ng2FilterPipe', () => {
   //   expect(pipe.transform(objects, filter)).toEqual([ objects[1], objects[2], objects[3]]);
   // });
 
-  it('should filter by using $or operator', () => {
+  it('should filter array by using $or operator', () => {
     const objects = [
       { languages: ['English'] },
       { languages: ['English', 'German'] },
@@ -190,4 +190,20 @@ describe('Pipe: Ng2FilterPipe', () => {
 
     expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }})).toEqual(objects);
   });
+
+  it('should filter string by using $or operator', () => {
+    const objects = [
+      { languages: 'English' },
+      { languages: 'German' }
+    ];
+
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }})).toEqual(objects);
+    expect(pipe.transform(objects, { languages: { $or: ['English'] }})).toEqual([objects[0]]);
+    expect(pipe.transform(objects, { languages: { $or: ['asd'] }})).toEqual([]);
+  });
+
+  // it('should filter array of string by using $or operator', () => {
+  //   const objects = [ 'English', 'German' ];
+  //   expect(pipe.transform(objects, { $or: ['English'] })).toEqual([objects[0]]);
+  // });
 });
diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
index e108cabf..fb21d424 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
@@ -58,12 +58,21 @@ export class Ng2FilterPipe {
   }
 
   private filterByOr(filter: { $or: any[] }) {
-    return (value: any[]) => {
+    return (value: any) => {
       let hasMatch = false;
       const length = filter.$or.length;
+      const isArray = value instanceof Array;
+
+      const arrayComparison = (i) => {
+        return value.indexOf(filter.$or[i]) !== -1;
+      };
+      const otherComparison = (i) => {
+        return value === filter.$or[i];
+      };
+      const comparison = isArray ? arrayComparison : otherComparison;
 
       for (let i = 0; i < length; i++) {
-        if (value.indexOf(filter.$or[i]) !== -1) {
+        if (comparison(i)) {
           hasMatch = true;
           break;
         }

From 574020f25cf8bafd3fda14f26f97a163a257cf54 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Tue, 30 May 2017 23:24:40 +0200
Subject: [PATCH 4/9] #4 #31 finished first implementation

---
 .../src/app/shared/ng2-filter.pipe.spec.ts    | 39 ++++++++-----------
 .../ng-cli/src/app/shared/ng2-filter.pipe.ts  | 17 +++++---
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
index 330d56b0..4981907d 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.spec.ts
@@ -161,25 +161,6 @@ describe('Pipe: Ng2FilterPipe', () => {
     expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
   });
 
-  // it('should filter array by array', () => {
-  //   const objects = [
-  //     { languages: ['English'] },
-  //     { languages: ['English', 'German'] },
-  //     { languages: ['German'] },
-  //     { languages: ['German', 'English'] }
-  //   ];
-  //
-  //   let filter = { languages: ['English'] };
-  //
-  //   expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
-  //
-  //   filter = { languages: ['English', 'German'] };
-  //   expect(pipe.transform(objects, filter)).toEqual(objects);
-  //
-  //   filter = { languages: ['German'] };
-  //   expect(pipe.transform(objects, filter)).toEqual([ objects[1], objects[2], objects[3]]);
-  // });
-
   it('should filter array by using $or operator', () => {
     const objects = [
       { languages: ['English'] },
@@ -202,8 +183,20 @@ describe('Pipe: Ng2FilterPipe', () => {
     expect(pipe.transform(objects, { languages: { $or: ['asd'] }})).toEqual([]);
   });
 
-  // it('should filter array of string by using $or operator', () => {
-  //   const objects = [ 'English', 'German' ];
-  //   expect(pipe.transform(objects, { $or: ['English'] })).toEqual([objects[0]]);
-  // });
+  it('should filter array of string by using $or operator', () => {
+    const objects = [ 'English', 'German' ];
+    expect(pipe.transform(objects, { $or: ['English'] })).toEqual([objects[0]]);
+  });
+
+  it('should filter by using $or operator and another field', () => {
+    const objects = [
+      { languages: ['English', 'German'], age: 30 },
+      { languages: 'German', age: 27 }
+    ];
+
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 27 })).toEqual([objects[1]]);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 30 })).toEqual([objects[0]]);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 31 })).toEqual([]);
+    expect(pipe.transform(objects, { languages: { $or: ['English'] }, age: 27 })).toEqual([]);
+  });
 });
diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
index fb21d424..f7dd07bb 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
@@ -30,6 +30,13 @@ export class Ng2FilterPipe {
     return value => {
       for (let key in filter) {
 
+        if (key === '$or') {
+          if (!this.filterByOr(filter.$or)(this.getValue(value))) {
+            return false;
+          }
+          continue;
+        }
+
         if (!value.hasOwnProperty(key) && !Object.getOwnPropertyDescriptor(Object.getPrototypeOf(value), key)) {
           return false;
         }
@@ -43,7 +50,7 @@ export class Ng2FilterPipe {
         } else if (filterType === 'string') {
           isMatching = this.filterByString(filter[key])(val);
         } else if (filterType === 'object') {
-          isMatching = filter[key].hasOwnProperty('$or') ? this.filterByOr(filter[key])(val) : this.filterByObject(filter[key])(val);
+          isMatching = this.filterByObject(filter[key])(val);
         } else {
           isMatching = this.filterDefault(filter[key])(val);
         }
@@ -57,17 +64,17 @@ export class Ng2FilterPipe {
     }
   }
 
-  private filterByOr(filter: { $or: any[] }) {
+  private filterByOr(filter: any[]) {
     return (value: any) => {
       let hasMatch = false;
-      const length = filter.$or.length;
+      const length = filter.length;
       const isArray = value instanceof Array;
 
       const arrayComparison = (i) => {
-        return value.indexOf(filter.$or[i]) !== -1;
+        return value.indexOf(filter[i]) !== -1;
       };
       const otherComparison = (i) => {
-        return value === filter.$or[i];
+        return value === filter[i];
       };
       const comparison = isArray ? arrayComparison : otherComparison;
 

From ec4e1437b7cf6a76e52f175076588b55506ae409 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Wed, 31 May 2017 13:08:36 +0200
Subject: [PATCH 5/9] update ng-cli and project

---
 .../{angular-cli.json => .angular-cli.json}   | 38 ++++-----
 examples/ng-cli/.gitignore                    | 15 +++-
 examples/ng-cli/README.md                     | 11 +--
 examples/ng-cli/e2e/app.e2e-spec.ts           |  2 +-
 examples/ng-cli/e2e/tsconfig.e2e.json         | 12 +++
 examples/ng-cli/karma.conf.js                 | 35 ++++----
 examples/ng-cli/package.json                  | 69 ++++++++-------
 examples/ng-cli/protractor.conf.js            | 12 ++-
 examples/ng-cli/src/app/app.component.spec.ts | 21 +++--
 examples/ng-cli/src/app/app.module.ts         |  8 +-
 examples/ng-cli/src/app/index.ts              |  2 -
 .../ng-cli/src/environments/environment.ts    |  2 +-
 examples/ng-cli/src/index.html                |  2 +-
 examples/ng-cli/src/main.ts                   |  7 +-
 examples/ng-cli/src/polyfills.ts              | 83 +++++++++++++++----
 examples/ng-cli/src/styles.scss               |  1 +
 examples/ng-cli/src/test.ts                   |  4 +-
 examples/ng-cli/src/tsconfig.app.json         | 13 +++
 examples/ng-cli/src/tsconfig.json             | 18 ----
 examples/ng-cli/src/tsconfig.spec.json        | 20 +++++
 examples/ng-cli/src/typings.d.ts              |  7 +-
 examples/ng-cli/{e2e => }/tsconfig.json       | 14 ++--
 examples/ng-cli/tslint.json                   | 24 +++---
 23 files changed, 247 insertions(+), 173 deletions(-)
 rename examples/ng-cli/{angular-cli.json => .angular-cli.json} (59%)
 create mode 100644 examples/ng-cli/e2e/tsconfig.e2e.json
 delete mode 100644 examples/ng-cli/src/app/index.ts
 create mode 100644 examples/ng-cli/src/tsconfig.app.json
 delete mode 100644 examples/ng-cli/src/tsconfig.json
 create mode 100644 examples/ng-cli/src/tsconfig.spec.json
 rename examples/ng-cli/{e2e => }/tsconfig.json (66%)

diff --git a/examples/ng-cli/angular-cli.json b/examples/ng-cli/.angular-cli.json
similarity index 59%
rename from examples/ng-cli/angular-cli.json
rename to examples/ng-cli/.angular-cli.json
index 703fca65..00ff22fa 100644
--- a/examples/ng-cli/angular-cli.json
+++ b/examples/ng-cli/.angular-cli.json
@@ -1,6 +1,6 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.21",
     "name": "ng-cli"
   },
   "apps": [
@@ -13,47 +13,45 @@
       ],
       "index": "index.html",
       "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "mobile": false,
       "styles": [
         "styles.scss"
       ],
       "scripts": [],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
     }
   },
   "defaults": {
-    "styleExt": "scss",
-    "prefixInterfaces": false,
-    "inline": {
-      "style": false,
-      "template": false
-    },
-    "spec": {
-      "class": false,
-      "component": true,
-      "directive": true,
-      "module": false,
-      "pipe": true,
-      "service": true
-    }
+    "styleExt": "css",
+    "component": {}
   }
 }
diff --git a/examples/ng-cli/.gitignore b/examples/ng-cli/.gitignore
index ce200cb5..54bfd200 100644
--- a/examples/ng-cli/.gitignore
+++ b/examples/ng-cli/.gitignore
@@ -3,24 +3,31 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules
-/bower_components
 
 # IDEs and editors
 /.idea
-/.vscode
 .project
 .classpath
 .c9/
 *.launch
 .settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
 testem.log
@@ -30,6 +37,6 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db
diff --git a/examples/ng-cli/README.md b/examples/ng-cli/README.md
index 29520ab3..701526c7 100644
--- a/examples/ng-cli/README.md
+++ b/examples/ng-cli/README.md
@@ -1,13 +1,14 @@
 # NgCli
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.21.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
 
 ## Development server
+
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
 
 ## Build
 
@@ -22,10 +23,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
 
-## Deploying to Github Pages
-
-Run `ng github-pages:deploy` to deploy to Github Pages.
-
 ## Further help
 
-To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/examples/ng-cli/e2e/app.e2e-spec.ts b/examples/ng-cli/e2e/app.e2e-spec.ts
index 37f31f5f..bd31a38b 100644
--- a/examples/ng-cli/e2e/app.e2e-spec.ts
+++ b/examples/ng-cli/e2e/app.e2e-spec.ts
@@ -1,6 +1,6 @@
 import { NgCliPage } from './app.po';
 
-describe('ng-cli App', function() {
+describe('ng-cli App', () => {
   let page: NgCliPage;
 
   beforeEach(() => {
diff --git a/examples/ng-cli/e2e/tsconfig.e2e.json b/examples/ng-cli/e2e/tsconfig.e2e.json
new file mode 100644
index 00000000..ac7a3732
--- /dev/null
+++ b/examples/ng-cli/e2e/tsconfig.e2e.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}
diff --git a/examples/ng-cli/karma.conf.js b/examples/ng-cli/karma.conf.js
index c7a2381d..84b4cd5a 100644
--- a/examples/ng-cli/karma.conf.js
+++ b/examples/ng-cli/karma.conf.js
@@ -4,46 +4,41 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
     files: [
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'karma-remap-istanbul']
-              : ['progress'],
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: [ process.env.TRAVIS ? 'Chrome_travis_ci' : 'Chrome'],
-    singleRun: false,
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    }
+    browsers: ['Chrome'],
+    singleRun: false
   });
 };
diff --git a/examples/ng-cli/package.json b/examples/ng-cli/package.json
index 3522a7ba..77c3cc64 100644
--- a/examples/ng-cli/package.json
+++ b/examples/ng-cli/package.json
@@ -2,51 +2,48 @@
   "name": "ng2-filter-pipe-example",
   "version": "0.0.4",
   "license": "MIT",
-  "angular-cli": {},
   "scripts": {
+    "ng": "ng",
     "start": "ng serve",
-    "lint": "tslint \"src/**/*.ts\"",
-    "test": "ng test --watch=false",
-    "pree2e": "webdriver-manager update",
-    "e2e": "protractor",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
     "gh-pages": "ngh --message=\"update\" --dir ./dist"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "2.3.1",
-    "@angular/compiler": "2.3.1",
-    "@angular/core": "2.3.1",
-    "@angular/forms": "2.3.1",
-    "@angular/http": "2.3.1",
-    "@angular/platform-browser": "2.3.1",
-    "@angular/platform-browser-dynamic": "2.3.1",
-    "@angular/router": "3.2.1",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "angular-cli-ghpages": "^0.5.1",
     "core-js": "^2.4.1",
-    "material-design-lite": "^1.2.1",
-    "ng2-filter-pipe": "0.1.0",
-    "rxjs": "5.0.0-beta.12",
-    "ts-helpers": "^1.1.1",
-    "zone.js": "^0.6.23"
+    "material-design-lite": "^1.3.0",
+    "rxjs": "^5.1.0",
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "2.3.1",
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.42",
-    "angular-cli": "1.0.0-beta.21",
-    "angular-cli-ghpages": "^0.4.1",
-    "codelyzer": "~1.0.0-beta.3",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.5.0",
-    "karma": "1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.0.2",
-    "karma-remap-istanbul": "^0.2.1",
-    "protractor": "4.0.9",
-    "ts-node": "1.2.1",
-    "tslint": "3.13.0",
-    "typescript": "~2.0.3",
-    "typings": "^2.0.0",
-    "webdriver-manager": "10.2.5"
+    "@types/node": "~6.0.60",
+    "codelyzer": "~2.0.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.4.1",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "protractor": "~5.1.0",
+    "ts-node": "~2.0.0",
+    "tslint": "~4.5.0",
+    "typescript": "~2.2.0"
   }
 }
diff --git a/examples/ng-cli/protractor.conf.js b/examples/ng-cli/protractor.conf.js
index 169743b3..1c5e1e5a 100644
--- a/examples/ng-cli/protractor.conf.js
+++ b/examples/ng-cli/protractor.conf.js
@@ -1,8 +1,7 @@
 // Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+// https://github.com/angular/protractor/blob/master/lib/config.ts
 
-/*global jasmine */
-var SpecReporter = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
@@ -20,13 +19,12 @@ exports.config = {
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  useAllAngular2AppRoots: true,
   beforeLaunch: function() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
   },
-  onPrepare: function() {
-    jasmine.getEnv().addReporter(new SpecReporter());
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };
diff --git a/examples/ng-cli/src/app/app.component.spec.ts b/examples/ng-cli/src/app/app.component.spec.ts
index 0dc7cf27..04d14445 100644
--- a/examples/ng-cli/src/app/app.component.spec.ts
+++ b/examples/ng-cli/src/app/app.component.spec.ts
@@ -1,33 +1,32 @@
-/* tslint:disable:no-unused-variable */
-
 // import { TestBed, async } from '@angular/core/testing';
+//
 // import { AppComponent } from './app.component';
 //
 // describe('AppComponent', () => {
-//   beforeEach(() => {
+//   beforeEach(async(() => {
 //     TestBed.configureTestingModule({
 //       declarations: [
 //         AppComponent
 //       ],
-//     });
-//   });
+//     }).compileComponents();
+//   }));
 //
 //   it('should create the app', async(() => {
-//     let fixture = TestBed.createComponent(AppComponent);
-//     let app = fixture.debugElement.componentInstance;
+//     const fixture = TestBed.createComponent(AppComponent);
+//     const app = fixture.debugElement.componentInstance;
 //     expect(app).toBeTruthy();
 //   }));
 //
 //   it(`should have as title 'app works!'`, async(() => {
-//     let fixture = TestBed.createComponent(AppComponent);
-//     let app = fixture.debugElement.componentInstance;
+//     const fixture = TestBed.createComponent(AppComponent);
+//     const app = fixture.debugElement.componentInstance;
 //     expect(app.title).toEqual('app works!');
 //   }));
 //
 //   it('should render title in a h1 tag', async(() => {
-//     let fixture = TestBed.createComponent(AppComponent);
+//     const fixture = TestBed.createComponent(AppComponent);
 //     fixture.detectChanges();
-//     let compiled = fixture.debugElement.nativeElement;
+//     const compiled = fixture.debugElement.nativeElement;
 //     expect(compiled.querySelector('h1').textContent).toContain('app works!');
 //   }));
 // });
diff --git a/examples/ng-cli/src/app/app.module.ts b/examples/ng-cli/src/app/app.module.ts
index 4bd86722..5fabdc99 100644
--- a/examples/ng-cli/src/app/app.module.ts
+++ b/examples/ng-cli/src/app/app.module.ts
@@ -8,16 +8,16 @@ import { AppComponent } from './app.component';
 import { Ng2FilterPipeModule } from './shared/ng2-filter.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    // Ng2FilterPipe
-  ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     Ng2FilterPipeModule
   ],
+  declarations: [
+    AppComponent,
+    // Ng2FilterPipe
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/examples/ng-cli/src/app/index.ts b/examples/ng-cli/src/app/index.ts
deleted file mode 100644
index 875bdb2f..00000000
--- a/examples/ng-cli/src/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './app.component';
-export * from './app.module';
diff --git a/examples/ng-cli/src/environments/environment.ts b/examples/ng-cli/src/environments/environment.ts
index 00313f16..b7f639ae 100644
--- a/examples/ng-cli/src/environments/environment.ts
+++ b/examples/ng-cli/src/environments/environment.ts
@@ -1,7 +1,7 @@
 // The file contents for the current environment will overwrite these during build.
 // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `angular-cli.json`.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
   production: false
diff --git a/examples/ng-cli/src/index.html b/examples/ng-cli/src/index.html
index 39d4b798..bfb768dc 100644
--- a/examples/ng-cli/src/index.html
+++ b/examples/ng-cli/src/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Ng2-filter-pipe</title>
+  <title>NgCli</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/examples/ng-cli/src/main.ts b/examples/ng-cli/src/main.ts
index 5c3c5204..a9ca1caf 100644
--- a/examples/ng-cli/src/main.ts
+++ b/examples/ng-cli/src/main.ts
@@ -1,9 +1,8 @@
-import './polyfills.ts';
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-import { AppModule } from './app/';
 
 if (environment.production) {
   enableProdMode();
diff --git a/examples/ng-cli/src/polyfills.ts b/examples/ng-cli/src/polyfills.ts
index 4392cb7c..aa5e6cde 100644
--- a/examples/ng-cli/src/polyfills.ts
+++ b/examples/ng-cli/src/polyfills.ts
@@ -1,21 +1,70 @@
-// This file includes polyfills needed by Angular 2 and is loaded before
-// the app. You can add your own extra polyfills to this file.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/reflect';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
 
 import './../node_modules/material-design-lite';
\ No newline at end of file
diff --git a/examples/ng-cli/src/styles.scss b/examples/ng-cli/src/styles.scss
index 392aed91..9b709b96 100644
--- a/examples/ng-cli/src/styles.scss
+++ b/examples/ng-cli/src/styles.scss
@@ -1 +1,2 @@
+/* You can add global styles to this file, and also import other style files */
 @import "./../node_modules/material-design-lite/dist/material.teal-indigo.min.css";
\ No newline at end of file
diff --git a/examples/ng-cli/src/test.ts b/examples/ng-cli/src/test.ts
index 81af8909..9bf72267 100644
--- a/examples/ng-cli/src/test.ts
+++ b/examples/ng-cli/src/test.ts
@@ -1,4 +1,4 @@
-import './polyfills.ts';
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/proxy.js';
@@ -25,7 +25,7 @@ getTestBed().initTestEnvironment(
   platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
-let context = require.context('./', true, /\.spec\.ts/);
+const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
 // Finally, start Karma to run the tests.
diff --git a/examples/ng-cli/src/tsconfig.app.json b/examples/ng-cli/src/tsconfig.app.json
new file mode 100644
index 00000000..5e2507db
--- /dev/null
+++ b/examples/ng-cli/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/examples/ng-cli/src/tsconfig.json b/examples/ng-cli/src/tsconfig.json
deleted file mode 100644
index 1cf713a3..00000000
--- a/examples/ng-cli/src/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "",
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "mapRoot": "./",
-    "module": "es6",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
-    "sourceMap": true,
-    "target": "es5",
-    "typeRoots": [
-      "../node_modules/@types"
-    ]
-  }
-}
diff --git a/examples/ng-cli/src/tsconfig.spec.json b/examples/ng-cli/src/tsconfig.spec.json
new file mode 100644
index 00000000..510e3f1f
--- /dev/null
+++ b/examples/ng-cli/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/examples/ng-cli/src/typings.d.ts b/examples/ng-cli/src/typings.d.ts
index ea52695a..ef5c7bd6 100644
--- a/examples/ng-cli/src/typings.d.ts
+++ b/examples/ng-cli/src/typings.d.ts
@@ -1,2 +1,5 @@
-// Typings reference file, you can add your own global typings here
-// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
diff --git a/examples/ng-cli/e2e/tsconfig.json b/examples/ng-cli/tsconfig.json
similarity index 66%
rename from examples/ng-cli/e2e/tsconfig.json
rename to examples/ng-cli/tsconfig.json
index 656bdb14..a35a8ee3 100644
--- a/examples/ng-cli/e2e/tsconfig.json
+++ b/examples/ng-cli/tsconfig.json
@@ -1,16 +1,20 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
     "target": "es5",
     "typeRoots": [
-      "../node_modules/@types"
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
     ]
   }
 }
diff --git a/examples/ng-cli/tslint.json b/examples/ng-cli/tslint.json
index ad0093e9..9113f136 100644
--- a/examples/ng-cli/tslint.json
+++ b/examples/ng-cli/tslint.json
@@ -3,6 +3,7 @@
     "node_modules/codelyzer"
   ],
   "rules": {
+    "callable-types": true,
     "class-name": true,
     "comment-format": [
       true,
@@ -11,12 +12,14 @@
     "curly": true,
     "eofline": true,
     "forin": true,
+    "import-blacklist": [true, "rxjs"],
+    "import-spacing": true,
     "indent": [
       true,
       "spaces"
     ],
+    "interface-over-type-literal": true,
     "label-position": true,
-    "label-undefined": true,
     "max-line-length": [
       true,
       140
@@ -39,18 +42,17 @@
     ],
     "no-construct": true,
     "no-debugger": true,
-    "no-duplicate-key": true,
     "no-duplicate-variable": true,
     "no-empty": false,
+    "no-empty-interface": true,
     "no-eval": true,
-    "no-inferrable-types": true,
+    "no-inferrable-types": [true, "ignore-params"],
     "no-shadowed-variable": true,
     "no-string-literal": false,
+    "no-string-throw": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
     "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-unreachable": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
@@ -61,6 +63,7 @@
       "check-else",
       "check-whitespace"
     ],
+    "prefer-const": true,
     "quotemark": [
       true,
       "single"
@@ -83,6 +86,8 @@
         "variable-declaration": "nospace"
       }
     ],
+    "typeof-compare": true,
+    "unified-signatures": true,
     "variable-name": false,
     "whitespace": [
       true,
@@ -93,12 +98,8 @@
       "check-type"
     ],
 
-    "directive-selector-prefix": [true, "app"],
-    "component-selector-prefix": [true, "app"],
-    "directive-selector-name": [true, "camelCase"],
-    "component-selector-name": [true, "kebab-case"],
-    "directive-selector-type": [true, "attribute"],
-    "component-selector-type": [true, "element"],
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,
@@ -108,6 +109,7 @@
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true,
+    "no-access-missing-member": true,
     "templates-use-public": true,
     "invoke-injectable": true
   }

From 902d7b683c4d116879b3330d0109bf3d3ccb395c Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Wed, 31 May 2017 13:26:30 +0200
Subject: [PATCH 6/9] added $or description

---
 README.md | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/README.md b/README.md
index 7038abe6..aaaceb16 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,63 @@ export class AppComponent {
 }
 ```
 
+### $or matching
+Use `$or` to filter by more then one values.
+
+`$or` expects an `Array`.
+
+In your component:
+```ts
+// your array
+const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];
+// your $or filter
+const filter = { $or: ['German', 'English'] };
+```
+
+In your template:
+```html
+<div *ngFor="let language of languages | filterBy: filter">
+  {{ language }}
+</div>
+```
+
+Result:
+```html
+<div>English</div>
+<div>German</div>
+```
+
+#### $or example with nessted values
+In your component:
+```ts
+// your array
+const languages = [
+  { language: 'English' },
+  { language: 'German' },
+  { language: 'Italian' }
+];
+
+// your $or filter
+const filter = {
+  language: {
+    $or: ['Italian', 'English']
+  }
+};
+```
+
+In your template:
+```html
+<div *ngFor="let object of languages | filterBy: filter">
+  {{ object.language }}
+</div>
+```
+
+Result:
+```html
+<div>English</div>
+<div>Italian</div>
+```
+
 ## Test
 
 Run tests

From bbe0ee08a1e1fdc0c4872ab8c706ec55cc7fcd17 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Thu, 1 Jun 2017 12:27:19 +0200
Subject: [PATCH 7/9] updated changelog and version

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2ef221a..fd82814e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.10
+* [[#31](https://github.com/VadimDez/ng2-filter-pipe/issues/31)] - How to filter by two variables of the same array.
+* [[#4](https://github.com/VadimDez/ng2-filter-pipe/issues/4)] - Add $or operator.
+
 ## 0.1.8
 * Removed warning in Angular 4+
 
diff --git a/package.json b/package.json
index 24c60ab3..21c83292 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-filter-pipe",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "author": "Vadym Yatsyuk <vadym.yatsyuk@gmail.com>",
   "license": "MIT",
   "angular-cli": {},

From 0b024a9cbf85b87376f0389bee713c96b19f669d Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Thu, 1 Jun 2017 12:39:37 +0200
Subject: [PATCH 8/9] updated src

---
 .../ng-cli/src/app/shared/ng2-filter.pipe.ts  |  6 +++
 src/ng2-filter.pipe.spec.ts                   | 43 +++++++++++--------
 src/ng2-filter.pipe.ts                        | 32 ++++++++++----
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
index 3ffeb009..60e7afef 100644
--- a/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
+++ b/examples/ng-cli/src/app/shared/ng2-filter.pipe.ts
@@ -64,6 +64,12 @@ export class Ng2FilterPipe {
     }
   }
 
+  /**
+   * Filter value by $or
+   *
+   * @param filter
+   * @returns {(value:any)=>boolean}
+   */
   private filterByOr(filter: any[]) {
     return (value: any) => {
       let hasMatch = false;
diff --git a/src/ng2-filter.pipe.spec.ts b/src/ng2-filter.pipe.spec.ts
index 45c62e12..a7faa952 100644
--- a/src/ng2-filter.pipe.spec.ts
+++ b/src/ng2-filter.pipe.spec.ts
@@ -186,7 +186,7 @@ describe('Pipe: Ng2FilterPipe', () => {
     expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
   });
 
-  it('should filter array by array', () => {
+  it('should filter array by using $or operator', () => {
     const objects = [
       { languages: ['English'] },
       { languages: ['English', 'German'] },
@@ -194,25 +194,34 @@ describe('Pipe: Ng2FilterPipe', () => {
       { languages: ['German', 'English'] }
     ];
 
-    let filter = { languages: ['English'] };
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }})).toEqual(objects);
+  });
 
-    expect(pipe.transform(objects, filter)).toEqual([objects[0], objects[1], objects[3]]);
+  it('should filter string by using $or operator', () => {
+    const objects = [
+      { languages: 'English' },
+      { languages: 'German' }
+    ];
 
-    filter = { languages: ['English', 'German'] };
-    expect(pipe.transform(objects, filter)).toEqual(objects);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }})).toEqual(objects);
+    expect(pipe.transform(objects, { languages: { $or: ['English'] }})).toEqual([objects[0]]);
+    expect(pipe.transform(objects, { languages: { $or: ['asd'] }})).toEqual([]);
+  });
 
-    filter = { languages: ['German'] };
-    expect(pipe.transform(objects, filter)).toEqual([ objects[1], objects[2], objects[3]]);
+  it('should filter array of string by using $or operator', () => {
+    const objects = [ 'English', 'German' ];
+    expect(pipe.transform(objects, { $or: ['English'] })).toEqual([objects[0]]);
   });
 
-  // it('should filter by using $or operator', () => {
-  //   const objects = [
-  //     {
-  //       valueA: 1,
-  //       valueB: 2
-  //     }
-  //   ];
-  //
-  //   expect(pipe.transform(objects, { $or: [{ valueA: 1 }, { valueB: 2 }] })).toEqual(objects);
-  // });
+  it('should filter by using $or operator and another field', () => {
+    const objects = [
+      { languages: ['English', 'German'], age: 30 },
+      { languages: 'German', age: 27 }
+    ];
+
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 27 })).toEqual([objects[1]]);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 30 })).toEqual([objects[0]]);
+    expect(pipe.transform(objects, { languages: { $or: ['English', 'German'] }, age: 31 })).toEqual([]);
+    expect(pipe.transform(objects, { languages: { $or: ['English'] }, age: 27 })).toEqual([]);
+  });
 });
diff --git a/src/ng2-filter.pipe.ts b/src/ng2-filter.pipe.ts
index dc35ff51..60e7afef 100644
--- a/src/ng2-filter.pipe.ts
+++ b/src/ng2-filter.pipe.ts
@@ -30,6 +30,13 @@ export class Ng2FilterPipe {
     return value => {
       for (let key in filter) {
 
+        if (key === '$or') {
+          if (!this.filterByOr(filter.$or)(this.getValue(value))) {
+            return false;
+          }
+          continue;
+        }
+
         if (!value.hasOwnProperty(key) && !Object.getOwnPropertyDescriptor(Object.getPrototypeOf(value), key)) {
           return false;
         }
@@ -42,8 +49,6 @@ export class Ng2FilterPipe {
           isMatching = this.filterByBoolean(filter[key])(val);
         } else if (filterType === 'string') {
           isMatching = this.filterByString(filter[key])(val);
-        } else if (filter[key] instanceof Array && val instanceof Array) {
-          isMatching = this.filterByArray(filter[key])(val);
         } else if (filterType === 'object') {
           isMatching = this.filterByObject(filter[key])(val);
         } else {
@@ -60,18 +65,27 @@ export class Ng2FilterPipe {
   }
 
   /**
-   * Filter array by array
-   * Match at least one value
+   * Filter value by $or
+   *
    * @param filter
-   * @returns {(value:any[])=>boolean}
+   * @returns {(value:any)=>boolean}
    */
-  private filterByArray(filter: any[]) {
-    return (value: any[]) => {
+  private filterByOr(filter: any[]) {
+    return (value: any) => {
       let hasMatch = false;
-      const length = value.length;
+      const length = filter.length;
+      const isArray = value instanceof Array;
+
+      const arrayComparison = (i) => {
+        return value.indexOf(filter[i]) !== -1;
+      };
+      const otherComparison = (i) => {
+        return value === filter[i];
+      };
+      const comparison = isArray ? arrayComparison : otherComparison;
 
       for (let i = 0; i < length; i++) {
-        if (filter.indexOf(value[i]) !== -1) {
+        if (comparison(i)) {
           hasMatch = true;
           break;
         }

From d4fe73249f1dd2c856037b7a0eaf3fc385c03556 Mon Sep 17 00:00:00 2001
From: Vadym Yatsyuk <vadym.yatsyuk@gmail.com>
Date: Thu, 1 Jun 2017 12:44:06 +0200
Subject: [PATCH 9/9] fix for failing tests

---
 examples/ng-cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/ng-cli/package.json b/examples/ng-cli/package.json
index 77c3cc64..bd73fbbc 100644
--- a/examples/ng-cli/package.json
+++ b/examples/ng-cli/package.json
@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "test": "ng test --watch=false",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "gh-pages": "ngh --message=\"update\" --dir ./dist"