Way to make ag-grid take 100% page height in angular

Question

I'm trying to make angular ag-grid to take the full height of a web page, so if I have some components like text or title for ag-grid I want to make the displayed grid to take the full height of the page.

I've looked at this question on stack overflow:

How can I make my flexbox layout take 100% vertical space?

And then I'm trying to apply this for angular ag-grid grid

Here is the css I applied, but it is not giving the desired result:

body, html {
  height: 100%;
  margin:2px;
}

my-app .container {
  display: flex;
  flex-direction: column;
}


my-app .container .ag-grid-angular {
  flex-basis: 100%;
  display: flex;
  flex-grow: 1;
}

Here is the link to Stackblitz for a demo:

https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css

I've surrounded the grid with a div using a class .container to be able to apply the display: flex CSS, but this is not helpfull. Is there a way to make the height of the grid to take the full height of the page ?

If I remove the inline style:

style="width: 100%; height: 600px"

for ag-grid-angular , I'm able to see only one row in it.

Answer 1

You need to make few changes in your styles.css after removing inline styling of the ag-grid-angular in your template.

Have a look at this Stackblitz demo

Specifically, you need to make heights of the ag-grid-angular element (not just class) and parent containers of it.

my-app, my-app .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ag-grid-angular{
  height: 100%;
}

Answer 2

For anyone who had this problem, in ag grid 23 + and Angular 9+ all that matters is that the parent containers height will be set properly, no need to set ag-grid-angular or anything in the global style.

For me the problem was that I was using ag grid inside mat tab group which didn't have 100%.