NgComponentOutlet in Angular - DECLARATIVE Dynamic Components

Поділитися
Вставка
  • Опубліковано 4 січ 2025

КОМЕНТАРІ • 38

  • @DecodedFrontend
    @DecodedFrontend  4 місяці тому +1

    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
    @returncode0000 4 місяці тому +5

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

  • @AnamariaNanes
    @AnamariaNanes 4 місяці тому +2

    Thanks!

  • @gund_ua
    @gund_ua 4 місяці тому +4

    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
      @DecodedFrontend  4 місяці тому +1

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

  • @gagiksimonyan3782
    @gagiksimonyan3782 4 місяці тому +3

    Thanks Dmytro for another useful video)

  • @manuelhohagen4441
    @manuelhohagen4441 4 місяці тому +1

    Another amazing video! So many thanks!!

  • @ahfazrahman9328
    @ahfazrahman9328 4 місяці тому

    Thank you for the wonderful content @DecodedFrontend.

  • @maximvoloshin7602
    @maximvoloshin7602 4 місяці тому +1

    Thanks for limitations. Great video!

  • @haroldpepete
    @haroldpepete 4 місяці тому +1

    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

  • @vamvdotnet
    @vamvdotnet 3 місяці тому

    Great demo!!!

  • @DraaElMizan
    @DraaElMizan 4 місяці тому

    Another amazing tutorial. Thanks Dmytro.

  • @Nabulio85
    @Nabulio85 4 місяці тому +1

    Really great. ❤

  • @alphamarouanadiallo8238
    @alphamarouanadiallo8238 3 місяці тому

    Thanks again !

  • @oleksiipopov5143
    @oleksiipopov5143 4 місяці тому +1

    Thank you! It was realy usefull video!

  • @alexander-3701
    @alexander-3701 4 місяці тому +3

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

    • @DecodedFrontend
      @DecodedFrontend  4 місяці тому +1

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

    • @alexander-3701
      @alexander-3701 4 місяці тому

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

    • @ytamb01
      @ytamb01 4 місяці тому

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

  • @musoverda
    @musoverda 4 місяці тому

    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
    @spamdump7337 4 місяці тому +1

    why Type instead of WidgetComponent?

  • @albertoalbericio6163
    @albertoalbericio6163 2 місяці тому

    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
    @FriendlyAce 4 місяці тому +1

    Are your courses also available on udemy?

    • @DecodedFrontend
      @DecodedFrontend  4 місяці тому +1

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

  • @MrVinodkumar92
    @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
    @NiGhTm4r389 Місяць тому

    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
    @ahmedshehata4143 4 місяці тому

    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
    @stefanstanchev5315 4 місяці тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  4 місяці тому +1

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

  • @oWeRQ666
    @oWeRQ666 2 місяці тому

    They'll do anything not to use the virtual dom.

  • @bukanaka
    @bukanaka 4 місяці тому +1

    Атомный контент подъехал!