refactor(toast): use ComponentRef setInput() api, input signals

Author: xidedix

projects/coreui-angular/src/lib/toast/toast/toast.component.ts

@@ -3,14 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  EventEmitter,
   HostBinding,
   HostListener,
   Input,
+  input,
   numberAttribute,
   OnDestroy,
   OnInit,
-  Output,
+  output,
   Renderer2
 } from '@angular/core';
 
@@ -50,44 +50,45 @@ type AnimateType = 'hide' | 'show';
   host: { class: 'toast show' }
 })
 export class ToastComponent implements OnInit, OnDestroy {
-  public dynamic!: boolean;
-  public placement!: TToasterPlacement;
-
   constructor(
     public hostElement: ElementRef,
     public renderer: Renderer2,
     public toasterService: ToasterService,
     public changeDetectorRef: ChangeDetectorRef
   ) {}
 
+  readonly dynamic = input<boolean>();
+  readonly placement = input<TToasterPlacement>();
+
   /**
    * Auto hide the toast.
    * @type boolean
    */
-  @Input() autohide: boolean = true;
+  readonly autohide = input(true);
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() color?: Colors = '';
+  readonly color = input<Colors>('');
 
   /**
    * Delay hiding the toast (ms).
    * @type number
    */
-  @Input({ transform: numberAttribute }) delay: number = 5000;
+  readonly delay = input(5000, { transform: numberAttribute });
 
   /**
    * Apply fade transition to the toast.
    * @type boolean
    */
-  @Input() fade: boolean = true;
+  readonly fade = input(true);
 
   /**
    * Toggle the visibility of component.
    * @type boolean
    */
+
   @Input({ transform: booleanAttribute })
   set visible(value: boolean) {
     const newValue = value;
@@ -108,19 +109,19 @@ export class ToastComponent implements OnInit, OnDestroy {
   /**
    * @ignore
    */
-  @Input({ transform: numberAttribute }) index?: number;
+  readonly index = input(0, { transform: numberAttribute });
 
   /**
    * Event emitted on visibility change. [docs]
-   * @type EventEmitter<boolean>
+   * @type <boolean>
    */
-  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  readonly visibleChange = output<boolean>();
 
   /**
    * Event emitted on timer tick. [docs]
    * @type number
    */
-  @Output() timer: EventEmitter<number> = new EventEmitter();
+  readonly timer = output<number>();
 
   private timerId: ReturnType<typeof setTimeout> | undefined;
   private clockId: ReturnType<typeof setInterval> | undefined;
@@ -140,7 +141,7 @@ export class ToastComponent implements OnInit, OnDestroy {
 
   @HostBinding('@.disabled')
   get animationDisabled(): boolean {
-    return !this.fade;
+    return !this.fade();
   }
 
   @HostBinding('@fadeInOut')
@@ -161,8 +162,8 @@ export class ToastComponent implements OnInit, OnDestroy {
     return {
       toast: true,
       show: true,
-      [`bg-${this.color}`]: !!this.color,
-      'border-0': !!this.color
+      [`bg-${this.color()}`]: !!this.color(),
+      'border-0': !!this.color()
     };
   }
 
@@ -171,7 +172,7 @@ export class ToastComponent implements OnInit, OnDestroy {
       this.toasterService.setState({
         toast: this,
         show: this.visible,
-        placement: this.placement
+        placement: this.placement()
       });
       this.clearTimer();
       this.setTimer();
@@ -184,8 +185,8 @@ export class ToastComponent implements OnInit, OnDestroy {
 
   setTimer(): void {
     this.clearTimer();
-    if (this.autohide && this.visible) {
-      this.timerId = this.delay > 0 ? setTimeout(() => this.onClose(), this.delay) : undefined;
+    if (this.autohide() && this.visible) {
+      this.timerId = this.delay() > 0 ? setTimeout(() => this.onClose(), this.delay()) : undefined;
       this.setClock();
     }
   }
@@ -201,7 +202,7 @@ export class ToastComponent implements OnInit, OnDestroy {
     this.toasterService.setState({
       toast: this,
       show: false,
-      placement: this.placement
+      placement: this.placement()
     });
   }
 
@@ -214,7 +215,7 @@ export class ToastComponent implements OnInit, OnDestroy {
     }, 1000);
     this.clockTimerId = setTimeout(() => {
       this.clearClock();
-    }, this.delay);
+    }, this.delay());
   }
 
   clearClock(): void {

projects/coreui-angular/src/lib/toast/toaster/toaster.component.ts

@@ -124,30 +124,30 @@ export class ToasterComponent implements OnInit, AfterContentChecked {
     this.toastsDynamic.push(componentRef);
     const index = this.toastsDynamic.indexOf(componentRef);
     for (const [key, value] of Object.entries(props)) {
-      componentRef.instance[key] = value;
+      componentRef.setInput(key, value);
     }
-    componentRef.instance['placement'] = this.placement;
-    componentRef.instance['dynamic'] = true;
-    componentRef.instance['index'] = index;
-    componentRef.instance['visible'] = true;
+    componentRef.setInput('placement', this.placement);
+    componentRef.setInput('dynamic', true);
+    componentRef.setInput('index', index);
+    componentRef.setInput('visible', true);
     componentRef.instance['visibleChange'].emit(true);
     componentRef.changeDetectorRef?.detectChanges();
     return componentRef;
   }
 
   public removeToast(state: IToasterAction): void {
     this.toastsDynamic?.forEach((item) => {
-      if (state.toast?.dynamic && item.instance === state.toast) {
-        item.instance.visible = false;
+      if (state.toast?.dynamic() && item.instance === state.toast) {
+        item.setInput('visible', false);
         item.instance['visibleChange'].emit(false);
         item.destroy();
       }
     });
 
     this.toasts?.forEach((item) => {
       if (state.toast && item.element.nativeElement === state.toast.hostElement.nativeElement) {
-        if (!state.toast.dynamic) {
-          state.toast.visible = false;
+        if (!state.toast.dynamic()) {
+          state.toast['visible'] = false;
         }
       }
     });
@@ -158,9 +158,9 @@ export class ToasterComponent implements OnInit, AfterContentChecked {
       if (state.show === false) {
         this.removeToast(state);
       }
-      if (state.show === true && state.toast?.dynamic === undefined) {
-        /* empty */
-      }
+      // if (state.show === true && state.toast?.dynamic() === undefined) {
+      //   /* empty */
+      // }
     });
   }
 }