angular-dynamic-components

Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList

阅读更多关于 Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList

问题 I am building a dialog with dynamic tabs that can receive a component to be placed in the tab body. I am having a hard time creating multiple dynamic components using @ViewChildren. I have successfully done this with a single component and @ViewChild in the past quite easily. Here is my template: <mat-tab *ngFor="let tab of tabs" [label]="tab.label"> <ng-template #comp></ng-template> </mat-tab> Here is my component logic: @ViewChildren("comp") dynComponents: QueryList<any>; public

How to remove a component dynamically in angular

阅读更多关于 How to remove a component dynamically in angular

I went through angular dynamically loading components. But i could not find how to remove the component dynamically. My requirement is that the chat application loads dynamic component(image/graph/list/table) as per the conversation. But how can i destroy the component if the conversation moves forward. I am trying to destroy dynamic component with external event. Please help how to proceed. EDIT: https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts I developed my code according to this example. Instead of time interval, I need to use a API call from a service

How to remove a component dynamically in angular

阅读更多关于 How to remove a component dynamically in angular

问题 I went through angular dynamically loading components. But i could not find how to remove the component dynamically. My requirement is that the chat application loads dynamic component(image/graph/list/table) as per the conversation. But how can i destroy the component if the conversation moves forward. I am trying to destroy dynamic component with external event. Please help how to proceed. EDIT: https://stackblitz.com/angular/emjkxxxdxmk?file=src%2Fapp%2Fad-banner.component.ts I developed

How to use reactive forms in a dynamic component

阅读更多关于 How to use reactive forms in a dynamic component

Background I receive client generated data from the server that contains HTML that I then use to create a dynamic component that gets injected and displayed in our client. The HTML I receive can contain one or many inputs that I need to bind to via Angular Reactive Forms . Attempt 1: I attempted to tackle this requirement by simply using the [innerHTML] property and creating dynamic Reactive Forms to bind to the inputs. However, that method fails due to technical limitations of using the innerHTML property. Once the HTML is rendered in the browser all properties are forced to lowercase text so