refactor(html-attr.directive): signal input, cleanup

Author: xidedix

projects/coreui-angular/src/lib/shared/html-attr.directive.spec.ts

@@ -1,47 +1,50 @@
-import { Component, DebugElement, Renderer2, Type } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { HtmlAttributesDirective } from './html-attr.directive';
 
 @Component({
-  template: `<div [cHtmlAttr]="{class: 'test', style: {backgroundColor: 'red'}, id: 'id-1'}"></div>`
+  template: `<div [cHtmlAttr]="{ class: 'test', style: { backgroundColor: 'red' }, id: 'id-1' }"></div>`
 })
 class TestComponent {}
 
-describe('HtmlAttributesDirective', () => {
+class MockElementRef extends ElementRef {}
 
+describe('HtmlAttributesDirective', () => {
   let fixture: ComponentFixture<TestComponent>;
-  let inputEl: DebugElement;
-  let renderer: Renderer2;
+  let debugElement: DebugElement;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestComponent],
-      imports: [HtmlAttributesDirective]
+      imports: [HtmlAttributesDirective],
+      providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }]
     });
     fixture = TestBed.createComponent(TestComponent);
-    inputEl = fixture.debugElement.query(By.css('div'));
-    renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
+    debugElement = fixture.debugElement.query(By.css('div'));
   });
 
   it('should create an instance', () => {
-    const directive = new HtmlAttributesDirective(renderer, inputEl);
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new HtmlAttributesDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 
   it('should render a class attr', () => {
     fixture.detectChanges();
-    expect(inputEl.nativeElement).toHaveClass('test');
+    expect(debugElement.nativeElement).toHaveClass('test');
   });
 
   it('should render a style attr', () => {
     fixture.detectChanges();
-    expect(inputEl.nativeElement.style.backgroundColor).toBe('red');
+    // console.log(inputEl.nativeElement.style.backgroundColor);
+    expect(debugElement.nativeElement.style.backgroundColor).toBe('red');
   });
 
   it('should render an id attr', () => {
     fixture.detectChanges();
-    expect(inputEl.nativeElement.getAttribute('id')).toBe('id-1');
+    expect(debugElement.nativeElement.getAttribute('id')).toBe('id-1');
   });
 });

projects/coreui-angular/src/lib/shared/html-attr.directive.ts

@@ -1,20 +1,18 @@
-import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
 
 @Directive({
   selector: '[cHtmlAttr]',
   exportAs: 'cHtmlAttr',
   standalone: true
 })
-export class HtmlAttributesDirective implements OnInit {
-  @Input() cHtmlAttr?: { [key: string]: any };
+export class HtmlAttributesDirective {
+  readonly cHtmlAttr = input<Record<string, any>>();
 
-  constructor(
-    private renderer: Renderer2,
-    private el: ElementRef
-  ) {}
+  readonly #renderer = inject(Renderer2);
+  readonly #elementRef = inject(ElementRef);
 
-  ngOnInit(): void {
-    const attribs = this.cHtmlAttr;
+  readonly attrEffect = effect(() => {
+    const attribs = this.cHtmlAttr();
     for (const attr in attribs) {
       if (attr === 'style' && typeof attribs[attr] === 'object') {
         this.setStyle(attribs[attr]);
@@ -24,12 +22,12 @@ export class HtmlAttributesDirective implements OnInit {
         this.setAttrib(attr, attribs[attr]);
       }
     }
-  }
+  });
 
-  private setStyle(styles: { [x: string]: any }): void {
+  private setStyle(styles: Record<string, any>): void {
     for (const style in styles) {
       if (style) {
-        this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
+        this.#renderer.setStyle(this.#elementRef.nativeElement, style, styles[style]);
       }
     }
   }
@@ -39,13 +37,13 @@ export class HtmlAttributesDirective implements OnInit {
     classArray
       .filter((element) => element.length > 0)
       .forEach((element) => {
-        this.renderer.addClass(this.el.nativeElement, element);
+        this.#renderer.addClass(this.#elementRef.nativeElement, element);
       });
   }
 
   private setAttrib(key: string, value: string | null): void {
     value !== null
-      ? this.renderer.setAttribute(this.el.nativeElement, key, value)
-      : this.renderer.removeAttribute(this.el.nativeElement, key);
+      ? this.#renderer.setAttribute(this.#elementRef.nativeElement, key, value)
+      : this.#renderer.removeAttribute(this.#elementRef.nativeElement, key);
   }
 }