Gridster-2 not working properly with ptab angular

Question

I am rendering gridster dynamically on tabPanels. Gridster gets rendered on the panels but is displayed only when the window is resized. Has anyone else faced the same issue ?

Ts file

ngOnInit() {
    this.options = {
      swap: false,
      pushItems: true,
      maxCols: 100,
      minRows: 1,
      outerMargin: true,
      outerMarginRight: 150
      //   draggable: {
      //     enabled: true,
      //   },
      //   resizable: {
      //     enabled: true
      //  }
    };

    this.dashboard = [
      {
        cols: 1,
        rows: 2,
        y: 0,
        x: 0,
        parentContainer:
          "<div class='staticCard card1'><h1 class='cardTitle'>Direct Efficiency</h1><p class='cardValue greenText'>78%</p></div>",
      },
      {
        cols: 2,
        rows: 2,
        y: 0,
        x: 1,
        parentContainer:
          "<div class='comboCard card2'><div class='multCard value1'><h1 class='cardTitle'>Steam Total</h1><p class='cardValue'>84,080 kg</p></div><div class='multCard value2'><h1 class='cardTitle'>Fuel Total</h1><p class='cardValue'>7,006 kg</p></div><div class='multCard value3'><h1 class='cardTitle'>S:F Ration</h1><p class='cardValue'>12.001</p></div></div>",
      },
      {
        cols: 1,
        rows: 2,
        y: 0,
        x: 3,
        parentContainer:
          "<div class='staticCard card3'><h1 class='cardTitle'>Steam Dryness</h1><p class='cardValue'>90.4%</p></div>",
      },
      {
        cols: 1,
        rows: 2,
        y: 0,
        x: 4,
        parentContainer:
          "<div class='staticCard card4'><h1 class='cardTitle'>Oxygen</h1><p class='cardValue'>4.2</p></div>",
      },
      { cols: 3, rows: 2, y: 2, x: 0 },
      { cols: 2, rows: 2, y: 2, x: 0 },
      { cols: 3, rows: 2, y: 4, x: 0 },
      { cols: 2, rows: 2, y: 4, x: 2 },
      { cols: 5, rows: 4, y: 6, x: 0 },
      { cols: 5, rows: 4, y: 10, x: 0 },
    ];
  }
ngAfterViewInit() {
    this.dashboard.forEach((x, index) => {
      this.d1.toArray().forEach((y: { grid: { el: { innerHTML: any; }; }[]; })=>{
        y.grid[index].el.innerHTML = x["parentContainer"];
        if (this.options.api && this.options.api.resize) {
          this.options.api.resize();
        }
      })
    });
  }

Some styles that I added

::ng-deep gridster {
  background: #f1f6fa !important;
  height: 900px !important;
  padding: 2% 0% 2% 4% !important;

  gridster-item {
    box-shadow: 0px 0px 30px rgba(169, 183, 209, 0.2);
    border-radius: 12px;
  }
}
::ng-deep .staticCard {
  background: #ffffff;
  border-radius: 12px;
  padding: 8% 0% 5% 10%;
}
::ng-deep .comboCard {
  background: #ffffff;
  border-radius: 12px;
  padding: 5% 0% 5% 0%;
  display: flex;
}

Html code for tabs and grid


<p-tabView (click)="check()">
  <p-tabPanel class="" [header]="state.title" [headerStyleClass]="state.status" *ngFor="let state of states; let i = index" [selected]="i == 0">
    <div class="mainContent">
      <gridster [options]="options" #gridsterContent>
        <gridster-item [item]="item" *ngFor="let item of dashboard">
          <div class="gridster-item-content" (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
          </div>
        </gridster-item>
      </gridster>
    </div>
  </p-tabPanel>
</p-tabView>

The gridster gets rendered without any issue but I don't see it in the tabs except the default tab and the last tab.Basically the gridster does not show for the middle tabs. However, if I resize the window, I can see the grid immediately. Also the width is not the same for all tabs. There is always a slight difference.