Angular SEO How To Correctly Implement Dynamic Title And Meta?

I have a little question about Angular title and meta. I have imported libraries into my angular. I set my title and description of meta in the constructor of the .ts files like this (different titles and descriptions for every page of course);

//To set the title
this.titleServ.setTitle("SOME TITLE HERE")
//To set the meta
this.meta.addTag({name: "description", content: "SOME DESCRIPTION HERE"})

When I run my website through IIS and check from the browser, I still see something like this;

  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

As said, I cant see my page title or page description from source codes (but I can see it from a google search and at the google chrome tab). I am currently trying to set the search engine optimizations. Is there any problem in here? I mean all the tutorials I have seen can see their page title from the section and also can see meta.

What did I do wrong or is there anything I need to do more for the website to be visible in google with some keywords search?

Angular by default is a client-side application. When you serve the app and view the HTML source, you essentially get the source code of index.html that's in the root of src.

For SEO, you need to render the page on the server. That way, when the browser receives the HTML, it is pre-rendered with certain data elements, including the SEO-related tags/content.

This is the official guide on how to add server-side rendering (Angular Universal) to your application: https://angular.io/guide/universal

The key part is, for the server-side rendering to take place, you need to start your app with the dedicated command (e.g. npm run dev:ssr by default). This will start up node, which will be handling the requests on the server-side.