Tengo un pequeño problema al establecer la altura de una propiedad.
En mi método ngOnInit tengo este código a continuación. Cuando lo paso, puedo ver el valor del cambio de propiedad en la consola, pero no hay cambios en la pantalla o en el depurador. También intenté ejecutar esto dentro de AfterViewInit, pero eso tampoco pareció hacer nada.
FYI: si creo un botón y lo activé manualmente en la página, puedo hacer el cambio, simplemente no funciona dentro de ngOnInit.
¿Alguien me puede decir por qué o si estoy haciendo algo mal?
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">Funciona tal cual: https://stackblitz.com/edit/angular-ivy-hupjkb?file=src%2Fapp%2Fhello.component.ts
Puede cambiar el if en la línea 10 y observar que el texto 'Comenzar a editar...' se desplaza hacia arriba y hacia abajo cuando el div del 'mapa' cambia de altura.
Pero esta no es la forma idiomática de lograr esto en angular:
document y recuperar o manipular el DOM de esta manera.Un enfoque más típico es usar CSS y enlaces de clase:
Modelo:
<div id="map-full" [class.full-height]="fullHeight || null">Map</div>CSS
div { height: calc(100vh - 105px) } div.full-height { height: calc(100vh - 57px) }Clase de componente:
fullHeight = false; Cambiar el valor de fullHeight aplicará o eliminará la clase del div , que aplicará el CSS relevante.
Stackblitz: https://stackblitz.com/edit/angular-ivy-gw4x8d?file=src%2Fapp%2Fhello2.component.ts