added filter to pages

tobiaswright · Nov 29, 2023 · 7db7046 · 7db7046
1 parent 0ac7f62
commit 7db7046
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -2,6 +2,8 @@
   <app-header></app-header>
   <div class="container">
     <app-intro></app-intro>
+
+    <!-- <input *ngIf="isHome" class="form-control form-control-lg" type="text" placeholder="Filter causes" aria-label=".form-control-lg example" [(ngModel)]="filterBy"> -->
     <router-outlet></router-outlet>
     <app-footer></app-footer>
   </div>

diff --git a/src/app/color-list/color-list.component.html b/src/app/color-list/color-list.component.html
@@ -1,9 +1,9 @@
+<input  class="form-control form-control-lg" type="text" placeholder="Filter causes" aria-label=".form-control-lg example" [(ngModel)]="filterBy">
 
-<input *ngIf="isHome" class="form-control form-control-lg" type="text" placeholder="Filter causes" aria-label=".form-control-lg example" [(ngModel)]="filterBy">
-
-    <div class="row">
-        <div class="col-4 swatches" [title]="item.causeFull" *ngFor ="let item of list | filter: filterBy: 'cause'">
-            <app-swatch [colorData]="item.colorData"></app-swatch>
-            <app-color-card [cause]="item.cause" [colorName]="item.colorData.displayName"></app-color-card>
-        </div>   
-    </div>
+<h2 *ngIf="!isHome">{{title}}</h2>
+<div class="row">
+    <div class="col-4 swatches" [title]="item.causeFull" *ngFor ="let item of list | filter: filterBy: 'cause'">
+        <app-swatch [colorData]="item.colorData"></app-swatch>
+        <app-color-card [cause]="item.cause" [colorName]="item.colorData.displayName"></app-color-card>
+    </div>   
+</div>
diff --git a/src/app/color-list/color-list.component.ts b/src/app/color-list/color-list.component.ts
@@ -9,14 +9,18 @@ import { Component, OnInit, Input  } from '@angular/core';
 export class ColorListComponent implements OnInit {
   @Input() colorList: any
   @Input() isHome: any
+  @Input() title: any;
   list: any[] = [];
   filterBy: any;
+
 
-  constructor() { }
+
+  constructor() {}
 
   ngOnInit() {
     this.list = this.colorList;
     this.AddToolTips();
+    // this.title = this.colorList[0].htmlcolor
   }
 
   private AddToolTips() {

diff --git a/src/app/color-page/color-page.component.html b/src/app/color-page/color-page.component.html
@@ -1,7 +1,7 @@
 
 <ng-container *ngIf="isValidColor; else infoText">
-    <h2 [style.color]= "color">{{title}}</h2>
-    <app-color-list [colorList]="list" [isHome] = false></app-color-list>
+    <!-- <h2 [style.color]= "color">{{title}}</h2> -->
+    <app-color-list [colorList]="list" [isHome]=false [title]="title"></app-color-list>
 </ng-container>
 <ng-template #infoText>
     <strong>This color does not exist.</strong>