Using block manager how to have a slider panel with two tabs - each tab having its own blocks?

We have a requirement to have two tabs on a panel. First tab will have standard controls (blocks). Second tab will have custom controls (blocks).

We initialized grapesjs with below code and with block-manager blocks appending to ".myblocks".

grapesjs.init({
container: containerId,
fromElement: true,
height: height,
width: width,
styleManager: { clearProperties: true },
storageManager: false,
panels: disablePanel ? { defaults: [] }: {},
blockManager: {
appendTo: appendBlockTo,
blocks: [
],
},
});


i tried to add the blocks to visible tab and remove blocks from the hidden tab. when user click on any tab, respective tab blocks will be added and other tabs blocks will be removed. Below is the high level code,

<div class="main">
<div *ngIf="value === true">
<bootstrap-tab-one class="myblocks" (click)="showhide()"></bootstrap-tab-one>
</div>
<div *ngIf="value === false">
<bootstrap-tab-two class="myblocks" (click)="showhide()"></bootstrap-tab-two>
</div>
</div>


after adding and removing blocks as mentioned above, it will only reflect the controls on the first tab, but does not reflect on the second tab when clicked.

Will it work having class="myblocks" on two div, with either one always visible ?

OR

Can we build the control panel having two tabs using different features of grapesjs?

Please let me know if you need more detail. Thank you for your help in advance.

Continue reading...