Inserting programmatically created components with templates and content projection in Angular

Previously we tried hosting the newly created component in an HTML element, whether existing in body, or created and appended to body. Today we try two other ways:

• Hosting in ng-template
  


• Content projecting in ng-content
  

Follow along with StackBlitz project.

Hosting in a ng-template

What we need is a reference to that template, to use it as a host element. Is it doable? Let's dig in.

First, we add a template, and declare it. (I created a new …

angular components html project projection template tutorial typescript webdev