feat: remove memory leak

src/app/nav/nav.component.ts

@@ -10,6 +10,6 @@ export class NavComponent {
   constructor(public modal: ModalService) {}
   openModal($event: Event) {
     $event.preventDefault();
-    this.modal.toggleModal();
+    this.modal.toggleModal('auth');
   }
 }

src/app/services/modal.service.ts

@@ -1,16 +1,31 @@
 import { Injectable } from '@angular/core';
 
+interface IModal {
+  id: string;
+  visible: boolean;
+}
 @Injectable({
   providedIn: 'root',
 })
 export class ModalService {
-  private visible: boolean = false;
+  private modals: IModal[] = [];
+
+  register(id: string): void {
+    this.modals.push({ id, visible: false });
+  }
+
+  unregister(id: string): void {
+    this.modals = this.modals.filter((modal) => modal.id !== id);
+  }
 
-  isModalOpen(): boolean {
-    return this.visible;
+  isModalOpen(id: string): boolean {
+    return !!this.modals.find((modal) => modal.id === id)?.visible;
   }
 
-  toggleModal(): void {
-    this.visible = !this.visible;
+  toggleModal(id: string): void {
+    const modal = this.modals.find((modal) => modal.id === id);
+    if (modal) {
+      modal.visible = !modal.visible;
+    }
   }
 }

src/app/shared/modal/modal.component.html

@@ -1,5 +1,5 @@
 <!-- Auth Modal -->
-<div class="fixed z-50 inset-0 overflow-y-auto" [ngClass]="{ hidden : !modal.isModalOpen() }" id="modal">
+<div class="fixed z-50 inset-0 overflow-y-auto" [ngClass]="{ hidden : !modal.isModalOpen(modalId) }" id="modal">
   <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center
       sm:block sm:p-0">
     <!-- Modal BG Overlay -->

src/app/shared/modal/modal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ModalService } from 'src/app/services/modal.service';
 
 @Component({
@@ -7,8 +7,10 @@ import { ModalService } from 'src/app/services/modal.service';
   styleUrls: ['./modal.component.css'],
 })
 export class ModalComponent {
+  @Input() modalId: string = '';
+
   constructor(public modal: ModalService) {}
   closeModal(): void {
-    this.modal.toggleModal();
+    this.modal.toggleModal(this.modalId);
   }
 }

src/app/user/auth-modal/auth-modal.component.html

@@ -1,4 +1,4 @@
-<app-modal>
+<app-modal modalId='auth'>
   <p class="text-2xl font-bold" heading>Your Account</p>
   <!-- Tabs -->
   <ul class="flex flex-wrap mb-4">
@@ -82,4 +82,4 @@
   </form>
 
 
-</app-modal>
+</app-modal>

src/app/user/auth-modal/auth-modal.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ModalService } from 'src/app/services/modal.service';
 
 @Component({
   selector: 'app-auth-modal',
   templateUrl: './auth-modal.component.html',
-  styleUrls: ['./auth-modal.component.css']
+  styleUrls: ['./auth-modal.component.css'],
 })
-export class AuthModalComponent {
+export class AuthModalComponent implements OnInit, OnDestroy {
+  constructor(public modal: ModalService) {}
 
+  ngOnInit(): void {
+    this.modal.register('auth');
+  }
+
+  ngOnDestroy(): void {
+    this.modal.unregister('auth');
+  }
 }