In Angular 12, I am able to fetch html content from assets folder and display the content using innerHTML. But, the title data is not binded and not displayed in the page.

test-template.html

<h1>{{title}}</h1>
<div>Test Page</div

print-layout.component.html

<div [innerHTML]="myTemplate"></div>

print-layout.component.ts

@Component({
  selector: 'app-print-layout',
  templateUrl: './print-layout.component.html',
  styleUrls: ['./print-layout.component.scss']
})
export class PrintLayoutComponent implements OnInit {

  myTemplate;
  title: string;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
      fetch('/assets/templates/test-template.html').then(res => res.text()).then(data => {
        this.myTemplate = this.sanitizer.bypassSecurityTrustHtml(data);
        this.title = 'Hello World'; // assigning value of title which is added in test-template.html
      });    

    setTimeout(() => {
      window.print();
    }, 2000);

  }

}