UI data binding changes

src/app/projects/projects.component.ts

@@ -1,19 +1,47 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { BaseComponent } from '../base/base.component';
-import { ISideBar } from '../contact-sidebar/side-bar.model';
 import { CvService } from '../services/cv.service';
+import { IProjects } from './projects.model';
+import { IProject } from '../models/project.model';
+import { HttpClient } from '@angular/common/http';
+import { ICv } from '../models/cv.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss'
 })
-export class ProjectsComponent extends BaseComponent<ISideBar> implements OnInit{
-  constructor(svc: CvService){
+export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit, OnDestroy{
+filter: string = 'All';
+projects: IProject[] = this.model.projects;
+subscription: Subscription = <Subscription>{};
+categoryClicked: boolean = false;
+  constructor(svc: CvService, public http: HttpClient){
     super(svc);
   }
 
   ngOnInit(): void {
+    this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
+      this.projects = this.model.projects;
+    });
     this.init();
   }
+
+  filterProjects(category: string) {
+    this.filter = category;
+    this.projects = this.filter === 'All'
+      ? this.model.projects
+      : this.model.projects.filter(
+        (project: IProject) => project.category === this.filter
+      );
+  }
+
+  isCategoryActive(category: string){
+    return this.filter === category; 
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }