angular 2 include html templates

21
votes

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>
2
htmlangular
doesn't it have any angular context in it? or just div and static text? - micronyks
sure it does. I have planty of {{}} and *ngIf, ngFor,... but how can in include other templates in the main template? - Tobias Koller
Does this help? stackoverflow.com/questions/12863663/… - react_or_angluar
@natel your link is about angular1-routing...not exactly what I was looking for - Tobias Koller
ng-include is not in the scope of angular2. you should use CFR. - micronyks

2 Answers

16
votes

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

2
votes

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);
    }
  }
}