optimized api calls by moving api call to individual components and improved performance

src/app/projects/projects.component.ts

@@ -12,9 +12,9 @@ import { Subscription } from 'rxjs';
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss'
 })
-export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit, OnDestroy{
+export class ProjectsComponent extends BaseComponent<IProjects> implements OnInit {
 filter: string = 'All';
-projects: IProject[] = this.model.projects;
+projects!: IProject[];
 subscription: Subscription = <Subscription>{};
 categoryClicked: boolean = false;
   constructor(svc: CvService, public http: HttpClient){
@@ -22,10 +22,19 @@ categoryClicked: boolean = false;
   }
 
   ngOnInit(): void {
-    this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
-      this.projects = this.model.projects;
+    // this.subscription = this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
+    //   this.projects = this.model.projects;
+    // });
+    // this.init();
+    this.getProjects();
+  }
+
+  getProjects(){
+    this.svc.getProjects(this.candidateId).subscribe((response: IProjects) => {
+      this.svc.projects = this.svc.projects ?? response;
+      this.projects = response.projects;
+      this.assignData(response);
     });
-    this.init();
   }
 
   filterProjects(category: string) {
@@ -40,8 +49,4 @@ categoryClicked: boolean = false;
   isCategoryActive(category: string){
     return this.filter === category; 
   }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
 }