angular-skyhook icon indicating copy to clipboard operation
angular-skyhook copied to clipboard

skyhook-preview: binding style template via async pipe causes unnecessary change detection

Open lincolnthree opened this issue 5 years ago • 1 comments

https://github.com/cormacrelf/angular-skyhook/blob/f3ab68468551b469ffa33622727e6e64eb8dc929/packages/multi-backend/src/preview-renderer.component.ts#L21

Recommend writing directly to the dom and calling change detection manually in or after hover callback:


  constructor(private skyhook: SkyhookDndService, private _el: ElementRef) {
    this.sub = this.style$.subscribe((style) => {
      requestAnimationFrame_or_equivalent(() => {
        this._el.nativeElement.style = `transform: ${style.transform}; display: ${style.display}`;
      });
    });
  }

lincolnthree avatar Jul 05 '20 16:07 lincolnthree

I confirm the problem, and I've found similar error in the example of the skyhook/sortable. Disabling Ivy seems fixing the issue. https://github.com/cormacrelf/angular-skyhook/blob/4c4cb8d1392e1681be4093c95e1ebdd2d4455e23/packages/examples/src/app/sortable/simple/simple.component.html#L22

            <div class="priority"
                 [ssRender]="context"
                 #render="ssRender"
                 [class.priority--placeholder]="render.isDragging$|async"

keeshii avatar Jul 29 '20 07:07 keeshii