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

[lincolnthree]

angular-skyhook/packages/multi-backend/src/preview-renderer.component.ts

Line 21 in f3ab684

<div class="firefox-bug" [ngStyle]="style$|async">

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}`;
      });
    });
  }

[keeshii]

I confirm the problem, and I've found similar error in the example of the skyhook/sortable. Disabling Ivy seems fixing the issue.

angular-skyhook/packages/examples/src/app/sortable/simple/simple.component.html

Line 22 in 4c4cb8d

[class.priority--placeholder]="render.isDragging$|async"

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