Advanced

Поделиться
HTML-код
  • Опубликовано: 5 сен 2024

Комментарии • 135

  • @DecodedFrontend
    @DecodedFrontend  3 года назад +28

    Use Timecodes in video description and leave your feedback 🙏🏻
    UPD: *I just realised that I made mistake* . I told that when you import module calling forRoot() Angular imports only services *WITHOUT declarations* - this is *NOT TRUE,* declaration are be ing imported as well. If you do not want to import declarations you can create another NgModule without declarations and return it from static method. Thanks *Alex Malkevich* for correcting me.

  • @farfazzi
    @farfazzi 3 года назад +9

    i didnt see this pattern explained so well anywhere else, you are doing outstanding work you should have way more subscribers and popularity

  • @antongrekov1879
    @antongrekov1879 3 года назад +6

    Great video, thx a lot, friend. Helped me fully understand forRoot/forChild methods on module class. Only one mistake i found is that you saying: "forRoot will not return module's declarations/exports but only providers". This is wrong. It actually will also connect modules declaration components/pipes/directives as weel as what module exports. forRoot helps us decouple providers and connect them at root level. It also connects declarations/exports of a module. But when you call w/o forRoot it excludes providers, this is how it all works

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Hi Anton! Yes you are right, I was pointed out to that my mistake some time after video publication and I should have the attached comment regarding that… (I will check it one more time). Nevertheless, thank you that you watch my videos carefully and also for correcting me! 🙏🏻

    • @miroslavkovac8888
      @miroslavkovac8888 4 месяца назад +1

      Thanks man, i was wandering about this one, why not just import the module at the root and declare the service in the root module's providers? I guess this saves a bit of code, so that the clients don't need to 'provide' each service manually.

  • @gund_ua
    @gund_ua 3 года назад +16

    Hey Dmytro, very nice video with clear examples!
    I actually do use this patter quite a lot in the libraries for configuration purposes like withConfig etc. So it's quite useful.
    One thing to note - when you import a module using a static method you are still getting all of it's exported stuff like components, directives, etc in the same way as you would get during normal import. It's just something to be aware of.
    If for some reason you do not want to export those things in static methods you can create another NgModule and return it from the static method but in most cases it's actually a desired effect to have all exports available anyway 😀

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +8

      Hi Alex!
      Hm.. Yeah, you are right I just checked and indeed declarations are being imported by calling a static method... For whatever reasons I was always so sure that it behaves as I said that I had never actually checked it :D Thanks for correcting me!

  • @sanjaygarg3540
    @sanjaygarg3540 3 года назад +1

    shareReplay operator basically turns the unicast observable to multicast which means all subscribers will share the same execution, great example to explain this pattern!

  • @giorgimerabishvili8194
    @giorgimerabishvili8194 3 года назад +19

    Definitely the best channel!

    • @abenjamin13
      @abenjamin13 3 года назад

      I second this comment 👍

  • @jerryvux
    @jerryvux 3 года назад +1

    Again, can't stress this enough but your videos bested all the paid ones available out there. Thank you so much for providing us quality content for free

  • @prabuk3819
    @prabuk3819 3 года назад +6

    We really really needed this... Thank you...

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Thanks! I am glad it was helpful 😊

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      Hi Prabhu! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

  • @radvilardian740
    @radvilardian740 3 года назад +2

    You said to leave comment, so I say This so freaking useful tutorial, please keep going...👍👍

  • @iulianradulescu7057
    @iulianradulescu7057 4 месяца назад

    You understood the problem at a deeper level because you struggled with it yourself ! That's why you know exactly where the pain was :) . Excellent explanation man ! Better than the docs !

    • @vovanhung9406
      @vovanhung9406 4 месяца назад

      actually, he needs to read a docs to explain to us. LOL

  • @AnuradhaMudalige
    @AnuradhaMudalige 3 года назад +2

    This is great Dmytro, you deserve more views!! Clear explanations. You have cleared most of the problems I've had so far.

  • @JohnRin
    @JohnRin 3 года назад +1

    Incredible tutorial! After reading many blogs about it, only you made it clear for me. Thank you!!

  • @jojojawjaw
    @jojojawjaw 3 года назад +1

    The best channel on Angular!

  • @DavidSoles
    @DavidSoles 3 года назад +2

    Very well explained. Thanks.

  • @ammireddy484
    @ammireddy484 2 года назад +2

    Excellent, You deserve 100× more subscribers ❤️👍

    • @DecodedFrontend
      @DecodedFrontend  2 года назад +1

      It will be great if one day it comes true 😄 thank you!

  • @nanasarathi
    @nanasarathi 2 года назад +2

    Very well explained 👍 one thing to notice is, when you configured lazy module interval using forChild() then again new instance of service got created which resulted in resetting of interval...

  • @user-gv5nm
    @user-gv5nm 2 года назад +1

    отличный пример , чтобы раз и на всегда понять разницу между этими методами. . спасибо.

  • @aminerhouma
    @aminerhouma 3 года назад +1

    Very good example, thanks.

  • @georgiekriparoy
    @georgiekriparoy 3 года назад +2

    Why after using the withConfig() method, the Lazy loaded module timer starts from zero instead of continuing the timer from where the home module left it. So doesn't this mean it is not a singleton instance of the polling service which was the whole idea of using this approach

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      Hi Georgie! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

  • @ariMuayad
    @ariMuayad 3 года назад

    It's just great, please don't stop posting.

  • @ganesh56789
    @ganesh56789 3 года назад +2

    You explained it very well..got all clearty now.. Thank you 🙏

  • @SouravDuttaROCKSTAR
    @SouravDuttaROCKSTAR 3 года назад +2

    Every video is a masterpiece .. somehow never knew about these features before .. very clear videos, loving the series .. keep them coming .. 🙌👍🏼 😎🎉

  • @paimfp
    @paimfp 3 года назад +1

    Great explanation, thanks!

  • @nguyenhoa7759
    @nguyenhoa7759 3 года назад +2

    Awesome Advanced Angular course! How easy those definitions can be understand. Thank you so much, it's over my expectation! 🔥🔥

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Glad you liked it and thank you for your feedback 😊

  • @maximermoshin393
    @maximermoshin393 3 года назад +3

    Thank you for the video. Really helpful. Now this pattern is more understandable than before)

  • @abhisheksitar
    @abhisheksitar 3 года назад +3

    What an awesome tutorial! Thank you!

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      HI Abhishek! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

  • @alvinyanson
    @alvinyanson 3 года назад +2

    Everything in this video is well explained. The only thing which is wrong is the closed captions for MODULES which read as MODELS.😁 Anyways thank you for this Dmytro.

  • @Sinan997
    @Sinan997 8 месяцев назад

    Great video!
    but i want to mention that in first part, if you import PollingModule in only AppModule, lazy loaded module and eagerly loaded module will get the same instance of PollingService. so app component and lazy component was going to use same count

  • @volodyapanosyan5961
    @volodyapanosyan5961 3 года назад +2

    I noticed that In 26:10 when clicked in " Load Lazy " button, this Pollingservice ceases to be singleton.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Hi Volodya,
      In scope of entire application- yes, because lazyloaded module will use its own instance of the service but with a different configuration of INTERVAL token.

    • @volodyapanosyan5961
      @volodyapanosyan5961 3 года назад

      ​@@DecodedFrontendThanks for response. You are made me great favor

  • @user-kx8wp1fy6l
    @user-kx8wp1fy6l 2 года назад +2

    Is this information up to date? Because since Angular 6 you don't have to use forChild to create a singleton service. It's enough to declare your service with providedIn: root in decorator and you will have the same service instance in your main module and in your lazily loaded module

  • @MatiasAlibertti
    @MatiasAlibertti 3 года назад +2

    Great video, thanks!

  • @DecodedFrontend
    @DecodedFrontend  3 года назад +1

    🔥🔥🔥Do you want to master *Angular Material Themes* like a PRO? Check out my new Workshop where you will find a lot of advanced tips & tricks which will help you to make your themes maintainable, lean & consistent! Limited 50%-off discount is about to expire very soon: 🔗 bit.ly/angular-material-theming-workshop 🔥🔥🔥

  • @eugenetcgcomputer-guy6103
    @eugenetcgcomputer-guy6103 Год назад

    I really love your videos, you do explain more complex stuff in a more easier way than it should be. Being a fullstack who love backend than frontend, your videos are very enlightening and by far made me enjoy Angular more than i do of ReactJs, i must confess. Great content

  • @ann_bubochka
    @ann_bubochka Год назад

    as I understood, these functions allow you to import module A into any number of other modules using one instance of providers of A module for all application🎉
    Thanks for your videos ❤

  • @urielrodriguezusma
    @urielrodriguezusma 3 года назад +2

    Excellent class. Thank you

  • @SYMAM116
    @SYMAM116 3 года назад +2

    Just discovered your channel, really great content. I am watching lots of your videos. What I noticed is that you don't have a lot of views compared to other dev channels, and to be honest you deserve way more views given the quality of the content you provide. Personally I think you are missing on the views because your videos are too long, I think it would be better if you divide your videos to a series of short videos (8 min maximum). Personally I am following other dev channels and noticed that the difference is manly in the videos duration. Keep up the hard work man and all the best of luck.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +2

      Hi! Thanks for such a great feedback :)
      It is hard to say because RUclips algorithm constantly changes but my "experiments" show that longer videos preferable because user retention is higher and RUclips likes it. Also I noticed that most of my viewers prefer longer videos where everything is explained in details rather than briefly go through the topic like Fireship channel does as example. Or maybe it is just because my channel is too young, it is just 1 year old :)

    • @arpittripathi8089
      @arpittripathi8089 3 года назад

      I agree with you on views but these topics are quite core ones which do require some extra amount of time to explain.

  • @stepandemchenko9870
    @stepandemchenko9870 3 года назад +2

    Thanks, really helpful!

  • @mtvspec
    @mtvspec 2 года назад +2

    Nice series. What software and hardware you use to streaming?

    • @DecodedFrontend
      @DecodedFrontend  2 года назад

      Hi! Thank you:) I use iMac 5k and Camtasia 2020 to record and edit my tutorials and courses

  • @bancamilleri1546
    @bancamilleri1546 3 года назад +3

    Hey, love you videos. I think you forgot to list which course you started off with though. Is it the Maximilian maybe? Thanks.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Ah... indeed! Yes, it is a course from Maximilian :) this one bit.ly/angular-for-beginners

  • @ali-chavoshi
    @ali-chavoshi 2 года назад +1

    very good my friend.very awsome ❤️

  • @sPanKyZzZ1
    @sPanKyZzZ1 3 года назад +2

    Awesome, thank you for the info!

  • @drone-plus-plus
    @drone-plus-plus 3 года назад +1

    Excellent presentation of the material, thanks. I would like even more videos in the style of ideas for where and how patterns can be used in the context of an angular (Bridge pattern) =)

    • @drone-plus-plus
      @drone-plus-plus 3 года назад

      Following your example, I have already found two use cases. I'll tell you about the second one, I used this approach for searching with a list, where the search component (in which there is only an input for a typing) works through an abstraction with a list.

  • @mktrann
    @mktrann Год назад

    Thank you so much for your amazing explanation!

  • @haroldpepete
    @haroldpepete 2 года назад

    that's advanced concept and you explain as gods, thank you

  • @the_simple_dude1650
    @the_simple_dude1650 2 года назад

    Thank you very much for the clear explanation.

  • @SaurabhGangamwar
    @SaurabhGangamwar 3 года назад

    Best content related to angular

  • @sarthaktuteja3866
    @sarthaktuteja3866 2 года назад +2

    Can you please create a course on advanced angular topics? Very well explained btw!!

    • @DecodedFrontend
      @DecodedFrontend  2 года назад +2

      I can and think about that. I would appreciate which topics would you like to see there :)

    • @sarthaktuteja3866
      @sarthaktuteja3866 2 года назад

      All topics which make someone an expert angular developer from an intermediate developer. Some topics you can include maybe change detection, decorators, view encapsulation to name a few..

  • @johnadaikalasamy
    @johnadaikalasamy 3 года назад +2

    Great video, Thanks

  • @_cipriangg_
    @_cipriangg_ 2 года назад

    You have such an awesome channel!

  • @pranrv4983
    @pranrv4983 2 года назад +1

    Can you please make a video about getters and setters in Angular and its use cases?

  • @ptu15
    @ptu15 3 года назад +1

    love this channel

  • @sampsonorson
    @sampsonorson 3 года назад +1

    Thanks for the great content. Please, I noticed that if the HomeModule isn't imported into the AppModule and it still works. The only connection I can make between the HomeModule and the AppModule is the routes and references the HomeCompoment. Please, why does this work?

  • @gimpinator
    @gimpinator 3 года назад +2

    I really like your videos, nice work. But one thing, please dont say 'Model' when you mean 'Module'. Otherwise keep the good videos going :-)

  • @awisemanoncesaid12
    @awisemanoncesaid12 3 года назад +2

    0 dislike , i hope Ben Awad not seeing this video XD

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      I don’t think he watches such small channels like my :) and he’s about React only (if I remember right)

    • @awisemanoncesaid12
      @awisemanoncesaid12 3 года назад

      ​@@DecodedFrontend your channel is one of the best and ur videos content are so important , showing ur mistakes in video need a lot of self confident and help other developers not fall in the same mistake that s why ur channel is gold .. and for Ben he just a spoiled react brat XD ,

    • @alex_chugaev
      @alex_chugaev 3 года назад +2

      Once React will have a built-in hook "useAngular()". Then Ben will change his opinion.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Haha! True 😂

  • @abhiagarwal96
    @abhiagarwal96 3 месяца назад +1

    Once you started using forChild, the timer was not shared? or is something I'm missing?

  • @p.s29
    @p.s29 3 года назад +2

    Thanks for uploading it..
    I learn a lot from you. :)

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      My pleasure!

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      HI Prateek! Are you looking out for job opportunities in web development currently? We are a web dev company and looking to hire. please let me know if interested.

    • @p.s29
      @p.s29 3 года назад +1

      Hi Shivani,
      Thank you for reaching out to me but I'm not looking for job right now.
      P.S. kudos to the efforts you're putting in for recruiting people. 🙂

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      @@p.s29 Thank you for your response Prateek! Are you not looking out because you are already working? We are especially interested in hiring people with work experience. So if you have around 2 years of work experience and want to work on interesting projects and grow as a developer please consider the opportunity. If thats not you, then if you know someone like that, please refer them to me. Thank you.

    • @p.s29
      @p.s29 3 года назад +1

      I recently accepted an offer from a company that's why I'm not looking for job change and as for reference I'm sorry I don't have any.

  • @TheGothicSecret
    @TheGothicSecret Год назад

    Thank you!!! Very good video

  • @adriansie542
    @adriansie542 3 года назад +1

    Almost a month and you still don't have dislikes. So...
    let me...
    be first! huehue
    Kidding, very good explanation

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Haha :D thanks!
      Yeah.. I am also surprised how long it stays with 0 dislikes. Haters have somehow fucked up 😄

  • @fireflysemanticsmedia6267
    @fireflysemanticsmedia6267 2 года назад

    Awesome demo and explanation!!

  • @seanbruceful
    @seanbruceful Год назад

    Hi, Learning Angular for 1 month. I like your videos and it's help me a lot. One question I have when watching is that when to use @Inject declorator and when to use just constructor injection ? It's pretty confused to me.

  • @pedrofernandes2005
    @pedrofernandes2005 3 года назад +2

    Another great video as usual.
    Unrelated question: is it really necessary for libs to use the ng build? Why not just put the tsconfig point to the folder of the lib? What practical difference does it make between both ways? If you have multiple libs it can get pretty complicated that way.

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      yes, you are right! You can use also paths mapping in tsconfig as aliases to your libs and it would be even better way. Sometimes during recording you just do not think about all aspects especially if it doesn't directly relate to the topic. Sorry for confusion :)

    • @pedrofernandes2005
      @pedrofernandes2005 3 года назад

      @@DecodedFrontend hey thanks for the answer. it was actually an ongoing discussion on our project and I had this doubt on the back of my mind! :)

    • @joshholmes6366
      @joshholmes6366 2 года назад

      @@DecodedFrontend It would be great if you could do a video regarding ng libraries and the different ways to link them to your project for testing.

  • @abdouafailal4869
    @abdouafailal4869 3 года назад

    Thanks, you are the best!

  • @fawadmukhtar2234
    @fawadmukhtar2234 2 года назад +1

    Great

  • @MoMoadeli
    @MoMoadeli Год назад +1

    Thanks!

    • @DecodedFrontend
      @DecodedFrontend  Год назад

      Thank you soo much for your support!

    • @MoMoadeli
      @MoMoadeli 9 месяцев назад

      @@DecodedFrontend BTW, @06.08 you mention shareReplay subscribers only get the emissions from the moment of subscription. Actually, with no count argument passed, shareReplay subscribers get ALL previous emissions. shareReplay(0) will do what you mention.

  • @zellkon
    @zellkon Год назад

    Thanks for this TUT

  • @gkarapeev
    @gkarapeev Год назад +1

    Instead of providing the custom injection token, couldn’t we just type the @ContentChild with the Widget? And have Widget be a base class instead of interface, and have WeatherWidget & SprintWidget extend it. What advantages/disadvantages does this have compared to your approach with a custom injectiontoken?

    • @DecodedFrontend
      @DecodedFrontend  Год назад +1

      There are no to much differences between those 2 approaches. If derived classes share some functionality, it would be even better to use a base class as you described, so it can share common functionality. I think if I recorded video today I would use the approach with a class :)

    • @gkarapeev
      @gkarapeev Год назад +1

      @@DecodedFrontend I see, just double-checking, as I'm not sure myself. Thanks for the quick reply and the great videos!

  • @beodan9219
    @beodan9219 Год назад

    cool explain

  • @gopitech4773
    @gopitech4773 3 года назад +1

    Hi sir please give your input's
    I am using EventManager from @angular/platform-browser. In this addGlobalEventListener method does not override default browser shortcuts. Please give suggestion for keyboard shortcuts and it's should override browser shortcuts in angular

    • @DecodedFrontend
      @DecodedFrontend  3 года назад

      Hi,
      Please ask such questions on websites like Stackoverflow providing code examples or interactive playgrounds like Stackblitz

  • @Doktornikita
    @Doktornikita 3 года назад

    Nice! I like you video!

  • @user-om4hp7me3d
    @user-om4hp7me3d 2 месяца назад

    Damn, so cool !

  • @bidfca5980
    @bidfca5980 2 года назад

    Nice vídeo

  • @SaschaKleiber
    @SaschaKleiber Год назад

    I am not sure if I understood it right. :-( I am trying to extract some angular-components from my main-client-application into its own angular-library to use it for multiple client-applications.
    Problem is, some of the components as well as services in the newly created lib need some configuration from my main-application in form of a json-object which contains some client-specific information, mainly strings, paths etc.. Until now I could just import the file containing these constants.... Can I achieve that with forRoot as well? I am really struggling with that, as even the angular-course you mentioned on udemy (which I also bought) doesn't cover "configurable modules" (at least I didn't notice it). I just need to pass a config-object into the module... Another connected issue: How do I pass an array into my Library-Module for another "forRoot"-Function inside of it? Meaning: My Library-Module also imports a Module (ngx-translate) which needs to be configured via forRoot. So now I need to pass this information into my Library-Module and then into its imported Module.
    What I also dont understand in your example: You are using the same PollingService inside both the lib and the Angular-App which uses this lib?

  • @Vietnamcamping89
    @Vietnamcamping89 2 года назад +1

    Hey what is the component to show gzip size in your app ?

    • @DecodedFrontend
      @DecodedFrontend  2 года назад

      It is a vs code plugin marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

  • @SaurabhGangamwar
    @SaurabhGangamwar 3 года назад

    awesome

  • @maks-yaremenko
    @maks-yaremenko 2 года назад

    is that possible to share service as a singleton using forRoot, forChild technic? in your example when you added forChild static method - the counter starts counting from 0. Thank you

    • @DecodedFrontend
      @DecodedFrontend  2 года назад

      Hi Max! This is exactly why the forRoot pattern was usually used. Inside the forRoot method you should define providers that supposed to be singleton in the whole application and these providers should not be provided anywhere else. Respectively, Module.forRoot() should be used in app.module.ts .
      Services that supposed to have a separate instance for every lazy module should be provided in forChild and Module.forChild() should be used in lazy modules only.

    • @maks-yaremenko
      @maks-yaremenko 2 года назад

      ​@@DecodedFrontend okay, let me try to explain in your example, we had a few modules, one was lazy and used a polling service, and as you stated in the example on some pages I don't need to do polling too often and we want to configure polling interval for this particular module (service). When we are using forChild it creates a new instance of this service for this specific module, I'm not sure we need it. So my question was - can we use the same singleton service, and somehow configure it, for example, to do poll rarely.
      Result should be like: 1(1000)2(1000)3(1000) [navigation-to-lazy-module] 4(3000)5(3000)6(3000) [navigation-to-home-page] 7(1000)8(1000) etc
      1,2,3,4,5,6 - value from timer, numbers in the brackets is interval

  • @alexandrekfoury9289
    @alexandrekfoury9289 Год назад

    So i f I understand correctly forroot is no longer nested, we can use injectable.

  • @jonatabiondiJsLover
    @jonatabiondiJsLover 3 месяца назад

    Top

  • @khemiriridha6443
    @khemiriridha6443 Год назад

    you well explained forRoot but forChild is not clear

  • @digitech1241
    @digitech1241 2 года назад

    Thank you for the awesome video.
    I have one question,
    How can I pass config (CustomConfig) from PQRModule to ABCModule.forRoot(config)
    @NgModule({
    imports: [
    ABCModule.forRoot(config),
    ],
    })
    export class PQRModule {
    static forRoot(config: CustomConfig): ModuleWithProviders {
    return {
    ngModule: PQRModule,
    };
    }
    }
    OR,
    Is there any other way to do it? I am trying to extend ABCModule with my own customization.
    Thank you.

  • @collinsk8754
    @collinsk8754 Год назад

    💯💯👏👏

  • @metalloid6624
    @metalloid6624 Год назад

    @29:37 forFoot() haha

  • @mailmeakshaykapoor
    @mailmeakshaykapoor 3 года назад +2

    Is i am the only one hearing module as model ?

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 3 года назад

      HI Akshay! Are you looking our for job opportunities in web development currently? We are a web development company and looking to hire. Please let me know if interested.

  • @baoguibai1912
    @baoguibai1912 3 года назад

    @Decoded Frontend ruclips.net/video/PU_xpHxZkrE/видео.html
    I saw you navigated to Angular Router source code (router_module.ts) directly in VS Code, can you show us how you did it?
    in my node_modules folder, it is router.d.ts, are you using some extensions or you are using older version of Angular? Thanks

    • @DecodedFrontend
      @DecodedFrontend  3 года назад +1

      Hi! No, I just cloned angular source code to my computer and switched in VS Code to that repo :)