How to change the page title with title from backend

Question

I want to change the page title located in the index.html with a title from the backend. I used angular Title service but this didn't solve the problem, this is my code so far in the app component:

 ngOnInit(): void {
    this.page = this.visuals.pageTitle;
    this.visualsService.getVisuals().subscribe((res: any) => {
      this.visuals = res;
      this.title.setTitle(this.visuals.pageTitle);
    });
  }

I think i cannot use dataBinding since the page title is statically located in index.html. knowing that the subscription is working correctly, is there any other solution ?

Answer 1

Assuming that your subscription is correctly receiving the data from the backend, this should be enough to make the title receive the correct data:

TS:

      title: string = '';
    
      ngOnInit(): void {
        this.visualsService.getVisuals().subscribe((res: any) => {
          this.visuals = res;
          this.title = this.visuals.pageTitle;
        });
      }

HTML:

<h1>{{ title }}</h1>