bs-filter-list /product-index add ngClass : done

Author: valerisuleo

section_19-project/project/src/app/components/products/interfaces.ts

@@ -9,7 +9,7 @@ export interface IProduct {
 
 export interface ICategory {
     categoryName: string;
-    isSelected: boolean;
+    isActive: boolean;
 }
 
 export interface IListGroup {

section_19-project/project/src/app/components/products/products-index/products-index.component.ts

@@ -31,7 +31,8 @@ export class ProductsIndexComponent implements OnInit, OnDestroy {
         const remap: ICategory[] = categories.map((item: string) => {
             return {
                 categoryName: item,
-                isSelected: false
+                isActive: false,
+                cssClass: 'organic'
             }
         });
         this.listGroup = { list: remap, key: 'categoryName'};

section_19-project/project/src/app/reusable-components/bootstrap-list/bootstrap-list.component.html

@@ -1,8 +1,8 @@
 <ul class="list-group">
     <li *ngFor="let item of list" 
         (click)="toggleActiveClass(item)" 
-        class="list-group-item" 
-        [ngClass]="{'active': item.isSelected}">
+        class="list-group-item"
+        [ngClass]='item.isActive && item.cssClass'>
         {{ item[propertyKey] }}
     </li>
-</ul>
+</ul>

section_19-project/project/src/app/reusable-components/bootstrap-list/bootstrap-list.component.scss

@@ -0,0 +1,37 @@
+ul {
+    li {
+        cursor: pointer;
+    }
+}
+
+.active {
+    z-index: 2;
+    color: #fff;
+}
+
+.primary {
+    @extend .active;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.danger {
+    @extend .active;
+    background-color: red;
+    border-color: red;
+}
+
+.success {
+    @extend .active;
+    background-color: green;
+    border-color: green;
+}
+
+.organic {
+    @extend .active;
+    background-color: #CBDB34;
+    border-color: #CBDB34;
+}
+
+
+

section_19-project/project/src/app/reusable-components/bootstrap-list/bootstrap-list.component.ts

@@ -13,11 +13,11 @@ export class BootstrapListComponent implements OnChanges {
 
     constructor() { }
 
-    toggleActiveClass(current) {
+    toggleActiveClass(current): void {
         this.list
             .filter(el => el != current)
-            .forEach(item => item.isSelected = false);
-        current.isSelected = !current.isSelected;
+            .forEach(item => item.isActive = false);
+        current.isActive = !current.isActive;
     }
 
     ngOnChanges(change: SimpleChanges): void {