feat: define interface for annotation rendering components

Author: philenius

projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.components.ts

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { Annotation } from '../../models/annotation.model';
+import { NgxAnnotationRendererComponentInterface } from '../../models/annotation-renderer-component.model';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'ngx-annotation-renderer',
   templateUrl: './annotation-renderer.component.html',
   styleUrls: ['./annotation-renderer.component.css'],
 })
-export class NgxAnnotationRendererComponent {
+export class NgxAnnotationRendererComponent implements NgxAnnotationRendererComponentInterface {
   @Input({ required: true }) annotation!: Annotation;
   @Input() removable = true;
   @Input() clickAnnotation!: (annotation: Annotation) => void;

projects/ngx-annotate-text/src/lib/components/ngx-annotate-text/ngx-annotate-text.component.ts

@@ -13,6 +13,7 @@ import { Annotation } from '../../models/annotation.model';
 import { ISelection } from '../../models/selection.model';
 import { TokenizerService } from '../../services/tokenizer.service';
 import { NgxAnnotationRendererComponent } from '../annotation/annotation-renderer.components';
+import { NgxAnnotationRendererComponentInterface } from '../../models/annotation-renderer-component.model';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -27,7 +28,8 @@ export class NgxAnnotateTextComponent implements OnInit, OnChanges {
   /** An optional CSS class applied to all elements which wrap the annotated parts of the given text. */
   @Input() annotationClass?: string;
 
-  @Input() annotationRenderComponent: Type<any> = NgxAnnotationRendererComponent;
+  /** An optional Angular component that shall be used for rendering the annotation. Must implement the interface NgxAnnotationRendererComponentInterface.  */
+  @Input() annotationRenderComponent: Type<NgxAnnotationRendererComponentInterface> = NgxAnnotationRendererComponent;
 
   /**
    * Determines whether annotations shall have a small button in the top right corner so that the user can

projects/ngx-annotate-text/src/lib/models/annotation-renderer-component.model.ts

@@ -0,0 +1,8 @@
+import { Annotation } from './annotation.model';
+
+export interface NgxAnnotationRendererComponentInterface {
+  annotation: Annotation;
+  removable: boolean;
+  clickAnnotation: (annotation: Annotation) => void;
+  removeAnnotation: (annotation: Annotation) => void;
+}

src/app/app.component.ts

@@ -1,16 +1,16 @@
 import { Component, Type, ViewChild } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import { NgxAnnotateTextModule } from '../../projects/ngx-annotate-text/src/lib/ngx-annotate-text.module';
 import { Annotation, NgxAnnotateTextComponent } from '../../projects/ngx-annotate-text/src/public-api';
 import { MyAnnotationRendererComponent } from './my-annotation-renderer/my-annotation-renderer.component';
 import { NgxAnnotationRendererComponent } from '../../projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.components';
 import { FormsModule } from '@angular/forms';
+import { NgxAnnotationRendererComponentInterface } from '../../projects/ngx-annotate-text/src/lib/models/annotation-renderer-component.model';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NgxAnnotateTextModule, FormsModule],
+  imports: [NgxAnnotateTextModule, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -28,9 +28,12 @@ export class AppComponent {
 
   events: string[] = [];
 
-  rendererComponents: Type<any>[] = [NgxAnnotationRendererComponent, MyAnnotationRendererComponent];
+  rendererComponents: Type<NgxAnnotationRendererComponentInterface>[] = [
+    NgxAnnotationRendererComponent,
+    MyAnnotationRendererComponent,
+  ];
 
-  selectedRendererComponent: Type<any> = NgxAnnotationRendererComponent;
+  selectedRendererComponent: Type<NgxAnnotationRendererComponentInterface> = NgxAnnotationRendererComponent;
 
   text = 'On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.';