NgComponentOutlet in Angular - DECLARATIVE Dynamic Components

Рет қаралды 11,744

Күн бұрын

Пікірлер: 38

@DecodedFrontend 5 ай бұрын

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/DecodedFrontend. You’ll also get 20% off an annual premium subscription.

@returncode0000 4 ай бұрын

You are one of the best Angular instructors, I really love the clarity on how you explain things, great job!

@AnamariaNanes 5 ай бұрын

Thanks!

@DecodedFrontend 4 ай бұрын

Thank you so much for your support ❤️

@gund_ua 5 ай бұрын

Nice video as usual Dmytro! Finally, 7 years later, angular added this to the core and my library can be deprecated (once outputs are added as well).

@DecodedFrontend 5 ай бұрын

Thanks, Alex! Your library is fantastic and was happy to recommend it to everyone who neede to handle complex use cases with dynamic components! 🙌🏻

@maximvoloshin7602 5 ай бұрын

Thanks for limitations. Great video!

@DecodedFrontend 5 ай бұрын

Thank you 😊

@gagiksimonyan3782 5 ай бұрын

Thanks Dmytro for another useful video)

@manuelhohagen4441 5 ай бұрын

Another amazing video! So many thanks!!

@ahfazrahman9328 5 ай бұрын

Thank you for the wonderful content @DecodedFrontend.

@haroldpepete 4 ай бұрын

Damn, the last part was impressive, you're the angular man, thanks. I would like to watch a video about how get user preferences from the backend, then hide or show features depend on user priveleges and preference, and if you may use guard in routes, it would be nice

@DraaElMizan 5 ай бұрын

Another amazing tutorial. Thanks Dmytro.

@vamvdotnet 4 ай бұрын

Great demo!!!

@Nabulio85 4 ай бұрын

Really great. ❤

@alphamarouanadiallo8238 4 ай бұрын

Thanks again !

@oleksiipopov5143 5 ай бұрын

Thank you! It was realy usefull video!

@DecodedFrontend 5 ай бұрын

Glad to hear that! Thank you!

@alexander-3701 5 ай бұрын

@DecodedFrontend How would you prevent loading unused components from the map?

@DecodedFrontend 5 ай бұрын

Using the import('./component-path') to lazy load them :)

@alexander-3701 5 ай бұрын

@@DecodedFrontend Another question. :) How would you approach this case but with micro-frontends?

@ytamb01 5 ай бұрын

@@DecodedFrontend yes. your widget keys could be the component-paths so you don't have to import them up-front?

@musoverda 5 ай бұрын

thank you! another interesting and useful video! this time - do you use protected as an alternative to private? ) i like this approach more than the # symbol

@spamdump7337 4 ай бұрын

why Type instead of WidgetComponent?

@albertoalbericio6163 3 ай бұрын

Do you know if you can use [ngComponentOutletInputs] to chain Inputs? I mean, instead of defining a static string value for the input, bind it to a real Input in the creator component. Thanks for your video.

@FriendlyAce 5 ай бұрын

Are your courses also available on udemy?

@DecodedFrontend 5 ай бұрын

Hello, Unfortunately, I moved from Udemy and my angular courses are not available there.

@MrVinodkumar92 4 ай бұрын

How can we get the widget component class without defining so that the component is not dependent and everything can be lazily loaded.

@NiGhTm4r389 2 ай бұрын

There is no [ngComponentOutletInputs] (anymore?). Instead I have to use ngComponentOutlet as a structural directive: *ngComponentOutlet="component; inputs" Is this video still up to date? Also, is it possible to strictly type the inputs so I don't just put random stuff in there? I imagine having like 5 different components, that another component, which has the directive can use and they all have different inputs. I kinda want a type or interface that says "this component has these inputs". Is that possible?

@ahmedshehata4143 5 ай бұрын

I have an Angular application that uses lazy-loaded modules. One particular module contains a lot of components that depend on user input, where only one component is visible at a time based on the user's choice. I am experiencing issues with managing the visibility of these components. Currently, I am using CSS classes to hide/show components, but this approach leads to problems when interacting with visible components. When I use the *ngIf directive to conditionally render components, it works correctly but may cause performance issues as it triggers re-rendering of components each time the user changes their input. How can I efficiently manage the visibility of these components to improve performance while avoiding unnecessary re-rendering?

@stefanstanchev5315 4 ай бұрын

Great demo, but may I ask something? Why you prefer to create and re-assign properties instead of using signals?

@DecodedFrontend 4 ай бұрын

Hi :) Since it is a tutorial, everything that is not related to the topic directly, I simplyify as easy as possible to reduce unnecessary cognitive load. You should not treat it as a production-ready code.

@stefanstanchev5315 4 ай бұрын

@@DecodedFrontend Sounds valid. However, from my perspective, many would be interested in seeing how you would implement this piece of code. Signals are straightforward, yet they remain a core part of Angular functionality. Kudos for all the great work you’ve done and continue to do!