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?
Snart :
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",
2020-06-05T10:15:02
Havald :
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.\n\nIf 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.\n\n@Component({\n selector: 'my-app',\n template: `\n <div #vcr></div>\n `,\n})\nexport class App {\n @ViewChild(\"vcr\", { read: ViewContainerRef }) container;\n\n constructor(private resolver: ComponentFactoryResolver) {}\n\n createComponent(type) {\n // crete ComponentFactory\n const factory: ComponentFactory = \n this.resolver.resolveComponentFactory(ChildButtonComponent);\n\n // Adding it to the view\n this.componentRef: ComponentRef = this.container.createComponent(factory);\n\n // Handle inputs like object fields\n\n const compInstance = this.componentRef.instance;\n compInstance.setOption = \"anything\"\n\n // Subscribe to outputs\n compinstance.notifyChild.subscribe( () => \"Do something\") \n }\n}\n",
2020-06-05T10:11:31