optimising and making it better

src/app/components/back-button/back-button.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Location } from '@angular/common';
 import { environment } from '../../../environments/environment';
 
@@ -55,7 +55,8 @@ import { environment } from '../../../environments/environment';
         }
       }
     }
-  `]
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BackButtonComponent {
   isnovo = environment.theme === 'novo';

src/app/components/empty-cart-icon/empty-cart-icon.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-empty-cart-icon',
   templateUrl: './empty-cart-icon.component.html',
-  styleUrls: ['./empty-cart-icon.component.scss']
+  styleUrls: ['./empty-cart-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EmptyCartIconComponent {}

src/app/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Renderer2, inject, DOCUMENT } from '@angular/core';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { CartService } from '../../services';
 import { environment } from '../../../environments/environment';
@@ -19,18 +19,25 @@ export class HeaderComponent {
   logo = environment.logo;
   isnovo = environment.theme === 'novo';
 
+  private renderer = inject(Renderer2);
+  private document = inject(DOCUMENT);
+
   constructor(private cartService: CartService, private router: Router) {
     this.cartItemCount = this.cartService.itemCount;
   }
 
   toggleMenu(): void {
     this.menuOpen = !this.menuOpen;
-    document.body.classList.toggle('dexar-menu-open', this.menuOpen);
+    if (this.menuOpen) {
+      this.renderer.addClass(this.document.body, 'dexar-menu-open');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dexar-menu-open');
+    }
   }
 
   closeMenu(): void {
     this.menuOpen = false;
-    document.body.classList.remove('dexar-menu-open');
+    this.renderer.removeClass(this.document.body, 'dexar-menu-open');
   }
 
   navigateToSearch(): void {
@@ -41,7 +48,7 @@ export class HeaderComponent {
     this.closeMenu();
     this.router.navigate(['/']).then(() => {
       setTimeout(() => {
-        document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' });
+        this.document.getElementById('catalog')?.scrollIntoView({ behavior: 'smooth' });
       }, 100);
     });
   }

src/app/components/items-carousel/items-carousel.component.ts

@@ -21,7 +21,7 @@ export class ItemsCarouselComponent implements OnInit {
     loading = signal(true);
     isnovo = environment.theme === 'novo';
 
-    responsiveOptions: any[] | undefined;
+    responsiveOptions: { breakpoint: string; numVisible: number; numScroll: number }[] | undefined;
 
     constructor(
         private apiService: ApiService,
@@ -68,7 +68,7 @@ export class ItemsCarouselComponent implements OnInit {
         ];
     }
 
-    getSeverity(remainings: string) {
+    getSeverity(remainings: string): 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast' {
         switch (remainings) {
             case 'high':
                 return 'success';

src/app/components/logo/logo.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { environment } from '../../../environments/environment';
 
 @Component({
@@ -10,7 +10,8 @@ import { environment } from '../../../environments/environment';
       height: 100%;
       object-fit: contain;
     }
-  `]
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LogoComponent {
   brandName = environment.brandName;