angular 2 include html templates

Question

in angular 2 I need to create a large html-template with redundant parts. Therefore I want to create multiple html-templates and put them together by including them in the main html-file (like ng-include in angular1)

But how can I include sub-templates in the main-template?

example:

<!-- test.html -->

<div>
    this is my Sub-Item
    <!-- include sub1.html here-->
</div>
<div>
    this is second Sub-Item
    <!-- include sub2.html here-->
</div>

-

<!-- sub1.html -->
<div>
    <button>I'am sub1</button>
</div>

-

<!-- sub2.html -->
<div>
    <div>I'am sub2</div>
</div>

doesn't it have any angular context in it? or just `div` and `static text`? — micronyks, Oct 29 '16 at 05:36
sure it does. I have planty of {{}} and *ngIf, ngFor,... but how can in include other templates in the main template? — Tobias Koller, Oct 29 '16 at 05:40
Does this help? http://stackoverflow.com/questions/12863663/complex-nesting-of-partials-and-templates — react_or_angluar, Oct 29 '16 at 05:41
@natel your link is about angular1-routing...not exactly what I was looking for — Tobias Koller, Oct 29 '16 at 05:42
ng-include is not in the scope of angular2. you should use CFR. — micronyks, Oct 29 '16 at 05:47
`ComponentFactoryResolver`. use if it has angular context. You can also use `routing` with `name-outlet` feature. — micronyks, Oct 29 '16 at 05:52
Just use a Sub1 component and a Sub2 component. It's not clear, in your example, where the redundancy is, though. But if you want to have a reusable piece of HTML, well, that's what a component is for. — JB Nizet, Oct 29 '16 at 06:18

score 16 · Accepted Answer · answered Oct 29 '16 at 06:26

16

You can create components like sub1 sub2 etc. And On those child components add these html files as template .

On main html call the component selectors respectively. It will work

answered Oct 29 '16 at 06:26

Aswin KV

1,710
2
12
23

1

thank you. I guess I will do it like that...wanted to get around creating Components for each template...but thank you :) – Tobias Koller Oct 29 '16 at 06:28
Okey if you face any issue ping here. – Aswin KV Oct 29 '16 at 06:29
@user2638975: test.html will be – Aswin KV Jan 31 '18 at 07:04

micronyks · Answer 2 · 2016-10-29T06:28:53.350

Let me tell you first of all that ng-include from Angular1.x is not supported by Angular2 so obviously $Compile is not present in Angular2. So, you can go ahead with CRF-ComponentFactoryResolver as shown here to add HTML dynamically with angular context.

DEMO--(CFR) : https://plnkr.co/edit/YdRlULhWQR3L3akAr2eb?p=preview

If your HTML piece has angular context, you should use CFR-ComponentFactoryResolver.

As in sub1.html, you have button, you might want to click it and fire its click event. This can be achieved with CFR as shown below,

You can do lot with CRF. This is probably the easiest example.

@Component({
  selector: 'my-app',
  template: `

     <button (click)="addComponents()">Add HTML (dynamically using CRF)</button>

     <h1>Angular2 AppComponent</h1>
     <hr>

     <div>
     <h5>sub1.html goes here</h5>
      <div class="container">
        <template #subContainer1></template>
      </div>
     </div>

     <hr>
     <h5>sub2.html goes here</h5>
     <div class="container">
        <template #subContainer2></template>
     </div>
  `,

})
export class App {
    name:string;
    @ViewChild('subContainer1', {read: ViewContainerRef}) subContainer1: ViewContainerRef;
    @ViewChild('subContainer2', {read: ViewContainerRef}) subContainer2: ViewContainerRef;
    constructor(
      private compFactoryResolver: ComponentFactoryResolver
      ) {
      this.name = 'Angular2'
    }

    addComponents() {

      let compFactory: ComponentFactory;

      compFactory = this.compFactoryResolver.resolveComponentFactory(Part1Component);
      this.subContainer1.createComponent(compFactory);


      compFactory = this.compFactoryResolver.resolveComponentFactory(Part2Component);
      this.subContainer2.createComponent(compFactory);
    }
  }
}

Using builtin classes in an example, without showing the corresponding import line, is really crappy — b264, Mar 15 '19 at 02:23

angular 2 include html templates

2 Answers2

Linked