Router Link with external + internal links

mnlink.directive.ts

@Directive({
  selector: 'a[mnLink]',
  standalone: true,
  hostDirectives: [
    {
      directive: RouterLink,
      inputs: [
        'queryParams', 'queryParamsHandling', 
        'state', 'fragment', 'target'
      ],
    },
  ],
})
export class MnLink implements OnChanges {
  private renderer = inject(Renderer2);
  private elRef: ElementRef<HTMLAnchorElement> = inject(ElementRef);
  private routerLinkRef = inject(RouterLink);

  @Input() mnLink: string | null | undefined;

  ngOnChanges() {
    if (!this.mnLink) {
      this.routerLinkRef.routerLink = null;
      this.applyAttributeValue('href', null);
      return;
    }

    try {
      const urlObj = new URL(this.mnLink);
      this.applyAttributeValue('href', urlObj.toString());
    } catch {
      this.routerLinkRef.routerLink = this.mnLink;
      this.routerLinkRef.ngOnChanges({});
    }
  }

  private applyAttributeValue(attrName: string, attrValue: string | null) {
    const el = this.elRef.nativeElement;
    if (attrValue !== null) {
      this.renderer.setAttribute(el, attrName, attrValue);
    } else {
      this.renderer.removeAttribute(el, attrName);
    }
  }
}