Bugfix: router link blank and router link

Author: djuarezgf

CHANGELOG.md

@@ -4,7 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.0] - 2023-11-14
+## [1.0.1] - 2023-12-13
+### Fixed
+- Router link blank and router link
+
+## [1.0.0] - 2023-12-13
 ### Added
 - Init project
 - Prototype

src/app/app.module.ts

@@ -45,6 +45,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
 import {MatNativeDateModule} from "@angular/material/core";
 import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {ExternalLinkBlankDirective} from "./external-link-blank.directive";
 
 @NgModule({
   declarations: [
@@ -53,6 +54,7 @@ import {MatButtonToggleModule} from "@angular/material/button-toggle";
     SidebarComponent,
     TeilerAppPluginOrchestratorComponent,
     ExternalLinkDirective,
+    ExternalLinkBlankDirective,
     TeilerBoxComponent,
     TeilerWelcomeComponent
   ],

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

@@ -0,0 +1,9 @@
+import { ExternalLinkBlankDirective } from './external-link-blank.directive';
+
+describe('ExternalLinkBlankDirective', () => {
+  it('should create an instance', () => {
+    //TODO
+    //const directive = new ExternalLinkBlankDirective();
+    //expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import {Directive, Input} from '@angular/core';
+import {RouterLink} from "@angular/router";
+
+@Directive({
+  selector: '[externalLinkBlank]'
+})
+export class ExternalLinkBlankDirective {
+
+  @Input('externalLinkBlank') externalLink: string = '';
+
+  constructor(private routerLinkWithHref: RouterLink) {
+    routerLinkWithHref.onClick = () => {
+      if (this.externalLink != null && this.externalLink != undefined && this.externalLink.length > 0) {
+        window.open(this.externalLink, '_blank');
+        return false;
+      }
+      return true;
+    };
+  }
+
+
+}

src/app/external-link.directive.ts

@@ -11,7 +11,7 @@ export class ExternalLinkDirective {
   constructor(private routerLinkWithHref: RouterLink) {
     routerLinkWithHref.onClick = () => {
       if (this.externalLink != null && this.externalLink != undefined && this.externalLink.length > 0) {
-        window.open(this.externalLink, '_blank');
+        window.location.href=this.externalLink;
         return false;
       }
       return true;

src/app/sidebar/sidebar.component.html

@@ -50,7 +50,7 @@
                   </div>
                 </ng-template>
                 <a mat-list-item routerLink="{{'/'+teilerApp.routerLink}}"
-                   [externalLink]="teilerApp.sourceUrl??''" class="sidebar-text">{{teilerApp.title}}</a>
+                   [externalLinkBlank]="teilerApp.sourceUrl??''" class="sidebar-text">{{teilerApp.title}}</a>
               </div>
             </div>
           </div>
@@ -593,4 +593,3 @@
     </div>
   </div>
 </div>
-

src/app/teiler-main-menu/teiler-main-menu.component.html

@@ -28,7 +28,7 @@
                       </a>
                     </div>
                     <div *ngIf="teilerApp.externLink">
-                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLink]="teilerApp.sourceUrl??''">
+                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLinkBlank]="teilerApp.sourceUrl??''">
                         <teiler-box [teilerApp]="teilerApp"></teiler-box>
                       </a>
                     </div>
@@ -48,7 +48,7 @@
                       </a>
                     </div>
                     <div *ngIf="teilerApp.externLink">
-                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLink]="teilerApp.sourceUrl??''">
+                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLinkBlank]="teilerApp.sourceUrl??''">
                         <teiler-box [teilerApp]="teilerApp"></teiler-box>
                       </a>
                     </div>
@@ -75,7 +75,7 @@ <h3 i18n>Lokale Apps</h3>
                       </a>
                     </div>
                     <div *ngIf="teilerApp.externLink">
-                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLink]="teilerApp.sourceUrl??''">
+                      <a routerLink="{{'/'+teilerApp.routerLink}}" [externalLinkBlank]="teilerApp.sourceUrl??''">
                         <teiler-box [teilerApp]="teilerApp"></teiler-box>
                       </a>
                     </div>