💡 Follow Decoded Frontend also here: Join More than 500+ Angular Developers on our Discord Server - bit.ly/decoded-frontend-discord Also, follow me on: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi
@oleksandrvorovchenko8674Ай бұрын
Дякую! Класне пояснення , як завжди!
@DecodedFrontend28 күн бұрын
🙏🏻 дякую!
@EtoBARAKUDAvasaАй бұрын
My first experience of dynamic component start at ~3 year ago when add npm module to Angular who doesn't have integration with Angular - its very help me make unic feature and save many times. And I recommend make some unic ComponentRendererService with method renderComponent who take (component: Type, inputs: Partial) and return ComponentRef and here you can also control of destroy dynamic components
@oleksandrfesiuk6310Ай бұрын
Дякую за корисний контент!
@DecodedFrontendАй бұрын
Дуже дякую за фідбек😊
@vkipermanАй бұрын
Another gem of a video!
@amrahmed308329 күн бұрын
Great video but I think you need to add in what situations would this be helpful and recommended 😊
@DecodedFrontend28 күн бұрын
You’re right, I should have mentioned that. The next video is also about dynamic components and I’ll do it there 😉
@amrahmed308328 күн бұрын
@@DecodedFrontend sounds great😃❤️
@hobbytsworld25 күн бұрын
As always top content!
@TheSysmatАй бұрын
Nice video, very good ng content
@DimanIvanov16 күн бұрын
Awesome!
@DemystifyFrontend18 күн бұрын
Very well explained 🎉
@rifathossain278819 күн бұрын
thank you so much, this video was amazing.
@serhiilytvyn875329 күн бұрын
Thanks a lot for your videos and good explanation.
@ievgensvichkar264320 күн бұрын
I wish working with inputs and outputs of dynamic components was consistent. But instead we have: inputs are set via setInput() API w/o direct access of the class instance, but output is accessed using direct access to the instance
@pointlesspos8440Ай бұрын
I'v been using ngx-dynamic components for a few years. It's also a nice option. Pair that with gridster and you can do a dashboard.
@Sevkingblade27 күн бұрын
Awesome video as always Dmytro!
@cdotforce15 күн бұрын
Very useful when you need to federate components from a MFE to another one because the client does not provide a components library. That was my case.
@cherepovets8994Ай бұрын
Thank you! Great video! But I want to add, that output() is not signal based
@DecodedFrontend28 күн бұрын
Oh, indeed, I said “signal-based outputs” which is wrong. Sorry for the confusion, you are right. Just most of the new APIs like input, ViewChild, etc are signal-based, so that I mapped in my head all these new functions as signal-based too 😅
@farshadbayat64Ай бұрын
Thank you for this video.
@returncode0000Ай бұрын
Very useful content
@DecodedFrontendАй бұрын
Thank you! 😊
@returncode0000Ай бұрын
@@DecodedFrontend It's useful because you used a very small example/use case so it's understandable and you have a very good speed when explaining, not too fast, so that everyone can follow your explanation 👏 Keep it up! (it is also a topic that I didn't understood well enough, so thanks for this also)
@knoppix20Ай бұрын
Great tutorial! But is it possible to specify component name as string const/variable and then convert/import this string to real object/instance?
@fabiangubeli331926 күн бұрын
Also interested in this question. Currently I use a map from String to Component to solve this
@knoppix2026 күн бұрын
Once i tried to made this. Name of class from string to object conversion but webpack builder not allowed to do so as it cant find full real path of component. It need that all component paths before compile process was already fully know but not pieces of this.
@ytamb01Ай бұрын
Really enjoyed the video. Thank you. I would be very interested to see a nice implementation of lazy-loading dynamically generated components as part of this series.
@andrewg2998Ай бұрын
Are you talking about the route based lazy loading they introduced in angular 15 or the deferrable views ?
@ytamb01Ай бұрын
@@andrewg2998 I have been able to do this in ng 18 and it shows a lot of promise for something like a configurable dashboard. I really like the idea of a user being able to configure what components they would like without having to load them in the initial bundle. async onLoadComponent() { this.viewContainerRef.clear(); const { MessageComponent } = await import('../message/message.component'); this.componentRef = this.viewContainerRef.createComponent(MessageComponent); if (this.componentRef) { this.componentRef.setInput('message', 'this message was set by the dashboard'); } }
@ytamb01Ай бұрын
@@andrewg2998 In ng18 you can do this on a button click: async onLoadComponent() { this.viewContainerRef.clear(); const { MessageComponent } = await import('../message/message.component'); this.componentRef = this.viewContainerRef.createComponent(MessageComponent); if (this.componentRef) { this.componentRef.setInput('message', 'this message was set by the dashboard'); } } I think this would be great on a dashboard where user could select the components they want without loading them in the initial bundle. But I'm not sure what the best pattern for something like this would be. I don't love the async and await here for example.
@ytamb01Ай бұрын
@@andrewg2998 No I meant using import directly e.g. const { MessageComponent } = await import('../message/message.component'); and then this.componentRef = this.viewContainerRef.createComponent(MessageComponent);
@mohammadrezamrg938027 күн бұрын
It would be good if making something with server driven ui like angular spartacus storefront
@yurtiksupreme46521 күн бұрын
Якби ми користували наприклад @if Statement ? чи є різниця між ними? Для чого користувати dynamic component?
@DecodedFrontend21 күн бұрын
З функціональної точки зору різниці не має. Річ тут скоріше в тому, що рішення з if-ами буде гірше масштабуватись. Якщо ми уявимо, що в нас кілька варіантів віджетів, то в нашому хост-компоненті (компонент в якому створюємо віджети) одразу зʼявиться під кожний варіант свій if, що вже не дуже зручно. Але гірше те, що кожного разу коли треба буде додати новий тип віджету, треба модифікувати хост-компонент, тобто тут порушується open-closed principle, який каже що функціонал компоненту може бути розширеним без його модифікації. Це веде так чи інакше до негативних наслідків при масштабуванні і також тестуванні, бо кожен новий тип віджету треба буде «мокати» і оновлювати тести. Резюме: if / else добре коли в тебе 1-2 компонента і ти впевнений що: а) це не потрібно масштабувати. б) знаєш наперед з яким компонентом будеш працювати. Приклад: компонент профілю користувача який показується в залежності від того, чи користувач залогінився. Dynamic components добре коли в тебе є багато однотипних компонентів і ти впевнений що: а) в майбутньому будуть добавлятись нові типи. б) не зрозуміло наперед який саме компонент треба буде створити. Приклад: створення компонентів (віджетів) з json конфігу який приходить з серверу. Ще рекомендую глянути моє крайнє відео також про створення компонентів динамічно, але декларативним підходом. Там в кінці я також показую приклад як би це виглядало в реальному житті - kzbin.info/www/bejne/pWSsY3ida7ZngqMsi=n2A-VcWvct9gudbA
@yurtiksupreme46521 күн бұрын
@@DecodedFrontend зрозуміло. Дуже дякую!
@Tanvir164225 күн бұрын
I noticed you didn't add the Dynamic Component in the imports array. So, is it lazily loaded?
@DecodedFrontend25 күн бұрын
No, it is eagerly loaded. For lazy loading, I would need to use import(../path2component…)
@jontaylor1586Ай бұрын
I needed this the other day. The fact that you're creating siblings of the element used to make the viewContainerRef threw me way off.
@rkrao8582Ай бұрын
Omg as complex as it is, I would only imagine what would happen if try to write tests for this. 🤯 As always great content though
@stepandemchenko9870Ай бұрын
Is it possible assign directive to dynamic component? For example create dynamic component which was implement of ControlValueAccessor interface and after that assign to this component formControlName directive
@DecodedFrontendАй бұрын
Hey! As far as I know, it is not possible to apply directives at runtime. However, I think that something similar you could achieve with Directive Composition API.
@bukanakaАй бұрын
Имба контент подъехал на угловой тачке))
@DecodedFrontendАй бұрын
haha :D
@BishoySaeed-r2q19 күн бұрын
we need course for ssr or a video anything will be fine
@o_glethorpeАй бұрын
Thanks for sharing... Would You be so kind to create a video about service locator? Im trying to implement clean archtecture and want to be able to configure what service some component should use on the start of the application, something like, now the signin component should work with firebase, now with rest api.
@Anonym-mw5lz15 күн бұрын
is it somehow possible to lazy load dynamic components?
@farshadbayat64Ай бұрын
How can we dynamically create a ViewContainer? Is it possible to create a ViewContainer using an element that exists in the component or by using the class name?
@hendjfjfj.hdjfn_hАй бұрын
Go. Go. Go 🎉
@urtaav639Ай бұрын
excellent video, master how can I create multiple components that is, I have a drop-down list of options when selecting 1, I want to show component1 component2 and component5, when selecting 2 show component2, component3, component8 to say the least, the idea is to show the components without order and That each one is connected to my form, can you do that or what is the topic to investigate it, help master
@HimanshuGargMusicАй бұрын
How we can use the composition directive for the component where we form controls and methods that we want to remove its duplicacy and the code can not be used as directive in component, Thanks in advance ❤
@musoverda26 күн бұрын
why do you use the # symbol to create a private property?
@DecodedFrontend26 күн бұрын
Because it is shorter and unlike TypeScript’s” “private” access modifier, the # makes property private even later at runtime.
@musoverda26 күн бұрын
@@DecodedFrontend do you use the # symbol in your projects? in production?
@Marshall86MT2 күн бұрын
I found it a bit confusing, I'd rather have preferred having those solutions split instead of mixing them up in the same file. But thanks anyway 😊
@BishoySaeed-r2q19 күн бұрын
i think there is a lag in the video ?
@Diamondiam0ndАй бұрын
Hi I feel like I got nobody to ask, but is passing signal inputs through some component a valid pattern? Like I got a parent main component named "A", which has declared some signal value. This component have dumb B component declared inside its html. The B component contains some mini ui component named "C". Is passing a value through signal inputs/outputs from component C to B to A a valid pattern?
@codeSurvivorАй бұрын
It is, but if you get more than 2 levels I would use a shared service with that signal, observable or whatever you need to share. This is a common pattern when needing to communicate components that are siblings or deeply nested children
@pierre-louis2711Ай бұрын
Hello and thank you as always for your awesome content. I juste miss one thing here : could you provide me some use-cases of creating component this way ? :)
@DecodedFrontendАй бұрын
There are many cases. For example, you might get a config from the server that describes which components should be created, and since you don't know the config at build time, you have no choice other than creating components at runtime. You also might track validity changes of your form and dynamically create/destroy components with error messages depending on the validity state of the form control. This is just the first that came to my mind :)
@pierre-louis2711Ай бұрын
@@DecodedFrontend Thank you for your reply ! Creating component from a config file is a good example. Thank you ! It helps me. As concern as form errors messages, is that not the responsability of @if (*ngIf) ?
@Ahmed.KharratАй бұрын
You can also create a modal service that creates and manages modal wrappers, allowing you to inject any component inside these wrappers, similar to how `NgbModal` works ;)
@DecodedFrontendАй бұрын
@@Ahmed.Kharrat dialog window a good example too. Thanks, Ahmed!
@Edgars82Ай бұрын
In which case this can be useful? Just create component with all the inputs and outputs and render it based on condition.
@sokka7460Ай бұрын
For example, for a wyswyg, or if you have a dashboard where the user can create different type of widgets
@DecodedFrontend29 күн бұрын
It might be useful when you don't know in advance which component has to be rendered (e.g. It depends on configuration from server). Using if/else blocks might work ok if you have only 1-2 components to deal with, otherwise you will quickly notice that this solution doesn't scale well and each time you need to add a new component, you have to introduce another @if block.