2.4 | FAQs

Owned by Edwin Gamboa
Last updated: Aug 02, 2017 by Judit Ross
1 min read

2.4 | FAQ: How to manually resolve dependency conflicts?

Let's suppose that the third-party-lib@1.0/awesome-lib-util dependency is causing the conflict. To solve dependency conflicts you can exclude or replace the dependency which is causing the conflict, as follows:

Using the TAG API (Only for the component)

As mentioned above, on way to solve this issue is by excluding this dependency, to aim that you should use the cubx-dependency-excludes and the cubx-dependency-exclude tags as follows:

2.4 | How to create a component instance dynamically?

To create and then add a component instance dynamically you should take following things into account:

  1. You should add the dependency of the desired component to the rootDependencies
  2. Create the component using the document API method createElement()

2.4 | How to create nested component instances dynamically within elementary Cubbles components

As you may know, elementary components have an associated logic. This logic is a script where you can interact with the component. Additionally, you can add nested component instances within your elementary. To aim that you should:

  1. Create the desired component tag using the document.createElement method

2.4 | How to render HTML Markup coming from input slot?

When you want to render HTML markup code that comes from an input slot, you should use innerHTML. In the logic of your elementary component, you should use model<SlotId>Chaged method to then set the innerHTML property to the desired element. Let's say you have have a component with a string input slot called html, and you want to render this html code within a div whose id is container. To aim this, code may look as follows:

2.4 | How to replace a dependency when declaring a component instance?

In some cases ...

2.4 | How to synchronize multiple data flows between component instances?

Sometimes you will need to synchronize the dataflow in compound component. Let's say you have a component similar to the data-compound presented below:

Let's say you need both data1 and data2 slots form dataProcessor member to be ready for the processedData slot to be set. As you can notice, it is not possible to know which one between data1 or data2 will be the first one to be ready. So we need a way to be sure that both slots are set, no matter the order in which they are loaded. One way you can control this is by: