diff --git a/libs/utils/angular/README.md b/libs/utils/angular/README.md index 5f4ad8056c26f1e083e1ed4fcd0a3b15954b1477..f9dcc70a03ea2b2b5c1a2392ce8a81f192723f86 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 ``. Will expand to `` diff --git a/libs/utils/angular/src/index.ts b/libs/utils/angular/src/index.ts index 1c4bf6fe15079d0410233c1e2b13c1aae5cd342d..944f80560de6f184453f516d63cc9c857c8c5216 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 0000000000000000000000000000000000000000..a0c4805a95a9cd82869605dc2e8458a4012e2e3f --- /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: 'Google' +}) +class TestComponent {} + +describe('ExternalLinkDirective', () => { + describe('driver component', () => { + let fixture: ComponentFixture; + 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 0000000000000000000000000000000000000000..9d371a314fcafe411a7fe975fd39efd12ea78085 --- /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 0000000000000000000000000000000000000000..987b24f4fd69c5e49ccf2bd26a1cc03072bc4f7e --- /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 {}