I'm having a little issue with setting a property height.
In my ngOnInit method I have this code below. When I step through it I can see the value of the property change in the console, but there's no change on screen or in the debugger. I also tried running this inside AfterViewInit but that didn't seem to do anything as well.
FYI - If I create a button and trigger it manually on the page I can make the change, it just doesn't work inside ngOnInit.
Any any one tell me why or if I'm doing something incorrectly?
ngOnInit(): void {
if (something) {
document.getElementById('map-full').style.setProperty('height', 'calc(100vh - 57px)');
} else {
document.getElementById('map-full').style.setProperty('height', 'calc(100vh - 105px)');
}
}<div id="map-full">It does work as is: https://stackblitz.com/edit/angular-ivy-hupjkb?file=src%2Fapp%2Fhello.component.ts
You can change the if on line 10 and observe the 'Start Editing..' text shift up and down when the 'map' div changes height.
But this is not the idiomatic way to achieve this in angular:
document and retrieving or manipulating the DOM in this manner.A more typical approach is to use CSS and class bindings:
Template:
<div id="map-full" [class.full-height]="fullHeight || null">Map</div>
CSS
div {
height: calc(100vh - 105px)
}
div.full-height {
height: calc(100vh - 57px)
}
Component class:
fullHeight = false;
Changing the value of fullHeight will apply or remove the class from the div, which will apply the relevant CSS.
Stackblitz: https://stackblitz.com/edit/angular-ivy-gw4x8d?file=src%2Fapp%2Fhello2.component.ts