Angular server side rendering dynamic content not showing in page source

Question

I'm using angular universal for server side rendering for SEO. I created html like below. In this html, "Hello" is static content and "World" is coming from rest service dynamically. I can see "Hello World" in browser. But, when I enter view page source in browser, there is only "Hello" not "World". How can I show dynamic content("World") in page source?

page.html

<div>Hello {{dynamicContent}}</div>

page.ts

import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core';    
@Component({selector: 'app-page', templateUrl: './page.component.html', styleUrls: './page.component.scss'] })

export class PageComponent implements OnInit {
  dynamicContent: string = "";

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('https://localhost:8080/getContent').subscribe(result => {
      this.dynamicContent = result; //Coming from server "World"
    });
  }

Answer 1

In Page source, you might have the value, "World" written like below:

<div>Hello World</div>

Use Chrome's developer tool to check your page source.