Container element must be an existing DOM element.

[cwqt]

After copying demo code - getting this error on Angular CLI: 9.0.2, Node: 10.15.0

core.js:5845 ERROR Error: Container element must be an existing DOM element.
    at new Grid (muuri.module.js:7346)
    at MuuriGridDirective.init (muuri-angular.js:16)
    at MuuriGridDirective.ngOnInit (muuri-angular.js:10)
    at callHook (core.js:3909)
    at callHooks (core.js:3873)
    at executeInitAndCheckHooks (core.js:3814)
    at selectIndexInternal (core.js:9530)
    at Module.ɵɵadvance (core.js:9491)
    at DashboardComponent_Template (dashboard.component.html:8)
    at executeTemplate (core.js:11858)
    at refreshView (core.js:11705)
    at refreshComponent (core.js:13145)
    at refreshChildComponents (core.js:11436)
    at refreshView (core.js:11757)
    at refreshDynamicEmbeddedViews (core.js:13070)
    at refreshView (core.js:11728)

[dennisameling]

@cwqt Thanks for reporting this issue! This error is coming from Muuri itself and from reading the error message, it looks like there isn't any element in the DOM that Muuri can bind to.

Could you provide a Stackblitz example with your code, so I can see if I can reproduce the error? Thanks in advance!

[cwqt]

It's just the code from the readme but in a different component than app-root, can't provide a stackblitz but here's the source: https://gitlab.com/cxss/mcn/-/tree/master/frontend/src/app/routes/index/dashboard

[cwqt]

I have managed to get this to work by using setTimeout to do some delaying;

<div *ngIf="ready">
  <div muuriGrid class="grid" [config]="layoutConfig">
      <div class="grid-item" muuriGridItem *ngFor="let item of blockItems">
          <div class="grid-item-content">
              {{ item }}
          </div>
      </div>
  </div>
</div>

  ngOnInit(): void {
    setTimeout(() => {
      this.ready = true;
    }, 0);
  }

Would appear to be some kind of race condition going on with the directive

[ubergeoff]

I am guessing your grid div is just not available within the angular life-cyle hook.

Maybe move your init to:

ngAfterViewInit(): void {
        this.init(this.elRef.nativeElement);
    }

Does this help..?