Angular static rendering with dynamic meta update causing problem with Google crawling

I have an Angular 7 app in which, for SEO reasons, I dynamically update the title and meta description inside onNgInit by collecting these information from database. I am building my project using Angular universal, but I take the static version and host it on my shared server.

The website works perfectly, updating the title and description correctly (verified in inspect) after the page loads (which takes couple of seconds).

BUT, the problem is after using query inspection in google search console to ask google to crawl/index my pages. After its done, I search for my webpages on google, the title appears correct same as it is in database, however google displays in the description the keyword undefined or for other pages it displays some content from the webpage itself.

Things I know are:

1. If no meta description is provided, google takes the first 150 characters from the page itself and displays them.
2. If I was using server-side rendering probably my problem would be fixed, but I have limitation to use static rendering since my hosting plan does not allow server-side rendering.
3. We might think that the undefined comes out because when google crawls the webpage it collects the description before its value is retrieved from database. But why not the same for the title? Why it collects the title correctly and not the description? And by default, I have a title and description set statically in my pages and I only update their values once I get the response from database. So in the worst situation, why not displaying the static meta information instead of the undefined?
4. Last, for some pages, and do not ask me why, google was able to retrieve the correct description from the database and it displays it correctly!