Custom handle in custom component

[BlackLanzer]

When you have a custom component extending WidgetComponent with a widgetHandle element in the template the handle doesn't work when you add the component to the dashboard at runtime.

Am I doing something wrong? Is there a way to do this?

[jaumard]

Can you show me your extends component ?

[BlackLanzer]

<div widgetHandle>DRAG ME</div>

<p>
  my custom widget <b>works</b>!
</p>
<ng-content></ng-content>

I don't have my code right now, but you can try this with my-widget in the demo and it doesn't work. You can still drag using all of the component.

I tried to work on it, but didn't have much time. I will try again next week. This is the only dashboard i found working as it should :)

[jaumard]

Hum you're right, it doesn't work on the demo, but I make it work on my project here https://github.com/mylisabox/lisa-ui/blob/master/src/app/components/widget/widget.component.ts

To make it work you need to add this:

import {Component, Renderer, ElementRef, forwardRef, Input, ContentChild, ViewChild} from "@angular/core";
import {WidgetComponent} from "../../../../components/widget/widget.component";
import {WidgetHandleDirective} from "../../../../directives/widget-handle.directive";

const forwardReference = forwardRef(() => MyWidgetComponent);

@Component({
  selector: 'app-my-widget',
  templateUrl: './my-widget.component.html',
  styleUrls: ['./my-widget.component.css'],
  providers: [{provide: WidgetComponent, useExisting: forwardReference}]
})
export class MyWidgetComponent extends WidgetComponent {
  @Input() public size: number[] = [1, 1];
  @Input() public widgetId: string;
  @ViewChild(WidgetHandleDirective) protected _handle: WidgetHandleDirective;

  constructor(ngEl: ElementRef, renderer: Renderer) { 
    super(ngEl, renderer);
  }
}

Where @ViewChild(WidgetHandleDirective) protected _handle: WidgetHandleDirective; is the important part. It's a bug on my base component because you shouldn't have to add this. I'll fix it

[jaumard]

I create this lib because I wasn't able to find a dashboard library who's working as I want ^^ so I understand the feeling lol

[BlackLanzer]

Your fix works with runtime components, but broke the others xD If you try in the demo handlers don't work anymore.

[jaumard]

Ha fuck ! lol you're right :( ok so for now I don't have any good solution except my fix, I'll restore the previous state and if you put the line on your component it will make it work for both

[BlackLanzer]

Thank you. I will try that.

p.s.: i think you should remove the lambda here if you want it to compile with the new changes

[jaumard]

Let me know but should work, it work on the demo for both should be ok :) I'll remove it and do like the demo one, I miss that one but don't know why it compile even with that ^^ Thanks!