use dynamic component loader in angular2?

Question

I have created following application using dynamicComponentloader of angular2 using typeScript. But my child component is not getting rendered.

my component:

import {Component, Directive, ElementRef, Renderer,DynamicComponentLoader} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DynamicBody1Component} from './ICICI-DYNAMIC-BODY-1.component';

@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}


@Component({
  selector: 'app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
     }`
    ],
  template: `
    <div>    
        <div>
            <span x-large>Hello, {{ name }}!</span>
        </div>
        <div>
            <div #container></div>
        </div>
      </div>
      `
 })
export class App {
  name: string = 'Angular 2';
  public dynamicComponentLoader: DynamicComponentLoader;  
  constructor(dynamicComponentLoader: DynamicComponentLoader, private     elementRef: ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');

  }
}

is anything wrong here? Thanks in advance.

score 2 · Accepted Answer · edited May 23 '17 at 12:25

2

For an up-to-date example see Angular 2 dynamic tabs with user-click chosen components

original

You can't use dynamicComponentLoader in constructor() anymore. Move it to ngOnInit()

import {Component, Directive, ElementRef, Renderer,DynamicComponentLoader} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DynamicBody1Component} from './DYNAMIC-BODY-1.component';

@Directive({
  selector: '[x-large]'
  host: {
    '[style.fontSize]': 'x-large',
  }
})
export class XLarge {
}


@Component({
  selector: 'app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
    }
  `],
  template: `
  <div>    
    <div>
      <span x-large>Hello, {{ name }}!</span>
    </div>
    <div>
        <div #container></div>
    </div>
  </div>
  `
})
export class App {
  name: string = 'Angular 2';
  constructor(private dynamicComponentLoader: DynamicComponentLoader, private elementRef: ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');

  }
}

edited May 23 '17 at 12:25

Community

1
1

answered Mar 03 '16 at 11:06

Günter Zöchbauer

623,577
216
2,003
1,567

i tried your solution,now i am getting this error;`EXCEPTION: TypeError: Cannot read property 'loadIntoLocation' of undefined in [null] ORIGINAL EXCEPTION: TypeError: Cannot read property 'loadIntoLocation' of undefined`...see the updated code in question – Bhushan Gadekar Mar 03 '16 at 11:25
Sorry, forgot to delete a line in `App` before the constructor. – Günter Zöchbauer Mar 03 '16 at 11:32
@gunter.its still not working.for details plz refer the snapshot. I am using universal-starter for serverside rendering. no error is displayed.but my component is also not getting loaded in browser. – Bhushan Gadekar Mar 03 '16 at 11:41
But you don't get an error? I also changed `XLarge`. You don't need `ElementRef` for this. This won't fix the problem though. – Günter Zöchbauer Mar 03 '16 at 11:46
@guner if you can refer the snapshot , you can see that no error is given in console,but component is not getting loaded. – Bhushan Gadekar Mar 03 '16 at 11:50
its working for normal angular2 app.but i am using this in universal-starter.thus I am facing the problem. – Bhushan Gadekar Mar 03 '16 at 12:38
I don't know about Universal, but I guess it's pretty much the same when run on the client. – Günter Zöchbauer Mar 03 '16 at 13:15
Hi @GünterZöchbauer, Can you please provide link for loading dynamic template in stable version of Angular2. thnx – deen Oct 17 '16 at 05:35
http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 It's about dynamic component loading not dynamic template loading. – Günter Zöchbauer Oct 17 '16 at 05:42
@GünterZöchbauer thnx for response, I have requirement like I have multiple html templates and based on condition(if condition), I like to load different- different template, can you please suggest me how to do? – deen Oct 17 '16 at 06:07
Why do you need to load the dynamically instead of adding it statically? If you really need to load them dynamically you have to create components dynamically at runtime. There are answers to this topic already. I don't know details about it myself. – Günter Zöchbauer Oct 17 '16 at 06:13
@GünterZöchbauer, Hi I searched for dynamic component but I found all example which is deprecated in stable version. Can you please provide me link for that on stable version. – deen Oct 17 '16 at 06:25
Searching for `compile` or `compiler` might help. I just remember that there were questions about this topic with answers, but this use case isn't interesting to me and ignored this topic. – Günter Zöchbauer Oct 17 '16 at 06:29

use dynamic component loader in angular2?

1 Answers1