Learn How to Create Dynamic Component in Angular

In this video you will learn how to create an Angular component dynamically. Furthermore, you will learn how to create multiple dynamic components based on configuration settings.
In earlier versions of Angular we could generate Dynamic Components and set inputs using the command COMPONENT.instance.INPUT_NAME. This worked fine but we had to find alternatives to trigger component's ngOnChanges hook. In Angular 14 we now have the option to use the method setInput which triggers the ngOnchanges hook.
✨ Chapters:
0:00 Intro
0:18 Dynamic Component
3:02 Input vs setInput
5:10 Dynamic Components based on configuration
8:45 Thank you
✨ Code: github.com/profanis/codeShots...
******************************************************
Let's Connect
******************************************************
Twitter: / prodromouf
LinkedIn: / prodromouf
#angular #learnAngular #angularTutorial #webdevelopment #frontenddeveloper #frontenddevelopment

[@joaor.g.castaldi6753]

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.

[@CodeShotsWithProfanis]

Glad you liked it! :)

[@wasiullahkhan9685]

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!

[@CodeShotsWithProfanis]

Thanks for your feedback Wasiullah. Glad you liked it! :)

[@richnimbu]

I love how you display the various stages of how to complete this task. Very well explained!

[@CodeShotsWithProfanis]

Thanks for your feedback :) Glad you liked it

[@tonis237]

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!

[@CodeShotsWithProfanis]

I'm glad to hear that you found it useful :)

[@elialvarezmelgar9301]

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!!!

[@CodeShotsWithProfanis]

Thanks for your warm feedback! :)

[@juandaleonardo6466]

hey profanis, i love this kind of angular course. thank you!

[@CodeShotsWithProfanis]

Happy to hear that! Thanks for the feedback!

[@youssefchaygani8518]

This is some good stuff here, thanks for making this version update so clear. You got yourself a new subscriber and a share.

[@CodeShotsWithProfanis]

Glad you liked it and thanks for the subscription :)

[@ISBE91]

Finally someone explains how to load component in angular without any spaghetti code Thanks!

[@CodeShotsWithProfanis]

Glad you liked it!

[@Nabulio85]

Really great explanations and use case. Thank you. 🙏

[@fatihersoy7559]

Pretty explanatory and simple video. Great job Profanis, greetings from Turkish neighbour! :)

[@CodeShotsWithProfanis]

Hey neighbor, thanks! Glad you liked it :)

[@snk-js]

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

[@CodeShotsWithProfanis]

Glad you enjoyed it, and thanks for your feedback!

[@longebor85]

Awesome job, Mr. Profanis. Thank you very much

[@CodeShotsWithProfanis]

Glad you liked it!

[@SunnyVakil]

Super explanatory , thank you!

[@CodeShotsWithProfanis]

Thanks for your feedback Sunny. Glad you liked it

[@ansaganie]

Thanks, Profanis! very Insightful! Looks like this is how 'ng-dynamic-component' lib works under the hood

[@CodeShotsWithProfanis]

Oh I didn't know a library for dynamic components was out there. Thanks for that

[@avecesar]

Thank you for such a clear explanation.

[@CodeShotsWithProfanis]

Glad you liked it

[@MG-wx8yx]

Your new subscriber here. Excellent explanation in all your videos. I learned a lot.

[@CodeShotsWithProfanis]

Thanks for your feedback. Glad you like them :)

[@CrusaderMen]

Thank you, this can be used to create creative things

[@CodeShotsWithProfanis]

Ohh yeah, indeed!

[@anvianshi]

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

[@CodeShotsWithProfanis]

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

[@jacobadlerman3067]

Yeah, it more understandable in comparison with a documentation, thanks a lot :)

[@CodeShotsWithProfanis]

Glad it helped! :)

[@ezemans]

Awesome content! In my case I had to use a ComponentFactoryResolver before creating the component, and It's worked!

[@CodeShotsWithProfanis]

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

[@ezemans]

@@CodeShotsWithProfanis I'm using Angular 8. You are right, it's not necessary for Angular 13.

[@AnuragSingh-ev8qd]

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

[@CodeShotsWithProfanis]

​@@AnuragSingh-ev8qd Can you provide a piece of code that you are using or crate a stackblitz instead?

[@georgianstan8300]

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

[@madpwnz]

Woohoo! New video!!!

[@CodeShotsWithProfanis]

🎉 It's been a long time after the summer vacations :)

[@ekzGuille]

Hi! it's important to mention that ComponentRef.setInput() method is available in Angular 14.1.0

[@youknowwho4994]

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.

[@aram5642]

A real fun begins when the widget components are also meant to provide output (maybe they contain forms).

[@ugochukwuumerie6378]

Awesome, great video

[@CodeShotsWithProfanis]

Thanks! Glad you liked it.

[@zvedovas]

Amazing!

[@CodeShotsWithProfanis]

Thanks!

[@JesseJotun]

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?

[@CodeShotsWithProfanis]

Yeah unfortunately the setInput() is not typed. I do not have any workaround on this but I will give it a shot

[@lucascota7258]

Oh, my friend, excellent content. Is it possible to create real-time components with data coming from an api? all dynamic?

[@CodeShotsWithProfanis]

Yes that would be possible. Please come back and reply to this video if you tried and worked for you

[@sofiachaveshernandez2373]

Hi Profanis : ) Thank you for the video! Can this also be done with a non-standalone component?

[@CodeShotsWithProfanis]

I had a talk explaining how to achieve that. It is worth checking this out :) kzbin.info/www/bejne/p3u6aGaAaNSVprs

[@sofiachaveshernandez2373]

@@CodeShotsWithProfanis Thank you very much, I'll check it out : )

[@ellsonmendesYT]

what is the name of that extension wich shows labels on objc ViewChild(selector:'container', opts: {read:ViewContainerRef}) ?

[@CodeShotsWithProfanis]

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

[@ellsonmendesYT]

@@CodeShotsWithProfanis thank you sir!

[@KostasOreopoulos]

Great tutorial. Shouldn't we pass environmentInjector: inject(EnvironmentInjector) to the createComponent to give it access to the DI hierarchy? I am just guessing.

[@maxim1106]

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?

[@CodeShotsWithProfanis]

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?

[@dannypacheco4425]

i have this error: Cannot read properties of undefined (reading 'clear'). Im using Angular 13. Could you help me please?

[@CodeShotsWithProfanis]

Can you share your code? Perhaps a stackblitz would be very helpful

[@anguinan]

createComponent() won't compile when components doesn't have same attributes due to typing errors. Didn't find a solution yet...

[@strangeanimegroup]

Can you please tell me about the Output child to parent communication?

[@CodeShotsWithProfanis]

Stay tuned and it will be soon available on my video list :)

[@michaelcoltainecoltaine6323]

I enjoy your videos. Do you plan on finishing this series

[@imwichop]

I want to pass a specific method for each child component. It is possible? and how can I do it?

[@CodeShotsWithProfanis]

Can you please explain further what do you mean by saying "pass a specific method"?

[@mohammeddarwish7858]

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 !!! !!!

[@CodeShotsWithProfanis]

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.

[@ahmedrebai6042]

What advantage I will get if I will implement dynamic components?