added filter search

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { DataService } from './services/data.service';
 import { SwatchComponent } from './swatch/swatch.component';
 import { FilterComponent } from './filter/filter.component';
 import { IntroComponent } from './intro/intro.component';
+import { FilterPipe } from './filter.pipe';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -17,11 +19,13 @@ import { IntroComponent } from './intro/intro.component';
     ColorListComponent,
     SwatchComponent,
     FilterComponent,
-    IntroComponent
+    IntroComponent,
+    FilterPipe
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [DataService],
   bootstrap: [AppComponent]

src/app/color-list/color-list.component.html

@@ -1,5 +1,7 @@
 
-<div style="margin-bottom: 20px;" *ngFor ="let item of list">
+<input class="form-control form-control-lg" type="text" placeholder="Search causes" aria-label=".form-control-lg example" [(ngModel)]="filterBy">
+
+<div style="margin-bottom: 20px;" *ngFor ="let item of list | filter: filterBy:'cause'">
     <app-swatch [colorData]="item.colorData"></app-swatch>
     <app-color-card [cause]="item.cause" [displayName]="item.colorData.displayName"></app-color-card>
 </div>

src/app/color-list/color-list.component.ts

@@ -19,6 +19,7 @@ interface colorShapeo {
 
 export class ColorListComponent implements OnInit {
   list: any[] = [];
+  filterBy: any;
 
 
   constructor(private data: DataService) { }

src/app/filter.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/filter.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(value: any[], filterString: string, property: string) {
+
+    if (value.length === 0 || !filterString) {
+      return value;
+    }
+
+
+
+    let filteredCause: any[] = [];
+for (let item of value) {
+  if (item[property].toLowerCase().includes(filterString.toLowerCase())) {
+    filteredCause.push(item);
+  }
+}
+
+console.log(filteredCause)
+return filteredCause;
+    // return null;
+  }
+
+}

src/app/filter/filter.component.html

@@ -1 +0,0 @@
-<input class="form-control form-control-lg" type="text" placeholder="Search causes" aria-label=".form-control-lg example">

src/app/filter/filter.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./filter.component.css']
 })
 export class FilterComponent implements OnInit {
-
+  filterBy: any = "";
   constructor() { }
 
   ngOnInit(): void {