Advanced

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 135

  • @DecodedFrontend
    @DecodedFrontend  3 роки тому +29

    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

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

  • @iulianradulescu7057
    @iulianradulescu7057 6 місяців тому

    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 6 місяців тому

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

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

  • @JohnRin
    @JohnRin 3 роки тому +1

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

  • @giorgimerabishvili8194
    @giorgimerabishvili8194 3 роки тому +19

    Definitely the best channel!

    • @abenjamin13
      @abenjamin13 3 роки тому

      I second this comment 👍

  • @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.

  • @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 6 місяців тому +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.

  • @user-gv5nm
    @user-gv5nm 3 роки тому +1

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

  • @radvilardian740
    @radvilardian740 3 роки тому +2

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

  • @haroldpepete
    @haroldpepete 2 роки тому

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

  • @jojojawjaw
    @jojojawjaw 3 роки тому +1

    The best channel on Angular!

  • @ariMuayad
    @ariMuayad 3 роки тому

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

  • @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 .. 🙌👍🏼 😎🎉

  • @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...

  • @aminerhouma
    @aminerhouma 3 роки тому +1

    Very good example, 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 😊

  • @eugenetcgcomputer-guy6103
    @eugenetcgcomputer-guy6103 2 роки тому

    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

  • @maximermoshin393
    @maximermoshin393 3 роки тому +3

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

  • @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.

  • @ganesh56789
    @ganesh56789 3 роки тому +2

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

  • @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 ❤

  • @Sinan997
    @Sinan997 10 місяців тому

    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

  • @SaurabhGangamwar
    @SaurabhGangamwar 3 роки тому

    Best content related to angular

  • @ammireddy484
    @ammireddy484 3 роки тому +2

    Excellent, You deserve 100× more subscribers ❤️👍

    • @DecodedFrontend
      @DecodedFrontend  3 роки тому +1

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

  • @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?

  • @DavidSoles
    @DavidSoles 3 роки тому +2

    Very well explained. Thanks.

  • @fluffymaverick
    @fluffymaverick 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.

  • @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.

  • @the_simple_dude1650
    @the_simple_dude1650 2 роки тому

    Thank you very much for the clear explanation.

  • @mktrann
    @mktrann Рік тому

    Thank you so much for your amazing explanation!

  • @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.

  • @paimfp
    @paimfp 3 роки тому +1

    Great explanation, thanks!

  • @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 UA-cam algorithm constantly changes but my "experiments" show that longer videos preferable because user retention is higher and UA-cam 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.

  • @fireflysemanticsmedia6267
    @fireflysemanticsmedia6267 2 роки тому

    Awesome demo and explanation!!

  • @urielrodriguezusma
    @urielrodriguezusma 3 роки тому +2

    Excellent class. Thank you

  • @MatiasAlibertti
    @MatiasAlibertti 3 роки тому +2

    Great video, thanks!

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

  • @sPanKyZzZ1
    @sPanKyZzZ1 3 роки тому +2

    Awesome, thank you for the info!

  • @_cipriangg_
    @_cipriangg_ 2 роки тому

    You have such an awesome channel!

  • @ali-chavoshi
    @ali-chavoshi 2 роки тому +1

    very good my friend.very awsome ❤️

  • @stepandemchenko9870
    @stepandemchenko9870 3 роки тому +2

    Thanks, really helpful!

  • @abhiagarwal96
    @abhiagarwal96 5 місяців тому +1

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

  • @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.

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

  • @ТирионЛаннистер-ц1ф

    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

  • @TheGothicSecret
    @TheGothicSecret 2 роки тому

    Thank you!!! Very good video

  • @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..

  • @ptu15
    @ptu15 3 роки тому +1

    love this channel

  • @fawadmukhtar2234
    @fawadmukhtar2234 2 роки тому +1

    Great

  • @johnadaikalasamy
    @johnadaikalasamy 3 роки тому +2

    Great video, Thanks

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

  • @pranrv4983
    @pranrv4983 2 роки тому +1

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

  • @SaschaKleiber
    @SaschaKleiber 2 роки тому

    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?

  • @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.

  • @Vietnamcamping89
    @Vietnamcamping89 3 роки тому +1

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

    • @DecodedFrontend
      @DecodedFrontend  3 роки тому

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

  • @Doktornikita
    @Doktornikita 3 роки тому

    Nice! I like you video!

  • @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.

  • @zellkon
    @zellkon Рік тому

    Thanks for this TUT

  • @seanbruceful
    @seanbruceful 2 роки тому

    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.

  • @abdouafailal4869
    @abdouafailal4869 3 роки тому

    Thanks, you are the best!

  • @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 🔥🔥🔥

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

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

  • @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 😄

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

  • @MoMoadeli
    @MoMoadeli Рік тому +1

    Thanks!

    • @DecodedFrontend
      @DecodedFrontend  Рік тому

      Thank you soo much for your support!

    • @MoMoadeli
      @MoMoadeli 11 місяців тому

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

  • @РудольфКлих
    @РудольфКлих 4 місяці тому

    Damn, so cool !

  • @beodan9219
    @beodan9219 Рік тому

    cool explain

  • @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.

  • @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 😂

  • @bidfca5980
    @bidfca5980 2 роки тому

    Nice vídeo

  • @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 :-)

  • @SaurabhGangamwar
    @SaurabhGangamwar 3 роки тому

    awesome

  • @alexandrekfoury9289
    @alexandrekfoury9289 2 роки тому

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

  • @jonatabiondiJsLover
    @jonatabiondiJsLover 5 місяців тому

    Top

  • @collinsk8754
    @collinsk8754 Рік тому

    💯💯👏👏

  • @khemiriridha6443
    @khemiriridha6443 2 роки тому

    you well explained forRoot but forChild is not clear

  • @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.

  • @metalloid6624
    @metalloid6624 Рік тому

    @29:37 forFoot() haha

  • @baoguibai1912
    @baoguibai1912 3 роки тому

    @Decoded Frontend ua-cam.com/video/PU_xpHxZkrE/v-deo.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 :)