11

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.

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
nCore
  • 2,027
  • 7
  • 29
  • 57
  • 1
    There is [`ngTemplateOutlet`](https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html) but that doesn't sound exactly like what you are looking for. Another way is to compile components at runtime. – Günter Zöchbauer Sep 05 '16 at 10:06
  • you can try this solution : http://stackoverflow.com/questions/33749994/dynamic-template-in-templaturl-in-angular2?answertab=votes#tab-top – Anouar Mokhtari Apr 10 '17 at 08:44

2 Answers2

7

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).

siddharthrc
  • 624
  • 9
  • 11
  • this thing we tried but console error coming that tag not ended properly. because we add html start tag in header.html and ending tag in footer.html – VISHAL SINGH Feb 12 '18 at 01:42
  • 1
    then how about in your index.html you have something like .... > <....your own footer> – siddharthrc Feb 12 '18 at 07:51
  • This idea is good. I tried by making two separate component for header and footer and removed the

    tag from the footer HTML. its working fine but it may not work for IE browser.

     – VISHAL SINGH Feb 13 '18 at 05:33
  • Ideally it should work in IE , please note that you need not use tags in the components, because you are already wrapping them, also why don't you try using it, if does'nt work; see the console for warnings or errors and begin investigating from there on .. – siddharthrc Feb 13 '18 at 08:15
  • yes, you are right. this way it works fine. Thanks for solution – VISHAL SINGH Feb 14 '18 at 04:41
  • this is not always true. When there is a hierarchy of elements with css and only part of these elements are componentized, the child part does not consider the css of the parent part and therefore the effects do not work as they should. – Henrique Fernandes Cipriano Mar 04 '18 at 21:30
  • @HenriqueFernandesCipriano the question here if you read is not talking about css, so to be relevant again the question asked if we there is anything called as ng-include and I have tried my best to answer...relevance is key... :) – siddharthrc Jun 19 '18 at 08:53
4

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?

Community
  • 1
  • 1
Tiberiu Popescu
  • 4,486
  • 2
  • 26
  • 38