angular-dynamic-components

Angular Dynamic Components AOT Issue

安稳与你 提交于 2021-01-28 02:07:35
问题 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

When is OnInit event triggered for a dynamically loaded angular component?

帅比萌擦擦* 提交于 2020-12-29 12:20:39
问题 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

When is OnInit event triggered for a dynamically loaded angular component?

时间秒杀一切 提交于 2020-12-29 12:17:52
问题 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

Way to inject angular FormBuilder service to dynamic component

别来无恙 提交于 2020-11-28 09:16:59
问题 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

Angular - Dynamic component in mat-tab

走远了吗. 提交于 2020-07-21 03:22:13
问题 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

Angular - Dynamic component in mat-tab

落爺英雄遲暮 提交于 2020-07-21 03:21:24
问题 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

Angular: How to dynamically load a component defined by a string?

和自甴很熟 提交于 2020-06-28 09:07:08
问题 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

Using dynamic component within Angular structural directive produces extra HTML tag. How to remove or replace it?

喜欢而已 提交于 2020-01-05 04:33:14
问题 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({

How to use reactive forms in a dynamic component

好久不见. 提交于 2019-12-28 04:21:12
问题 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

angular append component to respective tabs

笑着哭i 提交于 2019-12-10 10:55:59
问题 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