Тёмный

Learn How to Create Dynamic Component in Angular 

Code Shots With Profanis
Подписаться 8 тыс.
Просмотров 25 тыс.
50% 1

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

Наука

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 75   
@joaor.g.castaldi6753
@joaor.g.castaldi6753 7 месяцев назад
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
@CodeShotsWithProfanis 7 месяцев назад
Glad you liked it! :)
@wasiullahkhan9685
@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
@CodeShotsWithProfanis Год назад
Thanks for your feedback Wasiullah. Glad you liked it! :)
@richnimbu
@richnimbu Год назад
I love how you display the various stages of how to complete this task. Very well explained!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Thanks for your feedback :) Glad you liked it
@ISBE91
@ISBE91 Год назад
Finally someone explains how to load component in angular without any spaghetti code Thanks!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Glad you liked it!
@juandaleonardo6466
@juandaleonardo6466 Год назад
hey profanis, i love this kind of angular course. thank you!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Happy to hear that! Thanks for the feedback!
@elialvarezmelgar9301
@elialvarezmelgar9301 5 месяцев назад
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
@CodeShotsWithProfanis 5 месяцев назад
Thanks for your warm feedback! :)
@tonis237
@tonis237 4 месяца назад
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
@CodeShotsWithProfanis 4 месяца назад
I'm glad to hear that you found it useful :)
@Nabulio85
@Nabulio85 11 месяцев назад
Really great explanations and use case. Thank you. 🙏
@longebor85
@longebor85 Год назад
Awesome job, Mr. Profanis. Thank you very much
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Glad you liked it!
@youssefchaygani8518
@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
@CodeShotsWithProfanis Год назад
Glad you liked it and thanks for the subscription :)
@fatihersoy7559
@fatihersoy7559 Год назад
Pretty explanatory and simple video. Great job Profanis, greetings from Turkish neighbour! :)
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Hey neighbor, thanks! Glad you liked it :)
@snk-js
@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
@CodeShotsWithProfanis Год назад
Glad you enjoyed it, and thanks for your feedback!
@SunnyVakil
@SunnyVakil Год назад
Super explanatory , thank you!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Thanks for your feedback Sunny. Glad you liked it
@avecesar
@avecesar 8 месяцев назад
Thank you for such a clear explanation.
@CodeShotsWithProfanis
@CodeShotsWithProfanis 8 месяцев назад
Glad you liked it
@ansaganie
@ansaganie 3 месяца назад
Thanks, Profanis! very Insightful! Looks like this is how 'ng-dynamic-component' lib works under the hood
@CodeShotsWithProfanis
@CodeShotsWithProfanis 3 месяца назад
Oh I didn't know a library for dynamic components was out there. Thanks for that
@MG-wx8yx
@MG-wx8yx Год назад
Your new subscriber here. Excellent explanation in all your videos. I learned a lot.
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Thanks for your feedback. Glad you like them :)
@youknowwho4994
@youknowwho4994 11 месяцев назад
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.
@CrusaderMen
@CrusaderMen Год назад
Thank you, this can be used to create creative things
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Ohh yeah, indeed!
@ekzGuille
@ekzGuille Год назад
Hi! it's important to mention that ComponentRef.setInput() method is available in Angular 14.1.0
@ezemans
@ezemans Год назад
Awesome content! In my case I had to use a ComponentFactoryResolver before creating the component, and It's worked!
@CodeShotsWithProfanis
@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
@ezemans Год назад
@@CodeShotsWithProfanis I'm using Angular 8. You are right, it's not necessary for Angular 13.
@AnuragSingh-ev8qd
@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
@CodeShotsWithProfanis Год назад
​@@AnuragSingh-ev8qd Can you provide a piece of code that you are using or crate a stackblitz instead?
@jacobadlerman3067
@jacobadlerman3067 Год назад
Yeah, it more understandable in comparison with a documentation, thanks a lot :)
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Glad it helped! :)
@anvianshi
@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
@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
@ugochukwuumerie6378
@ugochukwuumerie6378 Год назад
Awesome, great video
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Thanks! Glad you liked it.
@zvedovas
@zvedovas Год назад
Amazing!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Thanks!
@georgianstan8300
@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
@JesseJotun
@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
@CodeShotsWithProfanis Год назад
Yeah unfortunately the setInput() is not typed. I do not have any workaround on this but I will give it a shot
@madpwnz
@madpwnz Год назад
Woohoo! New video!!!
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
🎉 It's been a long time after the summer vacations :)
@sofiachaveshernandez2373
@sofiachaveshernandez2373 Год назад
Hi Profanis : ) Thank you for the video! Can this also be done with a non-standalone component?
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
I had a talk explaining how to achieve that. It is worth checking this out :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qJW73J3obpY.html
@sofiachaveshernandez2373
@sofiachaveshernandez2373 Год назад
@@CodeShotsWithProfanis Thank you very much, I'll check it out : )
@maxim1106
@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
@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?
@ellsonmendesYT
@ellsonmendesYT Месяц назад
what is the name of that extension wich shows labels on objc ViewChild(selector:'container', opts: {read:ViewContainerRef}) ?
@CodeShotsWithProfanis
@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
@ellsonmendesYT Месяц назад
@@CodeShotsWithProfanis thank you sir!
@lucascota7258
@lucascota7258 Год назад
Oh, my friend, excellent content. Is it possible to create real-time components with data coming from an api? all dynamic?
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Yes that would be possible. Please come back and reply to this video if you tried and worked for you
@KostasOreopoulos
@KostasOreopoulos 6 месяцев назад
Great tutorial. Shouldn't we pass environmentInjector: inject(EnvironmentInjector) to the createComponent to give it access to the DI hierarchy? I am just guessing.
@aram5642
@aram5642 3 месяца назад
A real fun begins when the widget components are also meant to provide output (maybe they contain forms).
@dannypacheco4425
@dannypacheco4425 Год назад
i have this error: Cannot read properties of undefined (reading 'clear'). Im using Angular 13. Could you help me please?
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Can you share your code? Perhaps a stackblitz would be very helpful
@ahmedrebai6042
@ahmedrebai6042 Год назад
What advantage I will get if I will implement dynamic components?
@strangeanimegroup
@strangeanimegroup Год назад
Can you please tell me about the Output child to parent communication?
@CodeShotsWithProfanis
@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
@imwichop Год назад
I want to pass a specific method for each child component. It is possible? and how can I do it?
@CodeShotsWithProfanis
@CodeShotsWithProfanis Год назад
Can you please explain further what do you mean by saying "pass a specific method"?
@anguinan
@anguinan 4 месяца назад
createComponent() won't compile when components doesn't have same attributes due to typing errors. Didn't find a solution yet...
Далее
Get to Know Signal Queries in Angular 17
17:43
Просмотров 1,3 тыс.
Learn How to Use Angular's 17 Defer Block
23:50
Просмотров 3,5 тыс.
Local Change Detection in Angular is easy with Signals
10:40
ngTemplateOutlet is WAY more useful than I realised
16:36
What is Span in C# and why you should be using it
15:15
Полезные программы для Windows
0:56