Angular 8 - динамически вставить кнопку с обратным вызовом при появлении слова

Question

Я пытаюсь вставить кнопку с настраиваемым обратным вызовом динамически, анализируя текст, который должен отображаться на экране.

Что я хочу сделать, это проанализировать текст и всякий раз, когда я нахожу определенное Вхождение слова (как, например, своего рода тег [innerc][/innerc]) вместо кнопки с onClick вызывает вызываемый обратный вызов.

Теперь, учитывая тот факт, что этот текст не написано пользователем вообще, я имею в виду использование свойства innerHTML и канала для анализа текста по выражениям Regex.

Что-то вроде:

<p [innerHTML]="value | putCallback : callOnClick"></p>

И канал разбирать все и помещать кнопки там, где это необходимо .. что-то вроде:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'putCallback'})
export class PutCallbackPipe implements PipeTransform {
  transform(value: string, callback: (val: string) => void): string {
    if (value.indexOf('[innerc]') != -1) {
      ... Parse the string, put buttons with regex and so on, then return... 
    }
    return value;
  }
}

Поскольку это решение не выглядит мне чистым, я хотел спросить ... Есть ли лучший вариант сделать это, не используя innerHTML?