feat(directive): signal compatible

Author: rbalet

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-href",
-  "version": "19.0.1",
+  "version": "19.1.0",
   "license": "MIT",
   "author": "Raphael Balet",
   "maintainers": [

projects/ngx-href/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-href",
-  "version": "19.0.1",
+  "version": "19.1.0",
   "license": "MIT",
   "author": {
     "name": "Raphaël Balet",

projects/ngx-href/src/lib/href.directive.ts

@@ -1,24 +1,30 @@
-import { Directive, ElementRef, HostBinding, HostListener, Input, OnDestroy } from '@angular/core'
+import { Directive, ElementRef, HostListener, Input, OnDestroy, signal } from '@angular/core'
 import { Router } from '@angular/router'
 import { NgxHrefService } from './href.service'
 
 @Directive({
   standalone: true,
   selector: 'a[href], button[href]',
+  host: {
+    '[attr.rel]': 'rel$()',
+    '[attr.target]': 'target$()',
+    '[attr.href]': 'href$()',
+  },
 })
 export class NgxHrefDirective implements OnDestroy {
   private _tagName: 'BUTTON' | 'A' = this._elementRef.nativeElement.tagName
 
-  @HostBinding('attr.rel') relAttr?: string
-  @HostBinding('attr.target') targetAttr?: string
-  @HostBinding('attr.href') hrefAttr: string | null = ''
+  rel$ = signal<string>('')
+  target$ = signal<string>('')
+  href$ = signal<string | null>('')
 
   @HostListener('click', ['$event']) onClick(event: PointerEvent) {
-    if (!this.hrefAttr || !this._routeOnClick) return
+    if (!this.href$() || !this._routeOnClick) return
 
     event.preventDefault()
 
-    const fragments = this.hrefAttr.split('#')
+    const fragments = this.href$()?.split('#')
+    if (!fragments) return
 
     if (fragments.length >= 2) {
       const urlFragments = this._router.url.split('#')
@@ -35,19 +41,19 @@ export class NgxHrefDirective implements OnDestroy {
   }
 
   @Input() set rel(value: string) {
-    this.relAttr = value
+    this.rel$.set(value)
   }
   @Input() set target(value: string) {
-    this.targetAttr = value
+    this.target$.set(value)
   }
   @Input() set href(value: string) {
     if (!value) {
-      this.hrefAttr = null
+      this.href$.set(null)
       return
     }
 
     try {
-      this.hrefAttr = value?.replace(/ /g, '') || ''
+      this.href$.set(value?.replace(/ /g, '') || '')
     } catch (error) {
       console.error('ngx-href: Expecting a string', '\n', error)
     }
@@ -63,7 +69,7 @@ export class NgxHrefDirective implements OnDestroy {
     }
   }
 
-  private _hrefAttr?: string // spam protection
+  private _hrefAttr?: string | null // spam protection
   private _mouseenterListener: any = null // EventListener | null
   private _clickListener: any = null // EventListener | null
   private _routeOnClick = false
@@ -75,15 +81,15 @@ export class NgxHrefDirective implements OnDestroy {
   ) {}
 
   private _isLinkMailOrPhone(): boolean {
-    if (this.hrefAttr?.startsWith('mailto') || this.hrefAttr?.startsWith('tel')) {
+    if (this.href$()?.startsWith('mailto') || this.href$()?.startsWith('tel')) {
       if (this._ngxHrefService.avoidSpam) {
-        this._hrefAttr = this.hrefAttr
+        this._hrefAttr = this.href$()
 
-        if (this.hrefAttr?.startsWith('mailto')) this.hrefAttr = 'mailto:obfuscated'
-        else this.hrefAttr = 'tel:obfuscated'
+        if (this.href$()?.startsWith('mailto')) this.href$.set('mailto:obfuscated')
+        else this.href$.set('tel:obfuscated')
 
         this._mouseenterListener = () => {
-          if (this._hrefAttr) this.hrefAttr = this._hrefAttr
+          if (this._hrefAttr) this.href$.set(this._hrefAttr)
         }
 
         this._elementRef.nativeElement.addEventListener('mouseenter', this._mouseenterListener)
@@ -97,32 +103,32 @@ export class NgxHrefDirective implements OnDestroy {
   }
 
   private _isLinkExternal(): boolean {
-    return this.hrefAttr?.startsWith('http') ? true : false
+    return this.href$()?.startsWith('http') ? true : false
   }
   private _prepareOpenLink() {
-    if (!this.relAttr && this._ngxHrefService.defaultRelAttr)
-      this.relAttr = this._ngxHrefService.defaultRelAttr
-    if (!this.targetAttr) this.targetAttr = this._ngxHrefService.defaultTargetAttr
+    if (!this.rel$() && this._ngxHrefService.defaultRelAttr)
+      this.rel$.set(this._ngxHrefService.defaultRelAttr)
+    if (!this.target$()) this.target$.set(this._ngxHrefService.defaultTargetAttr)
 
     this._clickListener = (event: PointerEvent) => {
       event.preventDefault()
 
-      const hrefAttr = this._hrefAttr || this.hrefAttr
-      if (hrefAttr) window.open(hrefAttr, this.targetAttr, this.relAttr)
+      const hrefAttr = this._hrefAttr || this.href$()
+      if (hrefAttr) window.open(hrefAttr, this.target$(), this.rel$())
     }
 
     this._elementRef.nativeElement.addEventListener('click', this._clickListener)
   }
 
   private _isSamePageLink(): boolean {
-    return this.hrefAttr && this.hrefAttr[0] === '#' ? true : false
+    return this.href$() && (this.href$() as any)[0] === '#' ? true : false
   }
 
   private _prepareScrollToLink() {
     this._clickListener = (event: PointerEvent) => {
       event.preventDefault()
 
-      if (this.hrefAttr) this._ngxHrefService.scrollTo(this.hrefAttr.substring(1))
+      if (this.href$()) this._ngxHrefService.scrollTo(this.href$()?.substring(1))
     }
 
     this._elementRef.nativeElement.addEventListener('click', this._clickListener)