just imagine: 1. in component.html, you have
{{text}}
-
It returns the previous values because it takes time for the browser to compute the new style.
The RequestAnimationFrame API is what you are looking for.
Once you've set the new text, use the RequestAnimationFrameAPI, it's a callback triggered once the browser is ready, basically when its render queue is empty.
this.text = "blablablabla...."
window.requestAnimationFrame(() => {
// access the new css values here
})