Using Gridster in Multiple Tab?

Question

I want to create multiple dashboards using using angular-gridster2 in angular 8. I have multiple tabs having gridster in each Tab. I am facing these issues for multiple tabs.

• lets say that tab1 gridster has 3 items & tab2 gridster has 2 item and i am at tab one initially when I move from tab1 to tab2 initially it is not showing any item in gridster when I add one more item in gridster of tab2 then i will all the 3 items of gridster of tab2.
• Updating the display grid property of options is updating only the last gridster item. I want to apply same options properties to all the gridster present along multiple tabs.

You can see the gridster along multiple tab here

Answer 1

There are 2 problems I have found.

It looks like in the addItem() method, you are adding new item directly to 0 indexed gridster, if you want to keep gridsters separate you must pass the index of the gridster or a pointer in a way to the related gridster.

 addItem(){
     this.gridsters[0].... // change 0 with an index
}

I am not sure about this one, I am a bit rusty with Angular but it looks like you didn't separate the tab-contents. You might wanna add tab-content to each tab.

You might want to consider encapsulating your components, maybe use angular components. With the current way, your code can get really messy after a while and will be very hard to handle