refactor(navbar): input signals, host bindings

Author: xidedix

projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.spec.ts

@@ -1,8 +1,11 @@
 import { NavbarBrandDirective } from './navbar-brand.directive';
+import { TestBed } from '@angular/core/testing';
 
 describe('NavbarBrandDirective', () => {
   it('should create an instance', () => {
-    const directive = new NavbarBrandDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new NavbarBrandDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/navbar/navbar-brand/navbar-brand.directive.ts

@@ -1,12 +1,10 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 @Directive({
   selector: '[cNavbarBrand]',
-  standalone: true
+  standalone: true,
+  host: { class: 'navbar-brand', '[attr.role]': 'role()' }
 })
 export class NavbarBrandDirective {
-
-  @HostBinding('class.navbar-brand') navbarBrand = true;
-  @HostBinding('attr.role') role = 'button';
-
+  readonly role = input('button');
 }

projects/coreui-angular/src/lib/navbar/navbar-nav/navbar-nav.component.ts

@@ -1,23 +1,22 @@
-import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'c-navbar-nav',
   template: '<ng-content />',
   standalone: true,
-  host: { class: 'navbar-nav' }
+  host: { '[class]': 'hostClasses()' }
 })
 export class NavbarNavComponent {
   /**
    * Enable vertical scrolling of a collapsed navbar toggleable contents.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) scroll: string | boolean = false;
+  readonly scroll = input(false, { transform: booleanAttribute });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
       'navbar-nav': true,
-      'navbar-nav-scroll': this.scroll
-    };
-  }
+      'navbar-nav-scroll': this.scroll()
+    } as Record<string, boolean>;
+  });
 }

projects/coreui-angular/src/lib/navbar/navbar-text/navbar-text.component.ts

@@ -1,12 +1,9 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-navbar-text',
   template: '<ng-content />',
-  standalone: true
+  standalone: true,
+  host: { class: 'navbar-text' }
 })
-export class NavbarTextComponent {
-
-  @HostBinding('class.navbar-text') navbarTextClass = true;
-
-}
+export class NavbarTextComponent {}

projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.spec.ts

@@ -1,12 +1,18 @@
-import { NavbarTogglerDirective } from './navbar-toggler.directive';
 import { ElementRef, Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { NavbarTogglerDirective } from './navbar-toggler.directive';
 
 describe('NavbarTogglerDirective', () => {
-  let renderer: Renderer2;
-  let hostElement: ElementRef;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Renderer2, { provide: ElementRef, useValue: { nativeElement: document.createElement('button') } }]
+    });
+  });
 
   it('should create an instance', () => {
-    const directive = new NavbarTogglerDirective(renderer, hostElement);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new NavbarTogglerDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/navbar/navbar-toggler/navbar-toggler.directive.ts

@@ -1,55 +1,60 @@
-import { AfterContentInit, Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
+import { afterNextRender, Directive, ElementRef, HostListener, inject, input, Renderer2 } from '@angular/core';
 import { CollapseDirective } from '../../collapse';
 
 @Directive({
   selector: '[cNavbarToggler]',
-  standalone: true
+  standalone: true,
+  host: {
+    '[attr.aria-label]': 'ariaLabel()',
+    '[attr.type]': 'type()',
+    class: 'navbar-toggler'
+  }
 })
-export class NavbarTogglerDirective implements AfterContentInit {
+export class NavbarTogglerDirective {
+  readonly #renderer = inject(Renderer2);
+  readonly #hostElement = inject(ElementRef);
+
+  constructor() {
+    afterNextRender({
+      read: () => {
+        const hasContent = this.#hostElement.nativeElement.childNodes.length as boolean;
+        if (!hasContent) {
+          this.addDefaultIcon();
+        }
+      }
+    });
+  }
+
   /**
    * Reference to navbar collapse element (via # template variable) . [docs]
    * @type string
    * @default 'button'
    */
-  @Input('cNavbarToggler') collapseRef?: CollapseDirective;
-  @HostBinding('class.navbar-toggler') navbarToggler = true;
+  readonly collapseRef = input<CollapseDirective | undefined>(undefined, { alias: 'cNavbarToggler' });
+
   /**
    * Default type for navbar-toggler. [docs]
    * @type string
    * @default 'button'
    */
-  @HostBinding('attr.type')
-  @Input() type = 'button';
+  readonly type = input('button');
+
   /**
    * Default aria-label attr for navbar-toggler. [docs]
    * @type string
    * @default 'Toggle navigation'
    */
-  @HostBinding('attr.aria-label')
-  @Input() ariaLabel = 'Toggle navigation';
-
-  private hasContent!: boolean;
-
-  constructor(
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) { }
+  readonly ariaLabel = input('Toggle navigation');
 
   @HostListener('click', ['$event'])
   handleClick() {
-    this.collapseRef?.toggle(!this.collapseRef?.visible);
+    const collapseRef = this.collapseRef();
+    collapseRef?.toggle(!collapseRef?.visible());
   }
 
   addDefaultIcon(): void {
-    const span = this.renderer.createElement('span');
-    this.renderer.addClass(span, 'navbar-toggler-icon');
-    this.renderer.appendChild(this.hostElement.nativeElement, span);
-  }
-
-  ngAfterContentInit(): void {
-    this.hasContent = this.hostElement.nativeElement.childNodes.length as boolean;
-    if (!this.hasContent) {
-      this.addDefaultIcon();
-    }
+    const span = this.#renderer.createElement('span');
+    this.#renderer.addClass(span, 'navbar-toggler-icon');
+    this.#renderer.appendChild(this.#hostElement.nativeElement, span);
   }
 }

projects/coreui-angular/src/lib/navbar/navbar.component.html

@@ -1,7 +1,7 @@
-<ng-container *ngTemplateOutlet="container ? withContainerTemplate : noContainerTemplate" />
+<ng-container *ngTemplateOutlet="container() ? withContainerTemplate : noContainerTemplate" />
 
 <ng-template #withContainerTemplate>
-  <div [ngClass]="containerClass">
+  <div [ngClass]="containerClass()">
     <ng-content />
   </div>
 </ng-template>

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

@@ -1,10 +1,22 @@
-import { AfterContentInit, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import {
+  AfterContentInit,
+  afterRender,
+  Component,
+  computed,
+  contentChild,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  signal
+} from '@angular/core';
+import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
 import { CollapseDirective } from '../collapse';
 import { Colors } from '../coreui.types';
 import { ThemeDirective } from '../shared';
+import { Subscription } from 'rxjs';
 
 // todo: fix container prop issue not rendering children
 // todo: workaround -  use <c-container> component directly in template
@@ -15,79 +27,106 @@ import { ThemeDirective } from '../shared';
   standalone: true,
   imports: [NgClass, NgTemplateOutlet],
   hostDirectives: [{ directive: ThemeDirective, inputs: ['colorScheme'] }],
-  host: { class: 'navbar' }
+  host: { '[class]': 'hostClasses()', '[attr.role]': 'role()' }
 })
-export class NavbarComponent implements AfterContentInit {
+export class NavbarComponent implements AfterContentInit, OnDestroy {
+  readonly #breakpointObserver = inject(BreakpointObserver);
+  readonly #document = inject(DOCUMENT);
+  readonly #hostElement = inject(ElementRef);
+
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() color?: Colors;
+  readonly color = input<Colors>();
+
   /**
    * Defines optional container wrapping children elements.
    */
-  @Input() container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
+  readonly container = input<boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>();
+
   /**
    * Defines the responsive breakpoint to determine when content collapses.
    */
-  @Input() expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  readonly expand = input<boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
+
   /**
    * Place component in non-static positions.
    */
-  @Input() placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top';
+  readonly placement = input<'fixed-top' | 'fixed-bottom' | 'sticky-top'>();
 
-  @ContentChild(CollapseDirective) collapse!: CollapseDirective;
+  readonly role = input('navigation');
 
-  @HostBinding('attr.role')
-  @Input()
-  role = 'navigation';
+  readonly collapse = contentChild(CollapseDirective);
 
-  constructor(
-    private hostElement: ElementRef,
-    private breakpointObserver: BreakpointObserver
-  ) {}
-
-  @HostBinding('class')
-  get hostClasses(): any {
-    const expandClassSuffix: string = this.expand === true ? '' : `-${this.expand}`;
+  readonly hostClasses = computed(() => {
+    const color = this.color();
+    const expand = this.expand();
+    const expandClassSuffix: string = expand === true ? '' : `-${expand}`;
+    const placement = this.placement();
     return {
       navbar: true,
-      [`navbar-expand${expandClassSuffix}`]: !!this.expand,
-      [`bg-${this.color}`]: !!this.color,
-      [`${this.placement}`]: !!this.placement
-    };
-  }
+      [`navbar-expand${expandClassSuffix}`]: !!expand,
+      [`bg-${color}`]: !!color,
+      [`${placement}`]: !!placement
+    } as Record<string, boolean>;
+  });
 
-  get containerClass(): string {
-    return `container${this.container !== true ? '-' + this.container : ''}`;
-  }
+  readonly containerClass = computed(() => {
+    const container = this.container();
+    return `container${container !== true ? '-' + container : ''}`;
+  });
 
-  get breakpoint(): string | boolean {
-    if (typeof this.expand === 'string') {
-      return (
-        getComputedStyle(this.hostElement.nativeElement)?.getPropertyValue(`--cui-breakpoint-${this.expand}`) ?? false
-      );
+  readonly computedStyle = signal<string>('');
+
+  readonly afterNextRenderFn = afterRender({
+    read: () => {
+      const expand = this.expand();
+      if (typeof expand === 'string') {
+        const computedStyle =
+          this.#document.defaultView
+            ?.getComputedStyle(this.#hostElement.nativeElement)
+            ?.getPropertyValue(`--cui-breakpoint-${expand}`) ?? false;
+        computedStyle && this.computedStyle.set(computedStyle);
+      }
+    }
+  });
+
+  readonly breakpoint = computed(() => {
+    const expand = this.expand();
+    if (typeof expand === 'string') {
+      return this.computedStyle();
     }
     return false;
-  }
+  });
+
+  #observer!: Subscription;
 
   ngAfterContentInit(): void {
-    if (this.breakpoint) {
-      const onBreakpoint = `(min-width: ${this.breakpoint})`;
-      this.breakpointObserver.observe([onBreakpoint]).subscribe((result) => {
-        if (this.collapse) {
-          const animate = this.collapse.animate;
-          // todo: collapse animate input signal setter
-          this.collapse.animate = false;
-          this.collapse.toggle(false);
-          setTimeout(() => {
-            this.collapse.toggle(result.matches);
+    const breakpoint = this.breakpoint();
+    if (breakpoint) {
+      const onBreakpoint = `(min-width: ${breakpoint})`;
+      this.#observer = this.#breakpointObserver
+        .observe([onBreakpoint])
+        .pipe()
+        .subscribe((result) => {
+          const collapse = this.collapse();
+          if (collapse) {
+            const animate = collapse.animate();
+            collapse.animate.set(false);
+            collapse.toggle(false);
             setTimeout(() => {
-              this.collapse.animate = animate;
+              collapse.toggle(result.matches);
+              setTimeout(() => {
+                collapse.animate.set(animate);
+              });
             });
-          });
-        }
-      });
+          }
+        });
     }
   }
+
+  ngOnDestroy(): void {
+    this.#observer?.unsubscribe();
+  }
 }