Adding component via TypeScript in Angular dynamically

I searched the internet for a solution but I can't find one, either because some functions are deprecated or do not exist. I'm trying to automatically output dynamic text inside of a component, but I can't figure it out.

The component in question is structured like this:

@Component({
selector: 'app-chat-bubble',
standalone: true,
imports: [],
templateUrl: './chat-bubble.component.html',
styleUrl: './chat-bubble.component.scss'
})
export class ChatBubbleComponent{
text: string = '';
@HostBinding("class") @Input() textType: 'send' | 'receive' = 'send';
}


It's very simple. Now I want to create this chat-bubble component inside this component dynamically:

@Component({
selector: 'app-chatbot',
standalone: true,
imports: [ContentCardComponent, ButtonComponent, InputSelectComponent, ReactiveFormsModule, ChatBubbleComponent],
templateUrl: './chatbot.component.html',
styleUrl: './chatbot.component.scss'
})
export class ChatbotComponent{
options = new FormGroup({
'style': new FormControl('short'),
'model': new FormControl('open-ai'),
'argument': new FormControl('delibere'),
})

chat = new FormGroup({
'message': new FormControl('')
})

onSubmitOptions() {
console.log(this.options.value);
}

onSubmitChat() {
console.log(this.chat.value);
}
}


"message" should be the message that will be displayed in the text property of the chat-bubble. I'm not gonna share the html for the last component because it's too long but just imagine there's a div and I want to put the chat bubbles inside that div. Thank you in advance

Continue reading...