Angular-gridster2: Angular-gridster not rerendering with OnPush and markforcheck

[sambusamano]

I have been facing rendering issue with angular-gridster2 with angular5. I have below component where I am iterating an observable that holds an array of Ids to create gridster items:

    @Component({    
      changeDetection: ChangeDetectionStrategy.OnPush,    
      selector: "app-grid",    
      template:    
        <gridster [options]="options">    
            <gridster-item [item]="gItems['id']" *ngFor="let id of (gIds$ | async)">    
                  //Content    
            </gridster-item>    
         </gridster>     
      })    
     export class GComponent implements OnInit {    
          items$: string[];      
          gItems: any   
          ngOnInit() {    
              this.store.select(fromStore.getGItems).subscribe( state => {    
                   this.gItems = _.cloneDeep(state.gItems);    
                   this.cd.markforcheck();    
             }    
             this.gIds$ = this.store.select(fromStore.getItems);    
         }     
    }

Here, the gridster items are rendering properly based upon the items input that we provided from ngrx store. However, they are not getting re-rendered upon subsequent actions like resizing a gridster-item, etc and have no effect upon updating this.gItems (adding new item object, updating values on resize, etc)

I am creating a new deep cloned object of this.gItems as I thought there is something to do with the reference matching. Also I tried manually triggering re-render using markforcheck() but of no use.

If the first time rendering is happening fine, Please tell me why gridster/gridster-item are not re-rendering after changes. where am I doing wrong.

I have ChangeDetection as onPush, I am creating a new reference of this.gItems every time any change is happened. I am manually intimating angular to rerender using markforcheck. The this.gIds$ is an observable that listens to the store changes and it doesn't change actually.

Note: Please excuse me for the syntax mistakes/missing dependency injections as I made sure there are no such issues in my actual code and everything is fine until first render.

[tiberiuzuld]

Hi @sambusamano ,

Try this.options.api.optionsChanged.
If this doesn't works I have no clue, the items are added to the grid when the item component is initialized.
The item component doesn't watch for changes of the item object.

Thanks