Is there a way to load templates dynamically in angular2? In angular1 I used ng-include to load different html template in the main controller view. I know that angular2 can only take 1 templateUrl and been googling ng-include in angular2 and can't find any reference.

Is there a way to load templates dynamically in angular2? In angular1 I used ng-include to load different html template in the main controller view. I know that angular2 can only take 1 templateUrl and been googling ng-include in angular2 and can't find any reference.

• javascript
• angular

• 1 There is ngTemplateOutlet but that doesn't sound exactly like what you are looking for. Another way is to compile components at runtime. – Günter Zöchbauer Commented Sep 5, 2016 at 10:06
• you can try this solution : stackoverflow.com/questions/33749994/… – Anouar Mokhtari Commented Apr 10, 2017 at 8:44

2 Answers 2

Why do you need ng-include when you can make the html as a custom new component and use it wherever you need it, thanks to the selector tag.

Eg:

    @Component({
      selector: 'app-my-component',
      templateUrl: './my-component.component.html'
  })

So here, the my-component.component.html file can have the markup you want to include or show everywhere else. and the selector tag value <app-my-component></app-my-component> can be used throughout your application markup html files(you can think of it as your everyday html tags--but highly customized in nature and interpreted by the angular framework first aka custom tags but built using angular).

Not sure about the dynamic template, but you can insert a dynamic component (which ofcourse will have a different template) .

A simple example, but deprecated can be found here : Angular2: Insert a dynamic component as child of a container in the DOM

An up to date example, but more complex can be found here : How can I use/create dynamic template to compile dynamic Component with Angular 2.0?