Hi Namita,
Query1- Dynamic component rendering.
In Angular platform, you have dynamically added the panels in two ways.
1. Using ng-container reference.
2. Dynamically load the already created component.
We have already shared the sample for using container-ref or else, you can load the component the component to the corresponding div dynamically. Please refer the below link.
Please, refer the below code snippet.
|
public appendComponent() {
const factory = this.cfResolver.resolveComponentFactory(MyDynamicComponent);
const componentRef = this.vcRef.createComponent<MyDynamicComponent>(
factory
);
componentRef.instance.message = "dynamic content";
// append the component to the corresponding panel
this.renderer.appendChild(
document.getElementById("layout_0_body"),
componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
);
}
|
Please, refer the sample link below.
Query2- Another example you gave for replace, I can see it doesn't replace the full component it just adds in the bottom, is it how it meant to work ?
By using updatePanel method, you can update the existing panel content. To achieve this requirement, you need to pass the entire panel setting inside the updatePanel method.
If you want to replace the content of the corresponding panel, first you need to remove the panel content and then add the content to the corresponding panel.
Please, refer the below code snippet.
|
BtnClick() {
document.getElementById("layout_0_body").children[0].remove();
//rendes the (CustomTemplate) temaplte in dom
const templateValue = this.CustomTemplate.createEmbeddedView(null);
// inserts the template into the view container
this.viewContainer.insert(templateValue);
// Obtaining the content element of the panel
let panel_Content = document.getElementById("layout_0_body");
// appending the template to the panel content element.
panel_Content.appendChild(templateValue.rootNodes[0]);
this.count = this.count + 1;
} |
Please, refer the sample link below.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
