refactor(toast): signal inputs, host bindings, cleanup

Author: xidedix

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

@@ -1,14 +1,16 @@
-import { Component, HostBinding, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ToastComponent } from '../toast/toast.component';
 
 @Component({
   selector: 'c-toast-body',
   template: '<ng-content />',
   styleUrls: ['./toast-body.component.scss'],
-  exportAs: 'cToastBody'
+  exportAs: 'cToastBody',
+  host: {
+    class: 'toast-body',
+  }
 })
 export class ToastBodyComponent {
-  toast? = inject(ToastComponent, { optional: true });
+  readonly toast? = inject(ToastComponent, { optional: true });
 
-  @HostBinding('class.toast-body') toastBodyClass = true;
 }

projects/coreui-angular/src/lib/toast/toast-close.directive.ts

@@ -1,18 +1,21 @@
-import { Directive, HostListener, inject, Input } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
 import { ToasterService } from './toaster/toaster.service';
+import type { ToastComponent } from './toast/toast.component';
 
 @Directive({
   selector: '[cToastClose]',
-  exportAs: 'cToastClose'
+  exportAs: 'cToastClose',
+  host: {
+    '(click)': 'toggleOpen($event)'
+  }
 })
 export class ToastCloseDirective {
   readonly #toasterService = inject(ToasterService);
 
-  @Input('cToastClose') toast: any;
+  readonly cToastClose = input<ToastComponent>();
 
-  @HostListener('click', ['$event'])
-  toggleOpen($event: any): void {
+  toggleOpen($event: MouseEvent): void {
     $event.preventDefault();
-    this.#toasterService.setState({ show: false, toast: this.toast });
+    this.#toasterService.setState({ show: false, toast: this.cToastClose() });
   }
 }

projects/coreui-angular/src/lib/toast/toast-header/toast-header.component.html

@@ -1,6 +1,6 @@
 <ng-container>
   <ng-content />
-  @if (closeButton) {
-    <button [cToastClose]="toast" [style]="{outline: 0}" aria-label="close" cButtonClose class="ms-auto"></button>
+  @if (closeButton()) {
+    <button [cToastClose]="toast()" [style]="{outline: 0}" aria-label="close" cButtonClose class="ms-auto"></button>
   }
 </ng-container>

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

@@ -1,4 +1,4 @@
-import { Component, HostBinding, inject, Input } from '@angular/core';
+import { Component, inject, input, signal } from '@angular/core';
 
 import { ButtonCloseDirective } from '../../button';
 import { ToastComponent } from '../toast/toast.component';
@@ -8,16 +8,19 @@ import { ToastCloseDirective } from '../toast-close.directive';
   selector: 'c-toast-header',
   templateUrl: './toast-header.component.html',
   exportAs: 'cToastHeader',
-  imports: [ToastCloseDirective, ButtonCloseDirective]
+  imports: [ToastCloseDirective, ButtonCloseDirective],
+  host: {
+    class: 'toast-header'
+  }
 })
 export class ToastHeaderComponent {
-  toast? = inject(ToastComponent, { optional: true });
+  readonly #toast = inject(ToastComponent, { optional: true });
+
+  readonly toast = signal(this.#toast ?? undefined);
 
   /**
    * Add close button to a toast header
-   * @type boolean
+   * @return boolean
    */
-  @Input() closeButton = true;
-
-  @HostBinding('class.toast-header') toastHeaderClass = true;
+  readonly closeButton = input(true);
 }

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

@@ -2,11 +2,10 @@ import {
   booleanAttribute,
   ChangeDetectorRef,
   Component,
+  computed,
+  effect,
   ElementRef,
-  HostBinding,
-  HostListener,
   inject,
-  Input,
   input,
   numberAttribute,
   OnDestroy,
@@ -47,47 +46,58 @@ type AnimateType = 'hide' | 'show';
       })
     ])
   ],
-  host: { class: 'toast show' }
+  host: {
+    class: 'toast show',
+    '[class]': 'hostClasses()',
+    '(mouseover)': 'clearTimer()',
+    '(mouseout)': 'setTimer()',
+    '[@fadeInOut]': 'animateType',
+    '[@.disabled]': 'animationDisabled()'
+  }
 })
 export class ToastComponent implements OnInit, OnDestroy {
+  readonly changeDetectorRef = inject(ChangeDetectorRef);
   readonly hostElement = inject(ElementRef);
   readonly renderer = inject(Renderer2);
   readonly toasterService = inject(ToasterService);
-  readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   readonly dynamic = input<boolean>();
   readonly placement = input<TToasterPlacement>();
 
   /**
    * Auto hide the toast.
-   * @type boolean
+   * @return boolean
    */
   readonly autohide = input(true);
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
-   * @type Colors
+   * @return Colors
    */
   readonly color = input<Colors>('');
 
   /**
    * Delay hiding the toast (ms).
-   * @type number
+   * @return number
    */
   readonly delay = input(5000, { transform: numberAttribute });
 
   /**
    * Apply fade transition to the toast.
-   * @type boolean
+   * @return boolean
    */
   readonly fade = input(true);
 
   /**
    * Toggle the visibility of component.
-   * @type boolean
+   * @return boolean
    */
+  readonly visibleInput = input(false, { transform: booleanAttribute, alias: 'visible' });
+
+  readonly #visibleInputEffect = effect(() => {
+    this.visible = this.visibleInput();
+  });
 
-  @Input({ transform: booleanAttribute })
   set visible(value: boolean) {
     const newValue = value;
     if (this.#visible !== newValue) {
@@ -111,13 +121,13 @@ export class ToastComponent implements OnInit, OnDestroy {
 
   /**
    * Event emitted on visibility change. [docs]
-   * @type <boolean>
+   * @return <boolean>
    */
   readonly visibleChange = output<boolean>();
 
   /**
    * Event emitted on timer tick. [docs]
-   * @type number
+   * @return number
    */
   readonly timer = output<number>();
 
@@ -137,33 +147,23 @@ export class ToastComponent implements OnInit, OnDestroy {
     this.changeDetectorRef.markForCheck();
   }
 
-  @HostBinding('@.disabled')
-  get animationDisabled(): boolean {
+  readonly animationDisabled = computed(() => {
     return !this.fade();
-  }
+  });
 
-  @HostBinding('@fadeInOut')
   get animateType(): AnimateType {
     return this.visible ? 'show' : 'hide';
   }
 
-  @HostListener('mouseover') onMouseOver(): void {
-    this.clearTimer();
-  }
-
-  @HostListener('mouseout') onMouseOut(): void {
-    this.setTimer();
-  }
-
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const color = this.color();
     return {
       toast: true,
       show: true,
-      [`bg-${this.color()}`]: !!this.color(),
-      'border-0': !!this.color()
-    };
-  }
+      [`bg-${color}`]: !!color,
+      'border-0': !!color
+    } as Record<string, boolean>;
+  });
 
   ngOnInit(): void {
     if (this.visible) {

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

@@ -1,19 +1,17 @@
 import {
-  AfterContentChecked,
   Component,
   ComponentRef,
-  ContentChildren,
+  computed,
+  contentChildren,
   DestroyRef,
   ElementRef,
-  HostBinding,
   inject,
   Injector,
-  Input,
+  input,
   NgModuleRef,
   OnInit,
-  QueryList,
   Renderer2,
-  ViewChild,
+  viewChild,
   ViewContainerRef
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -53,59 +51,58 @@ export type TToasterPlacement =
   templateUrl: './toaster.component.html',
   exportAs: 'cToaster',
   imports: [ToasterHostDirective],
-  host: { class: 'toaster toast-container' }
+  host: {
+    class: 'toaster toast-container',
+    '[class]': 'hostClasses()'
+  }
 })
-export class ToasterComponent implements OnInit, AfterContentChecked {
+export class ToasterComponent implements OnInit {
   readonly #hostElement = inject(ElementRef);
   readonly #renderer = inject(Renderer2);
   readonly #toasterService = inject(ToasterService);
   readonly #destroyRef = inject(DestroyRef);
 
   placements = Object.values(ToasterPlacement);
-  toasts!: QueryList<ViewContainerRef>;
-  toastsDynamic: any[] = [];
+  toastsDynamic: ComponentRef<any>[] = [];
 
   /**
    * Toaster placement
-   * @type TToasterPlacement
+   * @return TToasterPlacement
    */
-  @Input() placement: TToasterPlacement = ToasterPlacement.TopEnd;
+  readonly placement = input<TToasterPlacement>(ToasterPlacement.TopEnd);
 
   /**
    * Toaster position
-   * @type (string | 'absolute' | 'fixed' | 'static')
+   * @return (string | 'absolute' | 'fixed' | 'static')
    */
-  @Input() position: string | 'absolute' | 'fixed' | 'static' = 'absolute';
+  readonly position = input<string | 'absolute' | 'fixed' | 'static'>('absolute');
 
-  @ViewChild(ToasterHostDirective, { static: true }) toasterHost!: ToasterHostDirective;
-  @ContentChildren(ToastComponent, { read: ViewContainerRef }) contentToasts!: QueryList<ViewContainerRef>;
+  readonly toasterHost = viewChild.required(ToasterHostDirective);
+  readonly contentToasts = contentChildren(ToastComponent, { read: ViewContainerRef });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const placement = this.placement();
+    const position = this.position();
     return {
       toaster: true,
       'toast-container': true,
-      [`position-${this.position}`]: !!this.position,
-      'top-0': this.placement.includes('top'),
-      'top-50': this.placement.includes('middle'),
-      'bottom-0': this.placement.includes('bottom'),
-      'start-0': this.placement.includes('start'),
-      'start-50': this.placement.includes('center'),
-      'end-0': this.placement.includes('end'),
-      'translate-middle-x': this.placement.includes('center') && !this.placement.includes('middle'),
-      'translate-middle-y': this.placement.includes('middle') && !this.placement.includes('center'),
-      'translate-middle': this.placement.includes('middle') && this.placement.includes('center')
+      [`position-${position}`]: !!position,
+      'top-0': placement.includes('top'),
+      'top-50': placement.includes('middle'),
+      'bottom-0': placement.includes('bottom'),
+      'start-0': placement.includes('start'),
+      'start-50': placement.includes('center'),
+      'end-0': placement.includes('end'),
+      'translate-middle-x': placement.includes('center') && !placement.includes('middle'),
+      'translate-middle-y': placement.includes('middle') && !placement.includes('center'),
+      'translate-middle': placement.includes('middle') && placement.includes('center')
     };
-  }
+  });
 
   ngOnInit(): void {
     this.stateToasterSubscribe();
   }
 
-  ngAfterContentChecked(): void {
-    this.toasts = this.contentToasts;
-  }
-
   public addToast(
     toast: any,
     props: any,
@@ -116,13 +113,13 @@ export class ToasterComponent implements OnInit, AfterContentChecked {
       projectableNodes?: Node[][];
     }
   ): ComponentRef<any> {
-    const componentRef: ComponentRef<any> = this.toasterHost.viewContainerRef.createComponent(toast, options);
+    const componentRef: ComponentRef<any> = this.toasterHost().viewContainerRef.createComponent(toast, options);
     this.toastsDynamic.push(componentRef);
     const index = this.toastsDynamic.indexOf(componentRef);
     for (const [key, value] of Object.entries(props)) {
       componentRef.setInput(key, value);
     }
-    componentRef.setInput('placement', this.placement);
+    componentRef.setInput('placement', this.placement());
     componentRef.setInput('dynamic', true);
     componentRef.setInput('index', index);
     componentRef.setInput('visible', true);
@@ -139,8 +136,7 @@ export class ToasterComponent implements OnInit, AfterContentChecked {
         item.destroy();
       }
     });
-
-    this.toasts?.forEach((item) => {
+    this.contentToasts()?.forEach((item) => {
       if (state.toast && item.element.nativeElement === state.toast.hostElement.nativeElement) {
         if (!state.toast.dynamic()) {
           state.toast['visible'] = false;

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
 import { TToasterPlacement } from './toaster.component';
-import { ToastComponent } from '../toast/toast.component';
+import { type ToastComponent } from '../toast/toast.component';
 
 export interface IToasterAction {
   placement?: TToasterPlacement;