5 files changed, 41 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 8ea47bb33..069b7f654 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -3,5 +3,6 @@ export * from './bytes.pipe'
 export * from './duration-formatter.pipe'
 export * from './from-now.pipe'
 export * from './infinite-scroller.directive'
+export * from './link.component'
 export * from './number-formatter.pipe'
 export * from './peertube-template.directive'
diff --git a/client/src/app/shared/shared-main/angular/link.component.html b/client/src/app/shared/shared-main/angular/link.component.html
new file mode 100644
index 000000000..e61a1e085
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/link.component.html
@@ -0,0 +1,11 @@
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
+<a *ngIf="!href" [routerLink]="internalLink" [attr.title]="title" [tabindex]="tabindex">
+  <ng-template *ngTemplateOutlet="content"></ng-template>
+</a>
+
+<a *ngIf="href" [href]="href" [target]="target" [attr.title]="title" [tabindex]="tabindex">
+  <ng-template *ngTemplateOutlet="content"></ng-template>
+</a>
diff --git a/client/src/app/shared/shared-main/angular/link.component.scss b/client/src/app/shared/shared-main/angular/link.component.scss
new file mode 100644
index 000000000..bb86d5488
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/link.component.scss
@@ -0,0 +1,7 @@
+a {
+  color: inherit;
+  text-decoration: inherit;
+  position: inherit;
+  width: inherit;
+  height: inherit;
+}
diff --git a/client/src/app/shared/shared-main/angular/link.component.ts b/client/src/app/shared/shared-main/angular/link.component.ts
new file mode 100644
index 000000000..76d1201b9
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/link.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core'
+
+@Component({
+  selector: 'my-link',
+  styleUrls: [ './link.component.scss' ],
+  templateUrl: './link.component.html'
+})
+export class LinkComponent {
+  @Input() internalLink?: any[]
+
+  @Input() href?: string
+  @Input() target?: string
+
+  @Input() title?: string
+
+  @Input() tabindex: string | number
+}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index c8dd01429..e5dfc59b2 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -4,7 +4,7 @@ import { CommonModule, DatePipe } from '@angular/common'
 import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRouteSnapshot, RouterModule } from '@angular/router'
+import { RouterModule } from '@angular/router'
 import {
   NgbButtonsModule,
   NgbCollapseModule,
@@ -24,6 +24,7 @@ import {
   DurationFormatterPipe,
   FromNowPipe,
   InfiniteScrollerDirective,
+  LinkComponent,
   NumberFormatterPipe,
   PeerTubeTemplateDirective
 } from './angular'
@@ -35,11 +36,11 @@ import { FeedComponent } from './feeds'
 import { LoaderComponent, SmallLoaderComponent } from './loaders'
 import { HelpComponent, ListOverflowComponent, SimpleSearchInputComponent, TopMenuDropdownComponent } from './misc'
 import { PluginPlaceholderComponent } from './plugins'
+import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
-import { ActorRedirectGuard } from './router'
 
 @NgModule({
   imports: [
@@ -76,6 +77,7 @@ import { ActorRedirectGuard } from './router'
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
+    LinkComponent,
 
     ActionDropdownComponent,
     ButtonComponent,
@@ -130,6 +132,7 @@ import { ActorRedirectGuard } from './router'
 
     InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
+    LinkComponent,
 
     ActionDropdownComponent,
     ButtonComponent,