Dynamically load component in div - Angular5

Question

I was able to successfully create a button that on click loads another instance of my component into the DOM, but it loads it outside the component I want it to be inside which results with the CSS being off. When I add "editorComponents" to my page it currently looks like this:

But I want it to look like this:

You can see from the inspection that in the second example all of the tags are manually moved to where I want them to be.

Right now my code is as follows:

home.component.html

<div class="row backgroundContainer">

  <div class="col-md-7 componentContainer">
    <app-editor></app-editor>
    <button (click)="addEditor()" type="button">Add Editor</button>
  </div>

  <div class="col-md-5 componentContainer">
    <app-bible></app-bible>
  </div>

  <div id="footerBox">
    <app-footer></app-footer>
  </div>
  
</div>

home.component.ts

import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { EditorComponent } from '../editor/editor.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef) {}

  ngOnInit() {
  }

  addEditor() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(EditorComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
  }

}

So how do I make it so when I dynamically add an EditorComponent to my page it is added directly below the current "app-editor" in my html?

Vitalii Chmovzh · Accepted Answer · 2018-02-10 21:46:20Z

19

You need to use your own ViewContainerRef. Currently you injecting root one and as you can see all your components appended to <app-root>.

import { Component, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { EditorComponent } from '../editor/editor.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  // Setup custom viewChild here
  @ViewChild('container', { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;    

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {
  }

  addEditor() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(EditorComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
  }

}

Now inside your home.component.html put this where you want your editors to be instantiated

<div #container></div>

You can use any html tag here.

Now all your editors will be inside this block.

edited Feb 10, 2018 at 21:46

answered Feb 10, 2018 at 21:41

Vitalii Chmovzh

2,9534 gold badges18 silver badges29 bronze badges

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

4 Comments

abdul-wahab Over a year ago

If you don't want to introduce a div, use <ng-template #container></ng-template>.

Vitalii Chmovzh Over a year ago

Add ViewChild to import from angular/core

dockleryxk Over a year ago

You don't need the detectChanges() call do you?

Pouria Moosavi Over a year ago

createComponent with factory input is marked as deprecated: "Angular no longer requires component factories to dynamically create components. Use different signature of the createComponent method, which allows passing Component class directly."

Collectives™ on Stack Overflow

Dynamically load component in div - Angular5

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related