Wow, it's been very long since I first saw the ngComponentOutlet, but I was never able to find a real use for it (I though that was too complicated and was simpler to just do an *ngIf), after this lesson I'm so excited to apply it in a lot of my old codes. This is just gold! Thank you so much for this lesson.
I'm getting started with Angular and spent so much time on the docs to understand dynamic component loading but the official resources are confusing, sporadic and inorganic. This tutorial actually saved me so much time, thanks Profanis!
I was getting so worked up on how to work with dynamic components because the other tutorials i found are either too old and use the componentFactory or don't explain it well. You explained it just the way i needed it. Thank you, Profanis!
You explain superb...!!! The example is concise, enough & useful... Please... keep making more videos... your channel will grow because of there are many angular channels but only your channel is wow!!!
loved this video, I was long life react, but Im trying to see the things from angular perspective now, and this video was really good, keep the good work
Great content. One thing to mention here! For lazy-loading to take place the import statements for WidgetOneComponent and WidgetTwoComponent needs to be removed. Their only reference needs to be kept inside componentsConfig
Is the setinput method typed to only inputs of the component? When using the setinput method you won't realise your app is broken if you renamed an input until you try to create it at runtime. The old way you would get an error at compile time. Any way around that?
Which angular version do you have? Please note that since Angular v13 it's not required to resolve a factory angular.io/api/core/ComponentFactoryResolver
Hi Ezequiel, needing one help here. I'm using angular 12 and trying to do the same. But when I pass component instance to factoryResolver, it's giving me an error 'Argument of typeof component is not assignable to parameter of type 'Type. Please suggest what I'm doing wrong here. Thanks
Thanks for the video. Its very crisp and clear. May i know what vs code you are using to show the types directly. I mean i can see the "obj:" in the @component. Thanks in advance.
Great tutorial. Shouldn't we pass environmentInjector: inject(EnvironmentInjector) to the createComponent to give it access to the DI hierarchy? I am just guessing.
Thank you for explaining so clearly the concept of creating Dynamic Component. It would be really helpful if you could also explain when this concept should be used when creating an application. TIA
Glad you liked it! :) A use case would be to create a dashboard with widgets. Flow: A user selects which widgets wants to have on the dashboard, this info is persisted in the DB, and then upon page reload we fetch this list and we can then create these widgets/components dyncamically
If I understood correctly what you are referring to, it is a setting in VSCode. // This displays the parameter names "typescript.inlayHints.parameterNames.enabled": "all" // This displays the variable types "typescript.inlayHints.variableTypes.enabled": true
do you know how to connect to the template module dynamically depending on the condition, for example for different countries that need to display a form, there are inputs and outputs?
this is great, but how does this work when I'm reading from json file ? I mean how to save the component : () => ... and read it from json config file , if we save it json, when we return back the json then the import will be string !!! !!!
I am not sure which flow you are following to persist/get the JSON, but based on what you described, it seems to me that you might need to JSON.parse your JSON.
Wow, it's been very long since I first saw the ngComponentOutlet, but I was never able to find a real use for it (I though that was too complicated and was simpler to just do an *ngIf), after this lesson I'm so excited to apply it in a lot of my old codes. This is just gold! Thank you so much for this lesson.
Glad you liked it! :)
I'm getting started with Angular and spent so much time on the docs to understand dynamic component loading but the official resources are confusing, sporadic and inorganic. This tutorial actually saved me so much time, thanks Profanis!
Thanks for your feedback Wasiullah. Glad you liked it! :)
I love how you display the various stages of how to complete this task. Very well explained!
Thanks for your feedback :)
Glad you liked it
I was getting so worked up on how to work with dynamic components because the other tutorials i found are either too old and use the componentFactory or don't explain it well.
You explained it just the way i needed it. Thank you, Profanis!
I'm glad to hear that you found it useful :)
You explain superb...!!! The example is concise, enough & useful... Please... keep making more videos... your channel will grow because of there are many angular channels but only your channel is wow!!!
Thanks for your warm feedback! :)
Finally someone explains how to load component in angular without any spaghetti code
Thanks!
Glad you liked it!
Pretty explanatory and simple video. Great job Profanis, greetings from Turkish neighbour! :)
Hey neighbor, thanks! Glad you liked it :)
hey profanis, i love this kind of angular course. thank you!
Happy to hear that! Thanks for the feedback!
Thanks, Profanis! very Insightful! Looks like this is how 'ng-dynamic-component' lib works under the hood
Oh I didn't know a library for dynamic components was out there. Thanks for that
Awesome job, Mr. Profanis. Thank you very much
Glad you liked it!
loved this video, I was long life react, but Im trying to see the things from angular perspective now, and this video was really good, keep the good work
Glad you enjoyed it, and thanks for your feedback!
Great content. One thing to mention here! For lazy-loading to take place the import statements for WidgetOneComponent and WidgetTwoComponent needs to be removed. Their only reference needs to be kept inside componentsConfig
Hi! it's important to mention that ComponentRef.setInput() method is available in Angular 14.1.0
Really great explanations and use case.
Thank you. 🙏
Is the setinput method typed to only inputs of the component? When using the setinput method you won't realise your app is broken if you renamed an input until you try to create it at runtime. The old way you would get an error at compile time. Any way around that?
Yeah unfortunately the setInput() is not typed. I do not have any workaround on this but I will give it a shot
This is some good stuff here, thanks for making this version update so clear.
You got yourself a new subscriber and a share.
Glad you liked it and thanks for the subscription :)
Thank you for such a clear explanation.
Glad you liked it
Awesome content! In my case I had to use a ComponentFactoryResolver before creating the component, and It's worked!
Which angular version do you have?
Please note that since Angular v13 it's not required to resolve a factory
angular.io/api/core/ComponentFactoryResolver
@@CodeShotsWithProfanis I'm using Angular 8. You are right, it's not necessary for Angular 13.
Hi Ezequiel, needing one help here. I'm using angular 12 and trying to do the same.
But when I pass component instance to factoryResolver, it's giving me an error 'Argument of typeof component is not assignable to parameter of type 'Type.
Please suggest what I'm doing wrong here. Thanks
@@AnuragSingh-ev8qd Can you provide a piece of code that you are using or crate a stackblitz instead?
Thanks for the video. Its very crisp and clear. May i know what vs code you are using to show the types directly. I mean i can see the "obj:" in the @component. Thanks in advance.
Great tutorial.
Shouldn't we pass environmentInjector: inject(EnvironmentInjector) to the createComponent to give it access to the DI hierarchy?
I am just guessing.
Woohoo! New video!!!
🎉 It's been a long time after the summer vacations :)
Yeah, it more understandable in comparison with a documentation, thanks a lot :)
Glad it helped! :)
Thank you for explaining so clearly the concept of creating Dynamic Component. It would be really helpful if you could also explain when this concept should be used when creating an application. TIA
Glad you liked it! :)
A use case would be to create a dashboard with widgets.
Flow: A user selects which widgets wants to have on the dashboard, this info is persisted in the DB, and then upon page reload we fetch this list and we can then create these widgets/components dyncamically
Oh, my friend, excellent content. Is it possible to create real-time components with data coming from an api? all dynamic?
Yes that would be possible. Please come back and reply to this video if you tried and worked for you
Super explanatory , thank you!
Thanks for your feedback Sunny. Glad you liked it
what is the name of that extension wich shows labels on objc ViewChild(selector:'container', opts: {read:ViewContainerRef}) ?
If I understood correctly what you are referring to, it is a setting in VSCode.
// This displays the parameter names
"typescript.inlayHints.parameterNames.enabled": "all"
// This displays the variable types
"typescript.inlayHints.variableTypes.enabled": true
@@CodeShotsWithProfanis thank you sir!
What advantage I will get if I will implement dynamic components?
Your new subscriber here. Excellent explanation in all your videos. I learned a lot.
Thanks for your feedback. Glad you like them :)
Hi Profanis : )
Thank you for the video! Can this also be done with a non-standalone component?
I had a talk explaining how to achieve that. It is worth checking this out :)
ua-cam.com/video/qJW73J3obpY/v-deo.html
@@CodeShotsWithProfanis Thank you very much, I'll check it out : )
Amazing!
Thanks!
i have this error: Cannot read properties of undefined (reading 'clear'). Im using Angular 13. Could you help me please?
Can you share your code? Perhaps a stackblitz would be very helpful
Thank you, this can be used to create creative things
Ohh yeah, indeed!
A real fun begins when the widget components are also meant to provide output (maybe they contain forms).
I want to pass a specific method for each child component. It is possible? and how can I do it?
Can you please explain further what do you mean by saying "pass a specific method"?
do you know how to connect to the template module dynamically depending on the condition,
for example for different countries that need to display a form, there are inputs and outputs?
I am afraid I do not get what you mean by "connect to the template module"
Can you please be more specific by providing an example?
Awesome, great video
Thanks! Glad you liked it.
Como conecto esos componentes a un formulario reactivo ?
createComponent() won't compile when components doesn't have same attributes due to typing errors. Didn't find a solution yet...
this is great, but how does this work when I'm reading from json file ? I mean how to save the component : () => ... and read it from json config file , if we save it json, when we return back the json then the import will be string !!! !!!
I am not sure which flow you are following to persist/get the JSON, but based on what you described, it seems to me that you might need to JSON.parse your JSON.