1 00:00:03,870 --> 00:00:10,740 Hello, welcome, and congratulations on completing the angular core deep dive course, let's quickly 2 00:00:10,740 --> 00:00:13,890 summarize everything that we have learned in this course. 3 00:00:14,310 --> 00:00:20,280 So we have started this course by quickly scaffolding, a simple Engelhard application and going over 4 00:00:20,280 --> 00:00:23,460 some of the main benefits of the angular framework. 5 00:00:23,880 --> 00:00:30,660 We have covered in detail everything about the view layer, including a local template, queering content 6 00:00:30,660 --> 00:00:33,020 projection and much more. 7 00:00:33,180 --> 00:00:39,480 We have talked about angular templates, dynamic template instantiation and how templates can be used 8 00:00:39,480 --> 00:00:42,630 as inputs for more advanced components. 9 00:00:43,110 --> 00:00:45,510 We have then moved on to the service layer. 10 00:00:45,810 --> 00:00:51,630 We have learned how to use the angular built in ETP client and we have learned how to pass observable 11 00:00:51,630 --> 00:00:55,010 data streams to our templates using the async pipe. 12 00:00:55,410 --> 00:01:00,510 We then went on to build our own custom injectable service from scratch. 13 00:01:00,780 --> 00:01:06,140 A key part of the service layer is the dependency injection system of ANGULAR. 14 00:01:06,480 --> 00:01:09,840 We have learned all about three shockable injectables. 15 00:01:10,110 --> 00:01:15,780 We have learned how the angular hierarchical dependency injection system works and we have learned how 16 00:01:15,780 --> 00:01:21,720 to build our own custom providers and injection tokens if necessary. 17 00:01:21,750 --> 00:01:25,440 We have then covered in detail angular change detection. 18 00:01:25,440 --> 00:01:31,830 We have covered how the default change detection mechanism works and we have also learned an alternative 19 00:01:31,840 --> 00:01:34,140 change detection mechanism on Bush. 20 00:01:34,620 --> 00:01:37,230 We know when to use each and why. 21 00:01:37,410 --> 00:01:43,740 We know some of the pitfalls of unperceived detection and we even learn how to build our own custom 22 00:01:43,740 --> 00:01:46,170 change detection mechanism if we need it. 23 00:01:46,470 --> 00:01:50,070 We have then covered the angular component lifecycle hooks. 24 00:01:50,340 --> 00:01:56,580 We know a couple of use cases for each lifecycle, a hook, and we also understand the exact sequence 25 00:01:56,580 --> 00:02:01,110 on which those lifecycle hooks are going to be called by the angular framework. 26 00:02:01,440 --> 00:02:08,220 We have then talked about angular modules and we have built our own custom feature module from scratch. 27 00:02:08,669 --> 00:02:11,490 We did a deep dive into angular pipes. 28 00:02:11,490 --> 00:02:17,490 We have talked about how pipes relate to the angular dependency injection system and we have written 29 00:02:17,490 --> 00:02:19,530 our own custom pipe. 30 00:02:19,890 --> 00:02:23,940 We have talked about the difference between pure and impure pipes. 31 00:02:24,480 --> 00:02:30,720 After that, we do the complete section on angular internationalization and we have learned how to translate 32 00:02:30,720 --> 00:02:33,600 our application into an alternative language. 33 00:02:34,110 --> 00:02:38,370 We have then completed our course by talking about angular elements. 34 00:02:38,370 --> 00:02:45,330 We have learned how can we make our components much more reusable in the larger variety of scenarios. 35 00:02:45,510 --> 00:02:51,960 We can even use our components in third party applications that are being controlled not by the angular 36 00:02:51,960 --> 00:02:57,540 framework, but by some third party framework, such as, for example, react or view. 37 00:02:57,900 --> 00:03:03,420 I hope that the course gave you a complete overview of everything that is available on the angular core 38 00:03:03,420 --> 00:03:04,710 and common modules. 39 00:03:05,070 --> 00:03:10,860 Let's quickly summarize some of the main features and talk about some of its main use cases. 40 00:03:10,860 --> 00:03:14,300 Let's talk about when to use each feature and why. 41 00:03:14,760 --> 00:03:18,840 So first, there is the most commonly used part of the angular framework. 42 00:03:19,200 --> 00:03:24,240 This is the part that we presented in the beginning of this course, and this is what you will be using 43 00:03:24,240 --> 00:03:26,280 maybe 90 percent of the time. 44 00:03:26,550 --> 00:03:33,510 I I'm talking about plain angular component functionality, including inputs, outputs, custom events, 45 00:03:33,720 --> 00:03:40,740 building our own Kree of components, passing data to components, using the async pipe that is the 46 00:03:40,740 --> 00:03:46,910 most commonly used part of ANGULAR and the one that you should spend the most time trying to master 47 00:03:47,160 --> 00:03:47,610 next. 48 00:03:47,610 --> 00:03:50,640 We have talked about the angular view layer in detail. 49 00:03:50,640 --> 00:03:56,370 We have started by talking about local template Quairading with view child and view children. 50 00:03:56,490 --> 00:04:02,280 Notice that in many cases you won't be needing to use these decorators in your application. 51 00:04:02,550 --> 00:04:09,720 Many times all that we need is a template reference in order to grab a hold of a reference to a component 52 00:04:09,720 --> 00:04:13,290 or a DOM element that we need in our template. 53 00:04:13,650 --> 00:04:20,399 But if we need programmatic excessed these elements, then the view child and children decorator's are 54 00:04:20,399 --> 00:04:23,160 the right tool to use for that use case. 55 00:04:23,520 --> 00:04:29,730 Next, we have covered in detail angular content projection, so content projection allows us to build 56 00:04:29,730 --> 00:04:39,450 some very customizable components that can take as an input the content provided by a user of the components 57 00:04:39,450 --> 00:04:46,890 so we can provide content that then gets queried by the component and reused inside the component itself. 58 00:04:47,130 --> 00:04:49,840 We have then talked about angular directives. 59 00:04:49,890 --> 00:04:55,050 Directives are a really powerful functionality to have in our applications. 60 00:04:55,290 --> 00:05:00,110 However, when compared to components, they are much less used. 61 00:05:00,280 --> 00:05:06,010 Or most of your application is going to be custom angular components with a few directives here and 62 00:05:06,010 --> 00:05:12,520 there, so we won't be building very often our own custom attribute or structural directives. 63 00:05:12,760 --> 00:05:18,700 But without a doubt, we will be using all the time the angular core built in directives such as Engy 64 00:05:18,700 --> 00:05:26,980 for NGF, etc. So those are the ones that it makes sense to spend the most time learning so that you 65 00:05:26,980 --> 00:05:29,560 can take advantage of all its features. 66 00:05:29,740 --> 00:05:32,980 We have then talked about angular view encapsulation. 67 00:05:33,100 --> 00:05:38,110 One of the things that we have learned is that we still have the ability of building an application 68 00:05:38,110 --> 00:05:39,640 without using any view. 69 00:05:39,640 --> 00:05:45,970 Encapsulation features we an external stylesheet, just like any other application in general. 70 00:05:46,300 --> 00:05:52,840 But I recommend you that you use the default view encapsulation mechanism, which is turned on by default. 71 00:05:53,140 --> 00:05:59,950 This is a very useful functionality that allows you to write simpler styles that only target your component 72 00:05:59,950 --> 00:06:02,390 without affecting the rest of the page. 73 00:06:02,620 --> 00:06:09,460 We have then talked about dependency injection in detail and we have learned how to build our own custom 74 00:06:09,460 --> 00:06:11,890 providers and injection tokens. 75 00:06:12,340 --> 00:06:18,010 This was just an exercise so that you understand how the dependency injection system works under the 76 00:06:18,010 --> 00:06:18,350 hood. 77 00:06:18,520 --> 00:06:23,050 So the goal was to understand that if something is getting injected in the NAINGGOLAN application, 78 00:06:23,320 --> 00:06:29,650 there is always an injection token and there is always a provider involved in general. 79 00:06:29,650 --> 00:06:35,770 We should use the simplified configuration mechanisms that we have available and only resort to writing 80 00:06:35,770 --> 00:06:42,400 our own providers and injection tokens for the more advanced dependency injection cases that we come 81 00:06:42,400 --> 00:06:43,000 across. 82 00:06:43,420 --> 00:06:50,770 We should also prefer to always use traditional providers because these will implicitly reduce the size 83 00:06:50,770 --> 00:06:52,510 of our application bundle. 84 00:06:52,540 --> 00:06:56,140 After that, we did a deep dive on angular change detection. 85 00:06:56,140 --> 00:07:02,230 So we have learned the differences between the default angular change detection mechanism and on push 86 00:07:02,230 --> 00:07:03,380 change detection. 87 00:07:03,890 --> 00:07:10,360 I would recommend that you use the default mechanism as much as possible and only resort to using on 88 00:07:10,360 --> 00:07:10,810 push. 89 00:07:11,080 --> 00:07:17,350 If you run into a performance issue and you are sure that the problem is being caused by the change 90 00:07:17,350 --> 00:07:19,030 detection mechanism itself. 91 00:07:19,510 --> 00:07:25,210 This should only occur whenever you are displaying a lot of data on the screen in a situation where 92 00:07:25,210 --> 00:07:29,670 you have a lot of binding expressions in your templates. 93 00:07:30,010 --> 00:07:37,390 So if you are not in that case, most likely the performance bottleneck that you have found is not related 94 00:07:37,390 --> 00:07:39,700 to the angular change detection mechanism. 95 00:07:39,910 --> 00:07:45,070 It's most likely related to something else, such as, for example, backend latency. 96 00:07:45,610 --> 00:07:52,420 So I would recommend you to profile your application before switching everything to on push, because 97 00:07:52,420 --> 00:07:58,480 as we have seen on Bush, although it provides a bit more of performance to your application, it's 98 00:07:58,480 --> 00:08:00,040 also trickier to use. 99 00:08:00,220 --> 00:08:06,790 You're going to run into more situations where, surprisingly, the view is not reflecting the latest 100 00:08:06,790 --> 00:08:11,020 changes in the model and you will have to do some extra debugging. 101 00:08:11,410 --> 00:08:16,030 Next, we have covered in detail the angular component lifecycle hooks. 102 00:08:16,030 --> 00:08:20,920 So some of the hooks, as we have seen, such as, for example, engy only need we are going to be using 103 00:08:21,100 --> 00:08:27,720 nearly all the time while most of the other lifecycle hooks are only rarely needed. 104 00:08:27,850 --> 00:08:30,400 And with these, we have reached the end of the course. 105 00:08:30,400 --> 00:08:36,580 And I hope that you have enjoyed to learn about all these wonderful advanced features that the angular 106 00:08:36,580 --> 00:08:38,049 framework provides us. 107 00:08:38,570 --> 00:08:44,080 Now, if you are just getting started with the angular ecosystem and some of the parts of this course 108 00:08:44,080 --> 00:08:45,950 were maybe a bit overwhelming. 109 00:08:46,150 --> 00:08:52,690 Here is some final advice I would recommend to you to concentrate on the features of ANGULAR that you're 110 00:08:52,690 --> 00:08:55,320 going to be using nearly every day. 111 00:08:55,600 --> 00:09:01,660 So I am talking about what we covered in the first sections of this course, which is angular components, 112 00:09:01,930 --> 00:09:07,660 inputs, outputs, template references and custom injectable services. 113 00:09:07,930 --> 00:09:12,850 How to pass observable data to our view layer using the async pipe. 114 00:09:13,210 --> 00:09:17,970 So again, congratulations for completing the angular core deep dive course. 115 00:09:17,980 --> 00:09:19,570 I hope that you enjoyed it. 116 00:09:19,850 --> 00:09:25,210 If you have any issues or questions, please let me know in the comments section below and I will get 117 00:09:25,210 --> 00:09:25,960 back to you. 118 00:09:26,260 --> 00:09:32,440 I would like to take the opportunity to ask you what other content would you like to see from the angular 119 00:09:32,440 --> 00:09:33,160 diversity? 120 00:09:33,580 --> 00:09:35,930 Please let me know in the comments below. 121 00:09:36,310 --> 00:09:39,580 I want to thank you for watching and I will see you next time.