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
– micronyks, Commented Oct 29, 2016 at 5:36
sure it does. I have planty of {{}} and *ngIf, ngFor,... but how can in include other templates in the main template? — Tobias Koller
– Tobias Koller, Commented Oct 29, 2016 at 5:40
@natel your link is about angular1-routing...not exactly what I was looking for — Tobias Koller
– Tobias Koller, Commented Oct 29, 2016 at 5:42
ng-include is not in the scope of angular2. you should use CFR. — micronyks
– micronyks, Commented Oct 29, 2016 at 5:47

Aswin KV · Accepted Answer · 2016-10-29 06:26:05Z

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, 2016 at 6:26

Aswin KV

1,7602 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tobias Koller Over a year ago

thank you. I guess I will do it like that...wanted to get around creating Components for each template...but thank you :)

Aswin KV Over a year ago

Okey if you face any issue ping here.

Aswin KV Over a year ago

@user2638975: test.html will be <sub1></sub1> <sub2></sub2>

micronyks · Accepted Answer · 2016-10-29 06:28:53Z

2

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

edited Oct 29, 2016 at 6:28

answered Oct 29, 2016 at 6:18

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

2 Comments

Roland Over a year ago

ComponentFactoryResolver is no longer in the core API.

b264 Over a year ago

Using builtin classes in an example, without showing the corresponding import line, is really crappy

Collectives™ on Stack Overflow

angular 2 include html templates

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related