frontend-tutorial-framework/src/app/messages/messages.component.ts

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service';

import { Message } from './message';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
  messages: Message[] = [];
  constructor(
    private markdownService: MarkdownService,
    private websocketService: WebSocketService,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  convert(text: string) {
    return this.markdownService.convertToHtml(text);
  }

  ngOnInit() {
    this.websocketService.connect();
    this.websocketService.observeKey<Message>('message').subscribe(
      (event) => {
        this.messages.push(event.data);
        event.data.message = this.convert(event.data.message);
        this.changeDetectorRef.detectChanges();
      }
    );
  }
}