CODEWITHSUNDEEP
angularionic-frameworkionic4
anderlaini
anderlaini

Reputation: 1821

Ionic 4 - how to dynamically add component to page?

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?

Upvotes: 0

Views: 127

Answers (1)

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3128

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;
}

Upvotes: 1

Related Questions