Angular: (click) не работает внутри appendTo()

У меня есть цикл по добавлению кнопок, при нажатии на кнопку, вызывается функция doActionRibb('color') которая меняет цвет элементов. Все прекрасно работало в django templates(вместо (click) нужно написать onClick), однако перенося проект на Angular, не получается вызвать функцию с помощью нажатия на кнопку. Как я предполагаю, надо сам html код скомпилировать перед тем, как вставить в body(такие решения на AngularJS, однако у меня просто Angular 7). Собственно вопрос: как безболезненно заставить работать это дело?

    for (let i = 0; i < 48; i++) {

        const tmpColor = RibbonsComponent.getRandomColor();
        $('<div class="col-md-1">\n' +
            '    <div class="thumbnail">\n' +
            '         <a class="">\n' +
            '            <div class="caption">\n' +
            '                </div>\n' +
            '            <button style="border-radius: 50%;' +
            ' width: 50px; height: 50px; background-color: ' + tmpColor +
            ';"  (click)="doActionRibb(\'' + tmpColor + '\')"></button><p></p>\n' +
            '             </a>\n' +
            '        </div>\n' +
            '\t\t</div>').appendTo('#ContentRibb');
    }