3 files changed, 27 insertions, 3 deletions

diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts
index f36dab624..f45ed9b73 100644
--- a/client/src/app/shared/shared-main/plugins/index.ts
+++ b/client/src/app/shared/shared-main/plugins/index.ts
@@ -1 +1,2 @@
 export * from './plugin-placeholder.component'
+export * from './plugin-selector.directive'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts
new file mode 100644
index 000000000..576569f19
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts
@@ -0,0 +1,21 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'
+import { PluginSelectorId } from '@shared/models'
+
+@Directive({ selector: '[myPluginSelector]' })
+export class PluginSelectorDirective implements OnInit {
+  @Input() pluginSelectorId: PluginSelectorId
+
+  constructor (
+    private renderer: Renderer2,
+    private hostElement: ElementRef<HTMLElement>
+  ) {
+
+  }
+
+  ngOnInit () {
+    const id = this.hostElement.nativeElement.getAttribute('id')
+    if (id) throw new Error('Cannot set id on element that already has an id')
+
+    this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`)
+  }
+}
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 a90b59e41..10fc364b3 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -41,7 +41,7 @@ import {
   SimpleSearchInputComponent,
   TopMenuDropdownComponent
 } from './misc'
-import { PluginPlaceholderComponent } from './plugins'
+import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
 import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
@@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel'
 
     EmbedComponent,
 
-    PluginPlaceholderComponent
+    PluginPlaceholderComponent,
+    PluginSelectorDirective
   ],
 
   exports: [
@@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel'
 
     EmbedComponent,
 
-    PluginPlaceholderComponent
+    PluginPlaceholderComponent,
+    PluginSelectorDirective
   ],
 
   providers: [