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 · Answer 1 · 2018-08-31T16:27:43.137

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.

See also:

Can you have a look to this question please, https://stackoverflow.com/questions/47655224/load-ngfor-inside-insertadjacenthtml. — Al Kasih, Dec 05 '17 at 15:13
Oh great you have been quicker than me providing the new links — siebmanb, Aug 31 '18 at 16:37

score 6 · Accepted Answer · answered Jan 18 '16 at 13:49

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

@NoémiSalaün yes but this Günter's answer could interest you: http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 ;-) — Thierry Templier, May 31 '16 at 18:42

Angular 2 append Component dynamic to DOM or template

2 Answers2

Linked