Angular 2 append Component dynamic to DOM or template

javascript components angular

34,327

Solution 1

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

Solution 2

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.

user3369579

Updated on September 01, 2020

Comments

user3369579 over 3 years

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
  }

Noémi Salaün almost 8 years

The DynamicComponentLoader is now deprecated :(
Thierry Templier almost 8 years

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

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

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