angular-dynamic-components

问题 Due to some business logic, I have to read the meta data of dynamic components(EntryComponents). To read the meta data, following is my approach. Read all components of a module using ComponentFactoryResolver Filter out classes using Component name and specific method Create the component and read the data Destroy the component. . const factories = Array.from<any>(this.resolver['_factories'].keys()); console.log(factories); // Logging all the factories factories.forEach(element => { if

问题 I am dynamically loading an Angular component ( MyComponent ) with the following code. I am also passing some data to the component after creating it. let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); this.viewContainerRef.clear(); let componentRef = this.viewContainerRef.createComponent(componentFactory); (<MyComponent>componentRef.instance).setData(data); When will the OnInit lifecycle event of the MyComponent be triggered? Will it be triggered

问题 I am dynamically loading an Angular component ( MyComponent ) with the following code. I am also passing some data to the component after creating it. let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); this.viewContainerRef.clear(); let componentRef = this.viewContainerRef.createComponent(componentFactory); (<MyComponent>componentRef.instance).setData(data); When will the OnInit lifecycle event of the MyComponent be triggered? Will it be triggered

问题 I'm trying to inject the FormBuilder service to a dynamic component this way: Template: ... <div #vc></div> ... Component: @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef; ... constructor(private fb: FormBuilder, private componentFactoryResolver: ComponentFactoryResolver, private _compiler: Compiler, private _injector: Injector, private _m: NgModuleRef<any>) { } ... ngAfterViewInit() { let allPms: any[] = null; let template = ''; // construct template on the fly

问题 I have a mat-tab-group (angular material) and I want to be able to add from code behind mat-tabs including other components. I am using ComponentFactoryResolver to create the component but I am not able to add the new component to the new mat-tab through the ViewContainerRef html <mat-tab-group> <mat-tab *ngFor="let tab of tabs" [label]="tab.title"> <div #test></div> </mat-tab> </mat-tab-group> code behind private open(type:string):void{ var tab = {title:'test'}; this.tabs.push(tab); const

问题 I have a mat-tab-group (angular material) and I want to be able to add from code behind mat-tabs including other components. I am using ComponentFactoryResolver to create the component but I am not able to add the new component to the new mat-tab through the ViewContainerRef html <mat-tab-group> <mat-tab *ngFor="let tab of tabs" [label]="tab.title"> <div #test></div> </mat-tab> </mat-tab-group> code behind private open(type:string):void{ var tab = {title:'test'}; this.tabs.push(tab); const

问题 How do I compile a component defined by a string and render it in my template? I tried using DomSanitizer: this.sanitizer.bypassSecurityTrustHtml(parsedLinksString); But that doesn't properly bind the click event handler onButtonClick() . Desired Functionality @Component({ selector: 'app-sample-component', templateUrl: './sample-component.component.html', styleUrls: ['./sample-component.component.scss'] }) export class SampleComponent { buildMessage() { // How do I parse this string and

问题 I have quite complex infrastructure in my project which contains of host component structural directive used in host component's template (MyDir) another component used in structural directive (MyComp) host component @Component({ selector: 'my-app', template: ` <table> <tr *myDir="let item of data"> <td>{{item.text}}</td> </tr> </table>` }) export class AppComponent { data = [ { text: 'item 1' }, { text: 'item 2' } ]; } structural directive import { MyComp } from './myComp'; @Directive({

问题 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

问题 I am trying to append component (dynamic created) to respective tabs using angular material and @viewChild but it is going to first tab only when I click button in the 2nd tab. Here is Stackblitz - angular-append-component-to-respective-tabs It's not displaying in individual tab. I have 3 tabs. all 3 tabs contains Add button, when I click on 1st tab's button, it's adding that component in 1st tab but when I click on 2nd tab's Add button, it's adding that component in 1st tab only, it should