Q:

How to dynamically load templateUrl depends on the value

I'm building a page component for a different type of page and I want to dynamically load templateUrl depends on what type of page.
page.component.ts
@Component({
  selector: 'app-page',
  templateUrl: './type_of_page.component.html', // <-- i want this to dynamically load
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {

  type_of_page = 'person'; // person

  constructor(
    private http: HttpClient
  ) {
    this.http.get('api/type-of-page?id=1').subscribe(response => {
      this.type_of_page = response['type_of_page']; // tv series
    });
  }

}

Is there a way to achieve this only inside the page.component.ts

A:

Use ng-template tag in your container component, that solves your problem of loading template / component dynamically.

https://stackblitz.com/angular/ndjkdnmaqdn?file=src%2Fapp%2Fad-banner.component.ts

