1

I am currently using a 3rd party utility, called JQXDocking. Its a pretty simple and straight-forward design. Upon looking into it on a deeper level though I figured the page would get bulky so, i abstracted all of the docked widgets to custom components.

The issue with the jqxDocking concept though is that it is looking for divs, etc. I break the design because instead of a direct child being a div, it is my custom component

// What it was
<jqxDocking>
<div><div>title</div><div>content</div></div>
</jqxDocking>

// What it is now.
<jqxDocking>
  <my-component></my-component>
</jqxDocking>

inside my-component has the proper dom structure that jqxDocking is looking for.  So i was hoping for a way to replace in markup correctly such that the component works.

because of this new layer in the DOM, the parent component cant interpret my code correctly.

Is there a way to create a custom component but replace with the template html?

So, if i wrap it with a div, it will gain part of its implementation

<jqxDocking>
  <div class=column">
    <div class="card">
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

but its title is undefined, because it doesnt understand the title which is in my component.

So i pull that from the component

<jqxDocking>
  <div class="column">
    <div class="card">
      <div>Title</div>
      <my-component></my-component>
    </div>
  </div>
</jqxDocking>

So I could do that, but it just doesnt look all that good. I may have to just template that out in the markup, instead of componentizing.

Fallenreaper
  • 10,222
  • 12
  • 66
  • 129
  • what happens if you wrap `` inside a `div`? – Johan Swanepoel Feb 28 '19 at 14:12
  • I tried that originally. It makes it drag-droppable like the widget but it has no understanding the card title, which is defined in my component. So if i keep abstracting it eventually becomes `
    title
    ` but as you can see, since everything has a title, and everything is encapsulated with a div, i figured all of it could be abstractable.     – Fallenreaper Feb 28 '19 at 14:16

1 Answers1

1

To avoid having the my-component element in the output HTML, you can define the component selector as an attribute selector:

selector: "[my-component]"

and set that attribute on the container element in the template:

<jqxDocking my-component></jqxDocking>

See this stackblitz for a demo.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • How would `Input()` properties be handled? Would they just be applied like normal to jqxDocking, or in your sample the div? – Fallenreaper Feb 28 '19 at 14:52
  • You can bind them in the container component element, as shown in [the updated stackblitz](https://stackblitz.com/edit/angular-kcbjxr?file=src%2Fapp%2Fapp.component.html). – ConnorsFan Feb 28 '19 at 14:55
  • EUREKA. I am going to test and flush this out some more, but i think this is the answer I was looking for. – Fallenreaper Feb 28 '19 at 14:57
  • This does solve the base question. The only thing I can see which is producing a hiccup is that styles are not bleeding into the component. Its a good thing, but the parent styles are doing things like "jqx-window-content-dark" and then all child div under it are stylized. Since Technically the content is still its own component, the CSS will not resolve. But that seems to be a different question – Fallenreaper Feb 28 '19 at 16:12
  • 1
    If you have control on the jqx CSS, you can add `::ng-deep` in front of the style rules, to affect the child component elements (see [this answer](https://stackoverflow.com/a/54329016/1009922)). – ConnorsFan Feb 28 '19 at 16:17