add new highlight

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html

@@ -36,6 +36,7 @@
           <mat-divider></mat-divider>
           <app-topic-dialog-comment
           [question]="question"
+          [keyword] ="keyword.keyword"
           [maxShowedCharachters] = "140"
           [isCollapsed] = "!panelOpenState"
           ></app-topic-dialog-comment>

src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.html

 <div>
   <p>
     {{(isCollapsed) ? question : question | slice:0:maxShowedCharachters}}{{question.length > maxShowedCharachters && !isCollapsed? "..." : ""}}
-    <button  *ngIf = "question.length > maxShowedCharachters" 
+    <span *ngFor="let part Of partsOfQuestion; let i = index">
+      {{part}}
+      <span   *ngIf="i < partsOfQuestion.length -1"><mark id="myMark">{{keyword}}</mark></span>
+    </span>
+    <button  *ngIf = "question.length > maxShowedCharachters"
            (click)="isCollapsed = !isCollapsed">
            {{ "dialog-comment.read-" + (!isCollapsed ? 'more': 'less') | translate }}
     </button>
   </p>
-</div>
\ No newline at end of file
+</div>

src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts

@@ -8,10 +8,17 @@ import { Component, Input, OnInit } from '@angular/core';
 export class TopicDialogCommentComponent implements OnInit {
 
   @Input() question: string;
+  @Input() keyword: string ;
   @Input() maxShowedCharachters: number;
   @Input() isCollapsed: boolean = false;
   constructor() { }
 
+  get partsOfQuestion(){
+
+    return this.question.slice(0,this.isCollapsed? this.question.length: this.maxShowedCharachters).split(this.keyword) ;
+
+  }
+
   ngOnInit(): void {
   }
 }