fix: Use ngOnChanges for options updates and simplify ngModel bindings

Author: ishansasika

demo/src/app/components/playground/preview-area/preview-area.component.html

@@ -46,7 +46,7 @@ <h3>Preview</h3>
 
     <div class="selected-value">
       <strong>Selected Value:</strong>
-      <pre>{{selectedValue() | json}}</pre>
+      <pre>{{selectedValue | json}}</pre>
     </div>
   </div>
 </div>

demo/src/app/components/playground/preview-area/preview-area.component.ts

@@ -15,11 +15,11 @@ type PreviewTheme = 'light' | 'dark' | 'gray';
 export class PreviewAreaComponent {
   @Input() props: Record<string, any> = {};
 
-  selectedValue = signal<any>(null);
+  selectedValue: any = null;
   previewTheme = signal<PreviewTheme>('light');
 
   onSelectionChange(event: any): void {
-    console.log('Selection changed:', this.selectedValue());
+    console.log('Selection changed:', event);
   }
 
   cycleTheme(): void {

demo/src/app/pages/home/home.component.ts

@@ -18,7 +18,7 @@ interface Feature {
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {
-  demoValue = signal<any>(null);
+  demoValue: any = null;
 
   demoOptions: SelectOption[] = [
     { id: 'react', label: 'React', value: 'react' },
@@ -96,7 +96,7 @@ export class DemoComponent {
   ];
 }`;
 
-  onDemoChange(value: any): void {
-    this.demoValue.set(value);
+  onDemoChange(event: any): void {
+    console.log('Demo selection changed:', event);
   }
 }

src/lib/components/perfect-select/perfect-select.component.ts

@@ -9,6 +9,8 @@ import {
   HostListener,
   OnInit,
   OnDestroy,
+  OnChanges,
+  SimpleChanges,
   ElementRef,
   ViewChild,
   effect,
@@ -44,7 +46,7 @@ import {
     multi: true
   }]
 })
-export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnDestroy {
+export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
   private destroyRef = inject(DestroyRef);
   private sanitizer = inject(DomSanitizer);
 
@@ -280,13 +282,6 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnD
   private onTouched: any = () => {};
 
   constructor() {
-    // Watch for options changes
-    effect(() => {
-      if (this.options.length > 0 && !this.loadOptions) {
-        this.internalOptions.set([...this.options]);
-      }
-    });
-
     // Update closeMenuOnSelect based on isMulti
     effect(() => {
       if (this.isMulti && this.closeMenuOnSelect === true) {
@@ -295,6 +290,13 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnD
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    // Update internal options when the options input changes
+    if (changes['options'] && this.options.length > 0 && !this.loadOptions) {
+      this.internalOptions.set([...this.options]);
+    }
+  }
+
   writeValue(value: any): void {
     this.internalValue.set(value);
   }