Close dropdown when clicking outside

Author: PabloG02

src/app/shared/components/dropdown/dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component, input, model, signal } from "@angular/core";
+import { Component, ElementRef, inject, input, model, Renderer2, signal } from "@angular/core";
 import { SvgIconComponent } from "angular-svg-icon";
 
 @Component({
@@ -8,17 +8,46 @@ import { SvgIconComponent } from "angular-svg-icon";
   styleUrl: './dropdown.component.css'
 })
 export class DropdownComponent {
+  private renderer: Renderer2 = inject(Renderer2);
+  private elementRef: ElementRef = inject(ElementRef);
+
   items = input.required<DropdownItem[]>();
   selected = model.required<number>();
 
   isDropdownOpen = signal<boolean>(false);
 
-  toggleDropdown() {
+  private documentClickListener?: (() => void);
+
+  toggleDropdown(): void {
     this.isDropdownOpen.update(value => !value);
+    if (this.isDropdownOpen()) {
+      this.addClickOutsideListener();
+    } else {
+      this.removeClickOutsideListener();
+    }
+  }
+
+  private addClickOutsideListener(): void {
+    this.documentClickListener = this.renderer.listen('document', 'click', (event: Event) => {
+      if (!this.elementRef.nativeElement.contains(event.target)) {
+        this.toggleDropdown();
+      }
+    });
+  }
+
+  private removeClickOutsideListener(): void {
+    if (this.documentClickListener) {
+      this.documentClickListener();
+      this.documentClickListener = undefined;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeClickOutsideListener();
   }
 }
 
 interface DropdownItem {
   name: string;
-  icon: string;
+  icon?: string;
 }