Alternative way for depreciation of ComponentFactory in order to get componentFactory inputs
See original GitHub issueWhich @angular/* package(s) are the source of the bug?
core
Is this a regression?
Yes
Description
Since Angular 13 the ComponentFactory is deprecated.
Since it depreciated I need an alternative way to get the inputs
property that I used to get from the instance of ComponentFactory this.componentFactory.inputs
Here is example of code where I’m using the inputs
@Directive({
selector: '[dynamicComponentDirective]',
})
export class SingDynamicComponentDirective implements OnInit {
@Input() dynamicComponentClass!: Type<any>;
@Input() inputs: any;
componentFactory: ComponentFactory<any> | undefined = undefined;
component!: ComponentRef<any> | null;
constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}
ngOnInit(): void {
this.container.clear();
this.componentFactory = void 0;
this.component = null;
this.componentFactory = this.resolver.resolveComponentFactory<any>(this.dynamicComponentClass);
this.component = this.container.createComponent(this.componentFactory);
this.updateComponentInputs();
}
/**
* update component inputs
*/
updateComponentInputs(): void {
const validInputs = this.inputs && isObject(this.inputs) && Object.keys(this.inputs).length;
if (this.component && validInputs && this.componentFactory && this.componentFactory.inputs) {
this.componentFactory.inputs.forEach((input: any) => {
if (this.component && this.inputs.hasOwnProperty(input.propName)) {
this.component.instance[input.propName] = this.inputs[input.propName];
}
});
}
}
}
Now that ComponentFactory is deprecated what is the alternative to get the inputs
property?
Please provide a link to a minimal reproduction of the bug
above there is a code with the example of my problem
Please provide the environment you discovered this bug in (run ng version
)
Angular CLI: 13.2.0
Node: 16.10.0
Package Manager: npm 7.6.0
OS: darwin x64
Angular: 13.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1302.0
@angular-devkit/build-angular 13.2.0
@angular-devkit/core 13.2.0
@angular-devkit/schematics 13.2.0
@schematics/angular 13.2.0
ng-packagr 13.2.0
rxjs 7.5.2
typescript 4.5.5
Anything else?
No response
Issue Analytics
- State:
- Created 2 years ago
- Reactions:10
- Comments:11 (3 by maintainers)
Top Results From Across the Web
Creating Components Dynamically with Component Factory in ...
Learn the easiest and most practical way to create dynamic components in Angular making the user experience better and much faster.
Read more >How do you use @Input with components created with a ...
createComponent(componentFactory); componentRef.instance.someProp = 'someValue'; componentRef.instance.someObservableOrEventEmitter.subscribe(data ...
Read more >Deprecated APIs and features - Angular
Use different signature of the createComponent method, which allows passing Component class directly. ComponentFactory, Use non-factory based framework APIs.
Read more >Netanel Basal – Medium
Every day, Netanel Basal and thousands of other voices read, write, and share ... Alternative way for depreciation of ComponentFactory in order to...
Read more >Advance Angular Dynamic Component - DEV Community
In order to create a dynamic component, you have to use either ... a component factory that holds metadata about the component inputs...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@demike
ComponentMirror
API from #46685 gets us almost there but I agree that a boolean check on theComponentRef
would be probably more convenient. @AndrewKushnir WDYT?Same problem here. Our entire application framework relies on dynamic views that are created on behalf of a (JSON) view model that can be modified by the user at runtime. This model also contains values for input properties that are set on the view component after creation. Currently, we use
ComponentFactory.inputs
for two reasons:@Input
). (Other properties of the model are ignored.)