refactor: migration to signal inputs, host bindings, cleanups

Author: xidedix

src/app/views/notifications/toasters/toast-simple/toast.component.html

@@ -1,10 +1,10 @@
 <ng-container>
-  <c-toast-header [closeButton]="closeButton">
+  <c-toast-header [closeButton]="closeButton()">
     <svg class="rounded me-2" focusable="false" height="20" preserveAspectRatio="xMidYMid slice"
          role="img" width="20" xmlns="http://www.w3.org/2000/svg">
       <rect fill="#007aff" height="100%" width="100%"></rect>
     </svg>
-    <strong>{{ title }}</strong>
+    <strong>{{ title() }}</strong>
   </c-toast-header>
   <c-toast-body #toastBody [cToastClose]="toastBody.toast ?? undefined">
     <p class="mb-1">This is a dynamic toast no {{ toastBody.toast?.index() }} {{ toastBody.toast?.clock }}</p>

src/app/views/notifications/toasters/toast-simple/toast.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, input } from '@angular/core';
 
 import { ProgressComponent, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent } from '@coreui/angular';
 
@@ -15,6 +15,6 @@ export class AppToastComponent extends ToastComponent {
     super();
   }
 
-  @Input() closeButton = true;
-  @Input() title = '';
+  readonly closeButton = input(true);
+  readonly title = input('');
 }

src/app/views/theme/colors.component.ts

@@ -1,18 +1,17 @@
-import { AfterViewInit, Component, HostBinding, Input, OnInit, Renderer2, forwardRef, DOCUMENT, inject } from '@angular/core';
+import { AfterViewInit, Component, computed, DOCUMENT, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 import { getStyle, rgbToHex } from '@coreui/utils';
-import { TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, RowComponent, ColComponent } from '@coreui/angular';
+import { CardBodyComponent, CardComponent, CardHeaderComponent, ColComponent, RowComponent } from '@coreui/angular';
 
 @Component({
-    templateUrl: 'colors.component.html',
-    imports: [TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, RowComponent, forwardRef(() => ThemeColorComponent)]
+  templateUrl: 'colors.component.html',
+  imports: [CardComponent, CardHeaderComponent, CardBodyComponent, RowComponent, forwardRef(() => ThemeColorComponent)]
 })
 export class ColorsComponent implements OnInit, AfterViewInit {
   private document = inject<Document>(DOCUMENT);
   private renderer = inject(Renderer2);
 
-
   public themeColors(): void {
     Array.from(this.document.querySelectorAll('.theme-color')).forEach(
       (element: Element) => {
@@ -46,28 +45,28 @@ export class ColorsComponent implements OnInit, AfterViewInit {
 }
 
 @Component({
-    selector: 'app-theme-color',
-    template: `
+  selector: 'app-theme-color',
+  template: `
     <c-col xl="2" md="4" sm="6" xs="12" class="my-4 ms-4">
-      <div [ngClass]="colorClasses" style="padding-top: 75%;"></div>
+      <div [ngClass]="colorClasses()" style="padding-top: 75%;"></div>
       <ng-content></ng-content>
     </c-col>
   `,
-    imports: [ColComponent, NgClass]
+  imports: [ColComponent, NgClass],
+  host: {
+    style: 'display: contents;'
+  }
 })
-export class ThemeColorComponent implements OnInit {
-  @Input() color = '';
-  public colorClasses = {
-    'theme-color w-75 rounded mb-3': true
-  };
+export class ThemeColorComponent {
+  readonly color = input('');
 
-  @HostBinding('style.display') display = 'contents';
-
-  ngOnInit(): void {
-    this.colorClasses = {
-      ...this.colorClasses,
-      [`bg-${this.color}`]: !!this.color
+  readonly colorClasses = computed(() => {
+    const color = this.color();
+    return {
+      'theme-color w-75 rounded mb-3': true,
+      [`bg-${color}`]: !!color
     };
-  }
+  });
+  
 }
 

src/app/views/widgets/widgets-brand/widgets-brand.component.html

@@ -7,7 +7,7 @@
         [values]="widget.values"
       >
         <svg [name]="widget.icon" cIcon class="my-4 text-white" height="52"></svg>
-        @if (withCharts) {
+        @if (withCharts()) {
           <c-chart
             #chart="cChart"
             [data]="widget.data"

src/app/views/widgets/widgets-brand/widgets-brand.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, inject } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, input } from '@angular/core';
 import { ChartjsComponent } from '@coreui/angular-chartjs';
 import { IconDirective } from '@coreui/icons-angular';
 import { ColComponent, RowComponent, WidgetStatDComponent } from '@coreui/angular';
@@ -24,7 +24,7 @@ export class WidgetsBrandComponent implements AfterContentInit {
   private changeDetectorRef = inject(ChangeDetectorRef);
 
 
-  @Input() withCharts?: boolean;
+  readonly withCharts = input<boolean>();
   // @ts-ignore
   chartOptions = {
     elements: {

src/components/docs-callout/docs-callout.component.html

@@ -1,20 +1,22 @@
 <c-callout class="bg-white:dark:bg-transparent" color="info">
-  <ng-container *ngTemplateOutlet="default" />
+  <ng-container *ngTemplateOutlet="defaultTpl" />
 </c-callout>
 
-<ng-template #default>
-  @if (!!name) {
+<ng-template #defaultTpl>
+  @let componentName = name();
+  @let isPlural = plural();
+  @if (!!componentName) {
     <p>
-      An Angular {{ name }} component{{ plural ? 's' : '' }} {{ plural ? 'have' : 'has' }} been created as a native
+      An Angular {{ componentName }} component{{ isPlural ? 's' : '' }} {{ isPlural ? 'have' : 'has' }} been created as a native
       Angular
       version
-      of Bootstrap {{ name }}. {{ name }} {{ plural ? 'are' : 'is' }} delivered with some new features,
+      of Bootstrap {{ componentName }}. {{ componentName }} {{ isPlural ? 'are' : 'is' }} delivered with some new features,
       variants, and unique design that matches CoreUI Design System requirements.
     </p>
   }
 
   <ng-content />
 
   <br>
-  For more information please visit our official <a href="{{href}}" target="_blank">documentation of CoreUI Components Library for Angular.</a>
+  For more information please visit our official <a href="{{href()}}" target="_blank">documentation of CoreUI Components Library for Angular.</a>
 </ng-template>

src/components/docs-callout/docs-callout.component.scss

@@ -1,37 +1,27 @@
-import { Component, Input } from '@angular/core';
-import packageJson from '../../../package.json';
+import { Component, computed, input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { CalloutComponent } from '@coreui/angular';
+import packageJson from '../../../package.json';
 
 @Component({
-    selector: 'app-docs-callout',
-    templateUrl: './docs-callout.component.html',
-    styleUrls: ['./docs-callout.component.scss'],
-    imports: [CalloutComponent, NgTemplateOutlet]
+  selector: 'app-docs-callout',
+  templateUrl: './docs-callout.component.html',
+  imports: [CalloutComponent, NgTemplateOutlet]
 })
 export class DocsCalloutComponent {
 
-  @Input() name: string = '';
-
-  constructor() { }
+  readonly name = input('');
 
-  private _href: string = 'https://coreui.io/angular/docs/';
+  readonly hrefInput = input<string>('https://coreui.io/angular/docs/', { alias: 'href' });
 
-  get href(): string {
-    return this._href;
-  }
+  readonly plural = computed(() => this.name()?.slice(-1) === 's');
 
-  @Input()
-  set href(value: string) {
+  readonly href = computed(() => {
     const version = packageJson?.config?.coreui_library_short_version;
     const docsUrl = packageJson?.config?.coreui_library_docs_url ?? 'https://coreui.io/angular/';
-    // const path: string = version ? `${version}/${value}` : `${value}`;
-    const path: string = value;
-    this._href = `${docsUrl}${path}`;
-  }
-
-  get plural() {
-    return this.name?.slice(-1) === 's';
-  }
-
+    const href = this.hrefInput();
+    // const path: string = version ? `${version}/${href}` : `${href}`;
+    const path: string = href;
+    return `${docsUrl}${path}`;
+  });
 }

src/components/docs-callout/docs-callout.component.ts

@@ -1,12 +1,12 @@
 <c-nav variant="underline-border" class="border-bottom w-100">
   <c-nav-item>
-    <a [active]="true" [fragment]="fragment" [routerLink]="" cNavLink>
+    <a [active]="true" [fragment]="fragment()" [routerLink]="" cNavLink>
       <svg cIcon class="me-2" name="cilMediaPlay"></svg>
       Preview
     </a>
   </c-nav-item>
   <c-nav-item>
-    <a [href]="href" cNavLink target="_blank">
+    <a [href]="href()" cNavLink target="_blank">
       <svg cIcon class="me-2" name="cilCode"></svg>
       Code
     </a>

src/components/docs-example/docs-example.component.html

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, inject, input } from '@angular/core';
 
 import packageJson from '../../../package.json';
 import { IconDirective } from '@coreui/icons-angular';
@@ -10,38 +10,24 @@ import { NavComponent, NavItemComponent, NavLinkDirective } from '@coreui/angula
     templateUrl: './docs-example.component.html',
     styleUrls: ['./docs-example.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [NavComponent, NavItemComponent, NavLinkDirective, RouterLink, IconDirective]
+    imports: [NavComponent, NavItemComponent, NavLinkDirective, RouterLink, IconDirective],
+    host: {
+      'class': 'example',
+    }
 })
-export class DocsExampleComponent implements AfterContentInit, AfterViewInit {
-  private changeDetectorRef = inject(ChangeDetectorRef);
+export class DocsExampleComponent {
+  readonly #changeDetectorRef = inject(ChangeDetectorRef);
 
+  readonly hrefInput = input<string>('https://coreui.io/angular/docs/', { alias: 'href' });
+  readonly fragment = input<string>();
 
-  @Input() fragment?: string;
-
-  @HostBinding('class.example')
-  get exampleClass() {
-    return true;
-  };
-
-  private _href = 'https://coreui.io/angular/docs/';
-
-  get href(): string {
-    return this._href;
-  }
-
-  @Input()
-  set href(value: string) {
+  readonly href = computed(() => {
     const version = packageJson?.config?.coreui_library_short_version;
     const docsUrl = packageJson?.config?.coreui_library_docs_url ?? 'https://coreui.io/angular/';
-    // const path: string = version ? `${version}/${value}` : '';
-    this._href = `${docsUrl}${value}`;
-  }
-
-  ngAfterContentInit(): void {
-    // this.changeDetectorRef.detectChanges();
-  }
-
-  ngAfterViewInit(): void {
-    this.changeDetectorRef.markForCheck();
-  }
+    const href = this.hrefInput();
+    // const path: string = version ? `${version}/${href}` : `${href}`;
+    const path: string = href;
+    this.#changeDetectorRef.markForCheck();
+    return `${docsUrl}${path}`;
+  });
 }