From 4ce1ec063449c5362bf776caa800e6f33d26b3ff Mon Sep 17 00:00:00 2001
From: Ryan Diehl <rpd10@psu.edu>
Date: Wed, 10 Jun 2020 09:48:33 -0400
Subject: [PATCH] feat: add external-link directive

---
 libs/utils/angular/README.md                  |  4 ++
 libs/utils/angular/src/index.ts               |  2 +
 .../external-link.directive.spec.ts           | 39 +++++++++++++++++++
 .../external-link/external-link.directive.ts  | 13 +++++++
 .../lib/external-link/external-link.module.ts | 10 +++++
 5 files changed, 68 insertions(+)
 create mode 100644 libs/utils/angular/src/lib/external-link/external-link.directive.spec.ts
 create mode 100644 libs/utils/angular/src/lib/external-link/external-link.directive.ts
 create mode 100644 libs/utils/angular/src/lib/external-link/external-link.module.ts

diff --git a/libs/utils/angular/README.md b/libs/utils/angular/README.md
index 5f4ad80..f9dcc70 100644
--- a/libs/utils/angular/README.md
+++ b/libs/utils/angular/README.md
@@ -30,3 +30,7 @@ let obj = {
 ```
 
 ## yes-no pipe
+
+## external-link directive
+
+Usage `<a utExternalLink href="">`. Will expand to `<a utExternalLink target="_blank" rel="noopener noreferrer" href="">`
diff --git a/libs/utils/angular/src/index.ts b/libs/utils/angular/src/index.ts
index 1c4bf6f..944f805 100644
--- a/libs/utils/angular/src/index.ts
+++ b/libs/utils/angular/src/index.ts
@@ -3,6 +3,8 @@ export * from './lib/before-unload/before-unload.module';
 export * from './lib/caps-lock/caps-lock.directive';
 export * from './lib/caps-lock/caps-lock.module';
 export * from './lib/coalescing-component-factory-resolver/coalescing-component-factory.resolver';
+export * from './lib/external-link/external-link.directive';
+export * from './lib/external-link/external-link.module';
 export * from './lib/ng-let/ng-let.directive';
 export * from './lib/ng-let/ng-let.module';
 export * from './lib/safe-pipe/safe-pipe.module';
diff --git a/libs/utils/angular/src/lib/external-link/external-link.directive.spec.ts b/libs/utils/angular/src/lib/external-link/external-link.directive.spec.ts
new file mode 100644
index 0000000..a0c4805
--- /dev/null
+++ b/libs/utils/angular/src/lib/external-link/external-link.directive.spec.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ExternalLinkDirective } from './external-link.directive';
+
+@Component({
+  template: '<a utExternalLink href="https://google.com">Google</a>'
+})
+class TestComponent {}
+
+describe('ExternalLinkDirective', () => {
+  describe('driver component', () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let component: TestComponent;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestComponent, ExternalLinkDirective]
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TestComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('should create driver component', () => {
+      expect(component).toBeDefined();
+    });
+
+    it('should add target and rel attributes', () => {
+      const el = fixture.debugElement.query(By.directive(ExternalLinkDirective));
+      expect(el.componentInstance).toBeDefined();
+      expect(el.attributes['target']).toEqual('_blank');
+      expect(el.attributes['rel']).toEqual('noopener noreferrer');
+    });
+  });
+});
diff --git a/libs/utils/angular/src/lib/external-link/external-link.directive.ts b/libs/utils/angular/src/lib/external-link/external-link.directive.ts
new file mode 100644
index 0000000..9d371a3
--- /dev/null
+++ b/libs/utils/angular/src/lib/external-link/external-link.directive.ts
@@ -0,0 +1,13 @@
+import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[utExternalLink]'
+})
+export class ExternalLinkDirective implements OnInit {
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  public ngOnInit(): void {
+    this.renderer.setAttribute(this.el.nativeElement, 'target', '_blank');
+    this.renderer.setAttribute(this.el.nativeElement, 'rel', 'noopener noreferrer');
+  }
+}
diff --git a/libs/utils/angular/src/lib/external-link/external-link.module.ts b/libs/utils/angular/src/lib/external-link/external-link.module.ts
new file mode 100644
index 0000000..987b24f
--- /dev/null
+++ b/libs/utils/angular/src/lib/external-link/external-link.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ExternalLinkDirective } from './external-link.directive';
+
+@NgModule({
+  declarations: [ExternalLinkDirective],
+  imports: [CommonModule],
+  exports: [ExternalLinkDirective]
+})
+export class ExternalLinkModule {}
-- 
GitLab