Markup service.

markup.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MarkupService {

  boldRegex = /\*{2}([\w\s\.\,\;]*)\*{2}/igm;
  italicRegex = /\/{2}([\w\s]*)\/{2}/igm;
  strikeRegex = /\~{2}([\w\s]*)\~{2}/igm;

  constructor() {}

  parseMessage(message) {
    let service = this;
    service.regexes().forEach((element, index) => {
      let found = element.exec(message);
      if(found !== null) {
        message = message.replace(element, function(_match, capture) {
          return service.formatMarkup(capture, index);
        });
      }
    });
    return message;
  }

  regexes() {
    return [this.boldRegex, this.italicRegex, this.strikeRegex];
  }

  formatMarkup(capture, regexIndex) {
    let result;
    switch(regexIndex) { 
      case 0: { 
         //statements; 
         result = '<b>' + capture + '</b>';
         break; 
      } 
      case 1: { 
         result = '<i>' + capture + '</i>';
         break; 
      } 

      case 2: {
        result = '<strike>' + capture + '</strike>';
        break; 
      }
      default: { 
         result = capture
         break; 
      } 
    }
    
    return result;
  }
}

message-list.component.html

<div class="message-list-wrapper">
  <ul class="message-list">
    <li *ngFor="let message of messages; let i = index" >
      {{i + 1}}: <span [innerHTML]="this.parsedMessage(message.text)"></span>
    </li>
  </ul>
</div>

message-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Message } from "../../types";
import { MarkupService } from '../../shared/markup.service';

@Component({
  selector: 'app-message-list',
  templateUrl: './message-list.component.html',
  styleUrls: ['./message-list.component.css'],
  providers: [MarkupService]
})
export class MessageListComponent implements OnInit {
  @Input() messages: Message[];

  constructor(private markupService: MarkupService) {
    // constructor(public chatServie:ChatService) { }
    // messages:Message[] = this.chatService.getMessages();
  }

  ngOnInit() {
  }

  parsedMessage(message) {
    return this.markupService.parseMessage(message);
  }

}

@ovidiubite, 👌