💥 Learn Angular Forms in-depth and start building complex form controls with ease💥 🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi
@@edbienes Hi Ed! Thanks for your feedback! Regarding Angular course is a great suggestion, thank you :) That's something what is in my to-do list for 2021 but I have to do some market research and pick interesting topic because "Angular basics" is already very competitive and there are a lot of great courses. If you have any topic suggestion please let me know via email :)
Hi Adithya! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
Hi Kamel! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
@@DecodedFrontend Can you make toutrials on Make reusable components And how spreate between prestinal components and smart components By examples And make them able to be used in multi projects I saw toutrials about using base component and extend it and use its logic to make template swapping And others using template outlet etc... I want to know how to make A form for example that is reusable in any project and any page Sorry for poor English ❤️
Hi Ratnesh! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
Very nice examples! I was particularly surprised when you just removed component from template and it got tree shacked, as I thought that reference in the module declarations should retain it in the bundle...
Hi Alex! This is a good observation. I think we should look for the answer in Ivy and how it translate metadata. I did a quick check and it turns out that after compilation to JS the library module factory lib_shared_ui_one_module_LibSharedUiOneModule (line 8502) doesn't have any references to the components which are declared there in declarations property.. instead component factory functions has appeared in directives property when component definition happens `AppComponent.ɵcmp = ɵɵdefineComponent({ ... directives: [widget_component_WidgetComponent, widget_header_component_WidgetHeaderComponent] ... })` ... So it looks like Angular doesn't keep references to the declared modules but instead declares it individually for every component which needs some certain component 🤔Well, it is very interesting but it need some loooong debugging session & investigation :D
@@DecodedFrontend Nice, this is very cool finding! I think this is the reason why they might not need NgModules in the future - after compilation components don't really need them anymore =)
@@DecodedFrontend As far as I know, there are 2 step compilation after Angular 9. First step is going through metadata in decorators and checks what each entity needs. May be that is the moment, where directives to the components are generating and after that the second compilation part starts (if it isn't enabled partial compilation, which retains metadata and is useful for 3rd party libraries to be built in such a way), where the main view coupling is being completed. P.S. There are different reasons for 2 parts compilation to exist, but one important, that stays in my mind is check for the cycle dependencies during first step compilation, which isn't heavy operation and gives you response way more faster, if the compilation parts weren't separated.
Omg, that was soo deep. Thank you. I saw that you have 2 more videos in design pattern list, but these are private. I wounder why, coz I thinj they must contains very interesting knowledge of angular.
Hi, First of all thanks for your feedback! Regarding those private videos it is a bug on TH-cam and actually all videos are public. I think it is because during uploading some of those videos failed and TH-cam kind of create a video but didn't perform clean up from database after uploading failed and they stack and marked as a private for whatever reason.. So the conclusion from it is "Always properly handle errors" :D
Hi Dmytro Mezhenskyi, You are the real King of Angular 😎. I learned so things from your channel. I have a question. Hope you will answer or make video on it. In angular.json file, we can define replacement file inside the configuration . Likewise can we define a replacement for any component or module? I have two environments dev and production. I don't want to add specific module to be the part of final build on the basis. of environment configuration. I already did some R&D but I found there is no such a way to replace component and module file inside the angular.json file. we can only replace environment configuration file. Please give some solution how to handle this situation.
Can you please add the bridge information on how the @ContentChild is depending on DI mechanism or the provider. I am assuming it is dependent as at 06:37, you have also mentioned WidgetHeaderComponent will be used as a token value.
HI Ankit! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
Hi Nice tutorial, But I have one question regarding typing intelligence, Suppose there is another method along with load and refresh (Suppose callEndPoint(){} ) inside one projection component either velocity or weather, then how I will get the type dynamically assign so that I get the typing intelligence like when we type this.widget.callEndPoint (). it will show callEndPoint (I can see you have assign type widget: Widget). How can we dynamically assign type ?? How I will achieve that ??? Thanks for your contribution
Hey Dmytro, ich habe dein Dozenten Profil auf Udemy gesehen und wollte mal fragen ob wir uns zu dem Thema austauschen wollen. Wie hast du es geschafft über 7k Teilnehmer zu gewinnen und nur 21 Bewertungen zu generieren? Ich bin auch Dozent auf Udemy und finde es sehr interessant sich mit Gleichgesinnten auszutauschen.
Hallo Marius, In Udemy gibt's ein Coupon "3 days free access" und ich habe es verwendet und innerhalb 3 Tagen habe ich 7500 neue Enrollments bekommen. Also nichts illegales ;) Auch die Sache ist die, dass die Menschen, die etwas kostenlos bekommen haben, kümmern sie sich darum nicht und lassen normalerweise keine Bewertungen :)
@@DecodedFrontend Danke für die schnelle Antwort. Auf welchem Weg hast du denn den kostenlosen Code beworben, sodass so viele Teilnehmer zustande gekommen sind?
Nur hier auf meinem Channel aber es stellt sich heraus, dass es viele verschiedene Coupon-Platforms gibt, die UDEMY immer zu scannen und dein Coupon automatisch auf sein Plattform hinzuzufügen.
Hi bro, why in this case Injection Token had to be an Abstract Class instead of an Interface? since it was not necessary to have an initial implementation on abstract class.
Hi Gleison, It is because interfaces are gone after compilation into JavaScript but we need some token which will be kind of unique identifier in DI container. That's why we use abstract class because after compilation it will be just a regular js class. Alternatively you can also use an InjectionToken. Here I have partly covered it: th-cam.com/video/G8zXugcYd7o/w-d-xo.html
so what is the sense of injecting it in the constructor with @inject, so now you have useless header and anotherHeader properties that should be just one? which one to use?
![Angular Design Patterns - Bridge [Advanced, 2020]](http://i.ytimg.com/vi/2rQOu9TmuxE/mqdefault.jpg)
![Angular Design Patterns – Bridge [Advanced, 2020]](/img/tr.png)
💥 Learn Angular Forms in-depth and start building complex form controls with ease💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted
💡 Short Frontend Snacks (Tips) every week here:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
Great content as always! Thanks for putting this kind of tutorials.
Can you also create a udemy course for Angular 11?
@@edbienes Hi Ed! Thanks for your feedback!
Regarding Angular course is a great suggestion, thank you :) That's something what is in my to-do list for 2021 but I have to do some market research and pick interesting topic because "Angular basics" is already very competitive and there are a lot of great courses. If you have any topic suggestion please let me know via email :)
Haven't found anything out there that explains advanced angular topics so good.
Just amazing, thanks
Great Video. Thanks for doing videos on these advanced concepts for Angular. Keep'em coming.
Hi, Adithya!
Thank you very much! There will be more ;)
Hi Adithya! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
You are a true Angular Hero. This was fascinating. Thank you for producing these advance enterprise angular explanations and tutorials!
Thank you, Kamel!🙂
Hi Kamel! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
waiting for more cool tutorials in angular pro
please dont stop !!
I didn’t even think to stop 😄 thank you for the feedback!
@@DecodedFrontend
Can you make toutrials on
Make reusable components
And how spreate between prestinal components and smart components
By examples
And make them able to be used in multi projects
I saw toutrials about using base component and extend it and use its logic to make template swapping
And others using template outlet etc...
I want to know how to make
A form for example that is reusable in any project and any page
Sorry for poor English
❤️
Absolutely great channel! Waiting for more Angular stuff
Amazing. I am thinking to rewrite all my angular apps after watching this playlist 🖖🖖
I thought i knew so much about angular, clearly i was wrong, your videos really made me excited to delve deeper into angular
Recently found your channel. Great stuff for angular advanced topics. Hope to see more in the future! Thanks! :)
Thank you!! :)
I saw most of your angular videos which are very helpful to understand in advance level learning, keep rocking..
Please keep making advance angular videos. They are soo useful! Greatful
Awesome!!.. thanks for this great stuff... Waiting for in-depth tutorial on Router and LazyLoading....
Thanks! added to a list of topics ;)
Hi Ratnesh! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
Looking forward watching this on weekends :)
Brilliant explanation! Respect!
I started learning so much because of you ! Thank you !!
Awesome! I glad to hear it and wish you success with it 😉
This channel is literally brilliant!
Thank you!
Very nice examples!
I was particularly surprised when you just removed component from template and it got tree shacked, as I thought that reference in the module declarations should retain it in the bundle...
Hi Alex! This is a good observation. I think we should look for the answer in Ivy and how it translate metadata. I did a quick check and it turns out that after compilation to JS the library module factory lib_shared_ui_one_module_LibSharedUiOneModule (line 8502) doesn't have any references to the components which are declared there in declarations property.. instead component factory functions has appeared in directives property when component definition happens `AppComponent.ɵcmp = ɵɵdefineComponent({ ... directives: [widget_component_WidgetComponent, widget_header_component_WidgetHeaderComponent] ... })` ... So it looks like Angular doesn't keep references to the declared modules but instead declares it individually for every component which needs some certain component 🤔Well, it is very interesting but it need some loooong debugging session & investigation :D
@@DecodedFrontend Nice, this is very cool finding! I think this is the reason why they might not need NgModules in the future - after compilation components don't really need them anymore =)
@@DecodedFrontend As far as I know, there are 2 step compilation after Angular 9. First step is going through metadata in decorators and checks what each entity needs. May be that is the moment, where directives to the components are generating and after that the second compilation part starts (if it isn't enabled partial compilation, which retains metadata and is useful for 3rd party libraries to be built in such a way), where the main view coupling is being completed.
P.S. There are different reasons for 2 parts compilation to exist, but one important, that stays in my mind is check for the cycle dependencies during first step compilation, which isn't heavy operation and gives you response way more faster, if the compilation parts weren't separated.
Thanks for the knowledge ❤❤❤❤❤❤❤
WOW! Nice, This channel is so great! Talk Angular deep stuff !!
Glad you think so! :)
Great video, I hope to see videos related to testing in angular applying TDD, can be fantastic, thanks for sharing your knowledge
Good point actually! Thanks for idea :)
Awesome, learning so much from you. Thank you
My pleasure!
Very clear explanation! Great job!
Very helpful. However, the amount of boilerplate Angular needs to simply treeshake things shows how detrimental Angular's DI mechanisms can be.
Thanks! It's really useful video!
Glad it was helpful!
You are doing amazing work, the way you explain things are absolutely great. keep going :-)
Thanks a lot 😊
Great video, thank you
Thanks for the insight
Waiting for more stuffs.
Omg, that was soo deep. Thank you. I saw that you have 2 more videos in design pattern list, but these are private. I wounder why, coz I thinj they must contains very interesting knowledge of angular.
Hi,
First of all thanks for your feedback! Regarding those private videos it is a bug on TH-cam and actually all videos are public. I think it is because during uploading some of those videos failed and TH-cam kind of create a video but didn't perform clean up from database after uploading failed and they stack and marked as a private for whatever reason.. So the conclusion from it is "Always properly handle errors" :D
Thanks a lot! Really like your content
Amazing, thanks!
Great content! I like your way of explaining things. Keep those vids comming!
Thank you!😊
Hi Dmytro Mezhenskyi, You are the real King of Angular 😎. I learned so things from your channel.
I have a question. Hope you will answer or make video on it. In angular.json file, we can define replacement file inside the configuration . Likewise can we define a replacement for any component or module? I have two environments dev and production. I don't want to add specific module to be the part of final build on the basis. of environment configuration. I already did some R&D but I found there is no such a way to replace component and module file inside the angular.json file. we can only replace environment configuration file. Please give some solution how to handle this situation.
Thank you!
Man you are great. How many time to reach half of your level ? :)
Can you please add the bridge information on how the @ContentChild is depending on DI mechanism or the provider. I am assuming it is dependent as at 06:37, you have also mentioned WidgetHeaderComponent will be used as a token value.
Gracias chico!
you are awesome man Thank you for your favore
Pufffff....... mind blownnnn
In good or bad way?😄
Thank you
Really great content!
Appreciate it! Thank you :)
Amazing stuff!
Can anyone tell me the name of that extension from which we can see who modified the code block and when it got last modified
Hi,
Thanks for your feedback. This extension called GitLens
HI Ankit! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!
Great information (thanks),
could you please write commands how to generate libs like in this projects
Hi! Thank you for your feedback.
The command I used is `ng g library lib-shared-ui-one` and the same for second library but different lib name.
In "new InjectionToken('widget-header')"
can you explain what is the significance of 'widget-header' string and usages?
Thanks, it is great, but I do't understend when I can use @Inject in my project).
Muchas gracias! 🤩
Awesome
Awesome!
Thanks a lot
Welcome!
Thank you for video! Is there a way to create an injection token for interfaces with generic types?
Hi,
Thank you! What do you mean exactly? Something like: InjectionToken('value');
@@DecodedFrontend Yes. For example if you have interface List. In such cases I use abstract classes as interface.
Hi Nice tutorial, But I have one question regarding typing intelligence, Suppose there is another method along with load and refresh (Suppose callEndPoint(){} ) inside one projection component either velocity or weather, then how I will get the type dynamically assign so that I get the typing intelligence like when we type this.widget.callEndPoint (). it will show callEndPoint (I can see you have assign type widget: Widget). How can we dynamically assign type ?? How I will achieve that ??? Thanks for your contribution
greate
Hey Dmytro,
ich habe dein Dozenten Profil auf Udemy gesehen und wollte mal fragen ob wir uns zu dem Thema austauschen wollen. Wie hast du es geschafft über 7k Teilnehmer zu gewinnen und nur 21 Bewertungen zu generieren? Ich bin auch Dozent auf Udemy und finde es sehr interessant sich mit Gleichgesinnten auszutauschen.
Hallo Marius,
In Udemy gibt's ein Coupon "3 days free access" und ich habe es verwendet und innerhalb 3 Tagen habe ich 7500 neue Enrollments bekommen. Also nichts illegales ;) Auch die Sache ist die, dass die Menschen, die etwas kostenlos bekommen haben, kümmern sie sich darum nicht und lassen normalerweise keine Bewertungen :)
@@DecodedFrontend Danke für die schnelle Antwort. Auf welchem Weg hast du denn den kostenlosen Code beworben, sodass so viele Teilnehmer zustande gekommen sind?
Nur hier auf meinem Channel aber es stellt sich heraus, dass es viele verschiedene Coupon-Platforms gibt, die UDEMY immer zu scannen und dein Coupon automatisch auf sein Plattform hinzuzufügen.
Hi bro, why in this case Injection Token had to be an Abstract Class instead of an Interface? since it was not necessary to have an initial implementation on abstract class.
Hi Gleison,
It is because interfaces are gone after compilation into JavaScript but we need some token which will be kind of unique identifier in DI container. That's why we use abstract class because after compilation it will be just a regular js class. Alternatively you can also use an InjectionToken.
Here I have partly covered it: th-cam.com/video/G8zXugcYd7o/w-d-xo.html
@@DecodedFrontend I got it, thanks for the answer, and congrats for the content.
for windows (
set NG_BUILD_MANGLE=false
set NG_BUILD_MINIFY=false
set NG_BUILD_BEAUTIFY=true
Thank you, Dmitriy 🙌
so what is the sense of injecting it in the constructor with @inject, so now you have useless header and anotherHeader properties that should be just one? which one to use?
what if a class already extends something? what is the pattern here?