Create Dynamic Plugin elements on page

@TrevorNWatson wrote:

Hello,

We have been tasked with creating a plugin system for one of the apps we are working on written using @ionic/angular 4.2.0 .

As part of the UI, we need to inject web components written by the plugin developers. I’ve managed so far, to create a dynamic JavaScript loader that allows us to, per component, dynamically load the javascript files that contain the plugins.

This allows me to use the custom element tags directly in our templates e.g.
<fancy-button [(productId)]=“1”>

We’d like to create the elements dynamically on the page if possible (have a tag that is an “injection point”)

However, I can’t figure out how to create the components and bind the data to them.

I was attempting to use ViewChild to append elements, but this wasn’t working,

My second attempt was to use getElementById and use the innerHTML on a div, but this didn’t work either.

  const ComponentList = ['fancy-counter'];
  const container: HTMLElement = document.getElementById('sales-channel-entry-point');
  const elementString: string[] = [];
  for (let i = 0; i < ComponentList.length; i++) {
    elementString.push(`<${ComponentList[i]}></${ComponentList[i]}>`);
  }
  this.innerHtmlVar = elementString.join();
  console.log(this.innerHtmlVar);


<div [innerHTML]="innerHtmlVar"></div> 

Is this possible in the ionic framework?

Thanks in advance,

Trevor

Posts: 1

Participants: 1

Read full topic