docs(docs-infra): add rel="noopener" to external links with target="_blank" in ExternalLink directive (angular#64276)

PR Close angular#64276

Author: MeAkib

adev/shared-docs/directives/external-link/external-link.directive.spec.ts

@@ -41,35 +41,42 @@ describe('ExternalLink', () => {
       By.css('a[href="https://stackoverflow.com/questions/tagged/angular"]'),
     );
     expect(externalLink.attributes['target']).toEqual('_blank');
+    expect(externalLink.attributes['rel']).toEqual('noopener');
   });
 
   it('should not internal link have target=_blank attribute', () => {
     const internalLink = fixture.debugElement.query(By.css('a[href="/roadmap"]'));
     expect(internalLink.attributes['target']).toBeFalsy();
+    expect(internalLink.attributes['rel']).toBeFalsy();
   });
 
   it('should not set target=_blank attribute external link when anchor has got noBlankForExternalLink attribute', () => {
     const externalLink = fixture.debugElement.query(
       By.css('a[href="https://github.com/angular/angular/issues"]'),
     );
     expect(externalLink.attributes['target']).toBeFalsy();
+    expect(externalLink.attributes['rel']).toBeFalsy();
   });
 });
 
 @Component({
   template: `
     <a
+      class="external"
       href="https://stackoverflow.com/questions/tagged/angular"
       title="Stack Overflow: where the community answers your technical Angular questions."
     >
       Stack Overflow
     </a>
-    <a routerLink="/roadmap" title="Roadmap">Roadmap</a>
+    <a class="internal" routerLink="/roadmap" title="Roadmap">Roadmap</a>
     <a
+      class="optout"
       href="https://github.com/angular/angular/issues"
       title="Post issues and suggestions on github"
       noBlankForExternalLink
-    ></a>
+    >
+      GitHub Issues
+    </a>
   `,
   imports: [ExternalLink, RouterLink],
 })

adev/shared-docs/directives/external-link/external-link.directive.ts

@@ -18,13 +18,15 @@ import {isExternalLink} from '../../utils/index';
   selector: 'a[href]:not([noBlankForExternalLink])',
   host: {
     '[attr.target]': 'target',
+    '[attr.rel]': 'rel',
   },
 })
 export class ExternalLink {
   private readonly anchor: ElementRef<HTMLAnchorElement> = inject(ElementRef);
   private readonly platformId = inject(PLATFORM_ID);
 
   target?: '_blank' | '_self' | '_parent' | '_top' | '';
+  rel?: string;
 
   constructor() {
     this.setAnchorTarget();
@@ -37,6 +39,7 @@ export class ExternalLink {
 
     if (isExternalLink(this.anchor.nativeElement.href)) {
       this.target = '_blank';
+      this.rel = 'noopener';
     }
   }
 }