In Angular 8, how can I passing data between parent and child component if the child component is appending from the code side?

Question

In Angular 8, I usually pass data between parent and child component on the specification in HTML file as below

    <div id ="parent-container">
      <child-button 
        [ngClass]="child-button"
        [attr.id]="child-button"
        [setOption]="options"
        (notifyChild)="notifyChildButton"
        (notifyParent)="changeNotifyParent($event)"
        >
      </child-button>
    </div>

However, if I would like to do this custom child-button view in appending from the code something like below

    const parentContainer = document.getElementById('parent-container');
    const childButton = document.createElement('child-button');
    childButton.setAttribute('class', 'child-button');
    childButton.id = 'childButton';
    parentContainer.appendChild(childButton0;

then how should I put '[setOption]', '(notifyChild)', and '(notifyParent)' in coding in order to passing data between parent and child component?

https://stackoverflow.com/questions/42848369/angular-passing-data-back-from-dynamic-component — Ihor Yanovchyk, Jun 05 '20 at 10:03

score 0 · Answer 1 · answered Jun 05 '20 at 10:11

as far as my knowlege goes with angular you can not simply create a component like the standard dom/js way. Doing it like this doesn't tell the angular compiler that you want to create a component and it can't handle it.

If you want to create a component dynamically you need a ViewcontainerRef and a component factory to create a component and insert it to the ViewContainerRef.

@Component({
  selector: 'my-app',
  template: `
    <div #vcr></div>
  `,
})
export class App {
 @ViewChild("vcr", { read: ViewContainerRef }) container;

 constructor(private resolver: ComponentFactoryResolver) {}

 createComponent(type) {
    // crete ComponentFactory
    const factory: ComponentFactory = 
    this.resolver.resolveComponentFactory(ChildButtonComponent);

    // Adding it to the view
    this.componentRef: ComponentRef = this.container.createComponent(factory);

    // Handle inputs like object fields

   const compInstance = this.componentRef.instance;
   compInstance.setOption = "anything"

   // Subscribe to outputs
   compinstance.notifyChild.subscribe( () => "Do something")  
  }
}

score 0 · Answer 2 · answered Jun 05 '20 at 10:15

Havald is correct, however, if you want to notify child component from parent, you should create a Observable(such as EventEmitter) in parent component, and in the init method of child component subscribe this Observable, and if you want child component to notify parent, do the opposite subscription

score 0 · Answer 3 · answered Jun 05 '20 at 10:23

Try this :

in HTML

<ng-template #dynamic></ng-template>

in Ts File:

 @ViewChild('dynamic', {  read: ViewContainerRef }) viewContainerRef: ViewContainerRef

  constructor(private componentFactoryResolver:ComponentFactoryResolver) {
 }

 createComponent(){ // Call this Metods when you want to append component.
 const factory=this.componentFactoryResolver.resolveComponentFactory(ChildButtonComponent);
 const newTemplate=this.dynamic.createComponent(factory);
 newTemplate.instance.setOption = this.setOption;
 newTemplate.instance.notifyChild.subscribe(e =>{});
 newTemplate.instance.notifyParent.subscribe(e =>{});
 }

In Angular 8, how can I passing data between parent and child component if the child component is appending from the code side?

3 Answers3