Вставить компонент уже в прогруженную страницу через jquery Angular

Всем привет. Такая задача, на сервер отправляется формы изменения пароля, приходят 2-а вида сообщений, в колбэк функции они обрабатываются.

public callback(data)
{
    if (data.success) {
        $("#changePasswordBtn").after(`<alert-suc [message]="'${data.message}'"></alert-suc>`);
    }
    else
    {
        $("#changePasswordBtn").after(`<alert-fail [message]="'${data.message}'"></alert-fail>`);
    }
    
    console.log(data);
}

Здесь я пытаюсь вставить после кнопки селектр компонента <alert-fail> либо <alert-suc> и передать в него параметр с сообщением. Однако после вставки элемент не рендерится.

Вот сам компонент который вставляется ts:

    import { Component, Input } from "@angular/core";

@Component({
    selector: 'alert-fail',
    templateUrl: 'failAlert.component.html'
})

export class FailAlertComponent
{
    @Input() message: string = "";
}

html:

<div class="alert alert-danger mt-1 py-1" role="alert">
    {{message}}
  </div>

Вот скриншот результата:

1. Стрелка сверху - как оно вставилось
2. Стрелка снизу - как оно должно быть, этот элемент я поместил в html код заранее.