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.