Ionic 4 - how to dynamically add component to page?

Question

I have my component ready to use this way in HTML:

<pop-product></pop-product>

But I need to add it dynamically in a function, something like:

async openPopProduct(){
  // append component to html body
  // add data into it
}

async closePopProduct(){
  // remove component from html
}

How can I do that?

Answer 1

One of the options is using *ngIf.

example.html

<pop-product *ngIf="showComponent"></pop-product>

example.ts

showComponent: boolean = false;

async openPopProduct(){
  this.showComponent = true;
  // add data into it
}

async closePopProduct(){
  // remove component from HTML
  this.showComponent = false;
}