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.

Community · Accepted Answer · 2017-05-23 12:25:42Z

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, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 3, 2016 at 11:06

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

13 Comments

Bhushan Gadekar Over a year ago

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

Günter Zöchbauer Over a year ago

Sorry, forgot to delete a line in App before the constructor.

Bhushan Gadekar Over a year ago

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

Günter Zöchbauer Over a year ago

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.

Bhushan Gadekar Over a year ago

@guner if you can refer the snapshot , you can see that no error is given in console,but component is not getting loaded.

|

Collectives™ on Stack Overflow

use dynamic component loader in angular2?

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related