Add external link directive to easily set required attributes

src/app/directives/external-link.directive.spec.ts

@@ -0,0 +1,19 @@
+import { ElementRef } from '@angular/core';
+import { ExternalLinkDirective } from './external-link.directive';
+
+describe('ExternalLinkDirective', () => {
+  let element: ElementRef;
+
+  beforeEach(() => {
+    element = {
+      nativeElement: jasmine.createSpyObj('nativeElement', ['setAttribute']),
+    };
+  });
+
+  it('should set required attributes on element', () => {
+    const directive = new ExternalLinkDirective(element);
+    expect(directive).toBeTruthy();
+    expect(element.nativeElement.setAttribute).toHaveBeenCalledWith('target', '_blank');
+    expect(element.nativeElement.setAttribute).toHaveBeenCalledWith('rel', 'noreferrer');
+  });
+});

src/app/directives/external-link.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[tce-external-link]',
+  standalone: true,
+})
+export class ExternalLinkDirective {
+  constructor(private element: ElementRef) {
+    this.element.nativeElement.setAttribute('target', '_blank');
+    this.element.nativeElement.setAttribute('rel', 'noreferrer');
+  }
+}