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

You need to sign in to view this answers

Related Post