I am making a website which just converts a base of 1 number to another number, and it will display a table showing all the numeric values. Sometimes the table is too large and I change the zoom property so that it fits.

This is what it should look like (localhost):

This is what it looks like on the web server (the zoom does not work):

Here is the web server website if you want to test it yourself

Here is the code to get the zoom (gets executed when the user clicks the convert button):

const numberGridFlexboxWidth = document.getElementById('numberGridFlexbox')!.clientWidth;
const screenWidth = window.innerWidth;

var zoom = screenWidth / numberGridFlexboxWidth * 100;
if (zoom < 100)
{ zoom = zoom - (zoom * 0.05) }//subtract 5% to account for the padding and margins
else { zoom = 100; } //zoom never goes higher than 100
if (zoom < 50) { zoom = 50; } //zoom never goes lower than 50%

this.dataservice.zoom = Math.round(zoom);

It writes the zoom level to a variable in a data service, and here is the code which actually binds the zoom to the css property (app.component.html):

<!-- Shell Page -->
<div class="container" [ngStyle]="{'zoom': dataservice.zoom + '%'}">
    <div style="width: 100%; text-align: center;"><h1><u>Base Converter</u></h1></div>
    <app-header></app-header>
    <app-main></app-main>
</div>

The issue lies in the line: this.dataservice.zoom = Math.round(zoom);

The zoom works if I assign this.dataservice.zoom to an actual value, for example if I write this.dataservice.zoom = 50, then it works in the web server, but I have also checked the local zoom variable and it is the correct value, so I really don't know what the issue is.

Edit: I have found that if you click the convert button twice the web server then it will zoom correctly, so maybe it is an issue of not binding properly the first time. Is there a difference to how binding works in localhost compared to a web server ?

Solved: The function was executing before the table was loaded, so I moved it to execute after it loaded and it solves the problem.