Want to hide ag-grid on first component load

Question

As my requirement i want to hide the ag-grid on angular component load, based on customer value selection from drop down it call apis & load with the api data into the ag-grid.

in short initially if no data then not to display whole grid, empty doesn't look nice

Answer 1

You could try wrapping it with a simple *ngIf and see if the grid still loads right.

If that doesn't work, the next easiest thing would be to wrap it in an element with css that makes it hidden/changes height to 0 until the data is loaded.

Answer 2

To solve this problem you can use ngIf directive something like this -

Let consider that your ag-grid component is <app-ag-grid></app-ag-grid> and customerData is an array which contains data of customer.

Now use it as -

<app-ag-grid *ngIf="customerData.length > 0"> </app-ag-grid>

Hope it helps.