Angular 2 append Component dynamic to DOM or template

Question

I'm planning to add a component dynamic to the DOM if show() is called. I know there is a solution with ngIf or [hidden] to hide it and use it as a directive, but I'm not a fan of this solution because I don't want to declare it in my HTML.

  import {Component} from 'angular2/core';
  import {InfoData} from '../../model/InfoData';

  @Component({
    selector: 'Info',
    templateUrl: './components/pipes&parts/info.html',
    styleUrls: ['./components/pipes&parts/info.css']
  })

  export class Info{
    infoData: InfoData;

    public show(infoData: InfoData) {
      this.infoData= infoData;
      document.body.appendChild(elemDiv); <----- Here?
    }
  }

and then I declare this as a Provider so i can call show().

  import {Component} from 'angular2/core';
  import {Info} from './components/pipes&parts/Info';

  @Component({
    selector: 'Admin',
    templateUrl: './Admin.html',
    styleUrls: ['./Admin.css'],
    directives: [Info],
    providers: [Info]
  })

  export class Admin {
    constructor(private info: Info) {
    info.show(); <---- append the Info Element to DOM
  }

Günter Zöchbauer · Accepted Answer · 2018-08-31 16:27:43Z

7

UPDATE

Use ViewContainerRef.createComponent()

For a full example see Angular dynamic tabs with user-click chosen components

ORIGINAL

DynamicComponentLoader was removed long ago

You can use DynamicComponentLoader for this purpose, but it's a bit cumbersome and has some issues related to bindings.

2 Comments

Al Kasih Over a year ago

Can you have a look to this question please, stackoverflow.com/questions/47655224/….

siebmanb Over a year ago

Oh great you have been quicker than me providing the new links 👍

Thierry Templier · Accepted Answer · 2016-01-18 13:49:24Z

6

I don't think that you need to provide the Info component as providers to the other component. I'm not sure that it even works. You can leverage Query and QueryView to reference components used in another one:

@Component({
  selector: 'Admin',
  templateUrl: './Admin.html',
  styleUrls: ['./Admin.css'],
  directives: [Info]
})
export class Admin{
  constructor(private @Query(Info) info: QueryList<Info>) {
    info.first().show(); <---- append the Info Element to DOM
  }
}

Instead of adding the element within the Info component, you can dynamically add this component using the DynamicComponentLoader as suggested by Günter:

@Component({
  selector: 'Info',
  templateUrl: './components/pipes&parts/info.html',
  styleUrls: ['./components/pipes&parts/info.css']
})

export class Info{
      infoData: InfoData;

  public show(infoData: InfoData) {
    this.infoData= infoData;
    // No need to add the element dynamically
    // It's now part of the component template
    // document.body.appendChild(elemDiv); <----- Here?
  }
}

@Component({
  selector: 'Admin',
  //templateUrl: './Admin.html',
  // To show where the info element will be added
  template: `
    <div #dynamicChild>
      <!-- Info component will be added here -->
    </div>
  `,
  styleUrls: ['./Admin.css'],
  directives: [Info]
})
export class Admin{
  constructor(private dcl: DynamicComponentLoader, private eltRef:ElementRef) {
    this._dcl.loadIntoLocation(Info, this._el, 'dynamicChild')
        .then(function(el) {
          // Instance of the newly added component
        });
  }
}

Hope it helps you, Thierry

answered Jan 18, 2016 at 13:49

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

2 Comments

Noémi Salaün Over a year ago

The DynamicComponentLoader is now deprecated :(

Thierry Templier Over a year ago

@NoémiSalaün yes but this Günter's answer could interest you: stackoverflow.com/questions/36325212/… ;-)

Collectives™ on Stack Overflow

Angular 2 append Component dynamic to DOM or template

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related