Cytoscape.js Graph does not run in the nested angular component. Error - Cannot read property 'className' of null

I am trying to create a separate angular component for a graph built in cytoscape. Now I am trying to use the same component in the other component in Angular but it does not do anything. It also gives me an error Error - Cannot read property 'className' of null

Here is the Stackblitz:

https://stackblitz.com/edit/angular-xvrntx?file=src%2Fapp%2Fdata-cytoscape%2Fdata-cytoscape.component.html

Click on graph and open console

From angular-material doc

Lazy Loading By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated

The problem is that cy div is not being attached to DOM until user activates the tab but DataCytoscapeComponent component is getting initialized and trying to access cy div which is the cause of the error, To solve this you can lazy load DataCytoscapeComponent component which will cause the component to not initialize until tab is activated by user.

<mat-tab label="Graph">
  <ng-template matTabContent>
    <app-data-cytoscape></app-data-cytoscape>
  </ng-template>
</mat-tab>

Here the working example

Note: Graph was not visible when tab clicked because the height is getting set to 0 so i have set default min-height in component css and removed absolute positioning.