How can i get the viewport height of my modal in angular?

i would like to know if there is a possibility to get the viewport height of my ng boostrap modal in my Angular app. Here is what i have:

• A modal with a css styling like this:

.modal-xxl {
  width: 95% !important;
  max-height: 90% !important;
  max-width: 95% !important;
  height: 90% !important;

  .component-host-scrollable {
    height: 100%;
  }
}

• Inside the modal i have a ng zorro table which i need to be scrollable
• I want to change the scrollable height based on this calculation: calc(100vh - 221,09px) so that if i resize the screen the scroll height resizes as well

• I do not know how to get that 100vh inside the html file.
• Right now the nzScroll property of ngzorro table only takes a number in px. I tried doing this: viewHeight = window.innerHeight on my ts component and then putting it into the html like so: [nzScroll]="{ y: ' {{viewHeight}}px' }" but it doesn't work ( i can't even scroll the table). If anyone can help i will thank him forever ahaha!!!

Okay so my problem was that this:

[nzScroll]="{ y: 'calc(100vh - 276.09px)'}"

Didn't work because of the point . in the calculation.

So then i changed it to:

[nzScroll]="{ y: 'calc(100vh - 276px)'}"

And now works just fine. If anyone was wondering how i got that 276px i basically did a sum of all the modal elements that were of fixed size like:

• Modal header: 69px
• Modal Footer: 65px
• And then the table height which was: 142px

Therefore now if i decide to resize the window, the table scrollbar is going to resize as well.

Here is the before:

And that is the after:

As you can see if i increase the size of the table the table doesn't overflow the modal causing him to enable the scroll bar, it just resizes itself staying within the modal boundries.