Now that we have the upload image component done, we will complete minor UI changes to the view thread page, which will present the data we have gathered in a better way. Open clientappview-threadview-thread.component.html and update the card, which displays the message as follows:

// SNIPP SNIPP
<div class="card mb-2" *ngFor="let message of thread.messages">
    <div class="row">
        <div class="col-3 card-header">
            <p>Created By: {{message.createdBy.name}}</p>
            <p>Updated At: {{message.lastUpdateAt | date:'medium'}}</p>
            <hr>
            <span class="pointer" (click)="incMessageLikes(message)">
                    <i class="fa fas fa-heart"></i> {{message.likes}}
                  </span>
            <span class="text-danger pointer" *ngIf="auth.getCurrentUser()._id === message.createdBy._id || auth.getCurrentUser().role === 'admin'" (click)="deleteMessage(message)">
                    <i class="fa fas fa-trash"></i> Message
                   </span>
            <br>
            <label class="badge badge-pill badge-info" *ngFor="let l of message.labels">
                 {{l.description}}
            </label>
        </div>
    <div class="col">
        <div class="card-body">
            <p class="card-text" [innerHTML]="sanitizeContent(message.description)"</p>
            <br>
            <div class="table-responsive" *ngIf="message.safeSearchProps">
                 <table class="table table-bordered">
                     <thead class="thead-dark text-center">
                         <tr>
                             <th scope="col">Adult</th>
                             <th scope="col">Medical</th>
                             <th scope="col">Racy</th>
                             <th scope="col">Spoof</th>
                             <th scope="col">Violence</th>
                         </tr>
                    </thead>
                 <tbody>
                     <tr class="text-center">
                         <th>
                             {{message.safeSearchProps.adult}}
                         </th>
                         <th>
                             {{message.safeSearchProps.medical}}
                         </th>
                         <th>
                             {{message.safeSearchProps.racy}}
                         </th>
                         <th>
                             {{message.safeSearchProps.spoof}}
                         </th>
                         <th>
                             {{message.safeSearchProps.violence}}
                         </th>
                       </tr>
                     </tbody>
                   </table>
                 </div>
               </div>
             </div>
           </div>
        </div>
    <br>
// SNIPP SNIPP

In the preceding code snippet, we are displaying the image and its properties in a more presentable format. To complete the component, we will add the sanitizeContent helper to our clientappview-threadview-thread.component.ts:

// SNIPP SNIPP
sanitizeContent(content: string) {
 return this.sanitizer.bypassSecurityTrustHtml(content);
}
// SNIPP SNIPP

Then, update the constructor as follows:

// SNIPP SNIPP
constructor(
 public auth: AuthService,
 public toast: ToastComponent,
 private router: Router,
 private route: ActivatedRoute,
 private formBuilder: FormBuilder,
 private threadService: ThreadService,
 private messageService: MessageService,
 private modal: NgbModal,
 private sanitizer: DomSanitizer
) {}
// SNIPP SNIPP

Follow this by adding the required import:

// SNIPP SNIPP
import { DomSanitizer } from '@angular/platform-browser';
// SNIPP SNIPP

sanitizeContent() will tell the renderer that the content we are trying to inject is safe. You can read more about it here: https://angular.io/guide/security. Save all the files to move on.