1 00:00:03,760 --> 00:00:05,980 Hello, everyone, and welcome back. 2 00:00:06,160 --> 00:00:10,710 In this new section of the course, we are going to talk about angular elements. 3 00:00:10,720 --> 00:00:13,530 So what are angular elements exactly? 4 00:00:13,690 --> 00:00:18,590 Imagine that you have an application where you have the need to generate some dynamic content. 5 00:00:18,730 --> 00:00:23,080 Let's take, for example, a or a content management system. 6 00:00:23,350 --> 00:00:29,710 This is the typical type of application when the user might want to generate its own content. 7 00:00:29,980 --> 00:00:34,900 That would be a situation where the angular elements functionality would come in handy. 8 00:00:34,960 --> 00:00:41,940 Another scenario would be, for example, the case of a react or view or even plain e-mail application. 9 00:00:42,070 --> 00:00:49,510 So we might want to write our angular code under the form of a widget that then gets cheap and integrated 10 00:00:49,510 --> 00:00:56,290 as a third party widget in all sorts of applications, not necessarily angular applications. 11 00:00:56,470 --> 00:01:03,610 In those cases, we would like to be able to have our code still get executed and have it be compatible 12 00:01:03,610 --> 00:01:05,290 with other frameworks. 13 00:01:05,530 --> 00:01:11,350 The problem is that in this current application, ANGULAR is taking control of the whole page and it's 14 00:01:11,350 --> 00:01:17,560 the angular framework that is instantiating here these components after examining the e-mail of the 15 00:01:17,560 --> 00:01:18,430 application. 16 00:01:18,460 --> 00:01:24,490 However, in a reject application, for example, it's going to be react that is taking over the page 17 00:01:24,490 --> 00:01:25,800 and not angular. 18 00:01:25,900 --> 00:01:33,250 So the only way that an angular component could work in a third party application would be if the browser 19 00:01:33,250 --> 00:01:39,360 and not any given particular framework that is taking care of instantiating each component. 20 00:01:39,640 --> 00:01:44,770 This is now actually possible today using the custom elements appx. 21 00:01:44,800 --> 00:01:50,500 So this is a standard built in browser functionality for handling custom elements such as, for example, 22 00:01:50,500 --> 00:01:52,430 the course curve component. 23 00:01:52,480 --> 00:01:54,480 Let's then see these in action. 24 00:01:54,490 --> 00:01:56,530 What we are about two is the following. 25 00:01:56,530 --> 00:01:58,780 We are going to create a new component. 26 00:01:58,880 --> 00:02:03,820 We're going to call it the course title component is going to be a component that will allow us to handle 27 00:02:03,820 --> 00:02:05,890 here the title of the course. 28 00:02:05,890 --> 00:02:10,780 We're going to give it a couple of styles so that we can see visually on the screen that the component 29 00:02:10,780 --> 00:02:16,960 is active and we're going to have that component to be managed by the browser and not by the angular 30 00:02:16,960 --> 00:02:18,130 framework itself. 31 00:02:18,310 --> 00:02:25,230 Let's now head over to the terminal and add to our project the ability to handle angular elements. 32 00:02:25,240 --> 00:02:27,180 We're going to stop the angular scale. 33 00:02:27,280 --> 00:02:34,060 And in your project, if you need to add angular elements, you should run the following commands NGF 34 00:02:34,060 --> 00:02:38,380 at angular elements depending on your configuration. 35 00:02:38,380 --> 00:02:44,260 You might have to add here the project name onto which you want to have angular elements. 36 00:02:44,470 --> 00:02:48,120 In this case, the name of our project is Angular Dash Course. 37 00:02:48,370 --> 00:02:52,540 Now you don't need to execute this command in the branch that you are using. 38 00:02:52,720 --> 00:02:56,160 Angular elements are already added to the project. 39 00:02:56,320 --> 00:03:01,830 All the libraries are installed, so we are ready to create our first angular element. 40 00:03:01,840 --> 00:03:03,130 Let's then do the following. 41 00:03:03,130 --> 00:03:05,890 We are going to run the command and generate. 42 00:03:06,010 --> 00:03:11,230 We are going to generate the component and we are going to call it because that title, this command 43 00:03:11,230 --> 00:03:12,970 is going to take a moment to execute. 44 00:03:12,970 --> 00:03:16,930 But after a while, we are going to have here a new component folder. 45 00:03:17,120 --> 00:03:20,880 Let's now quickly implement these very simple components. 46 00:03:20,890 --> 00:03:25,710 We are going to open here our component file and also the template. 47 00:03:25,720 --> 00:03:30,460 Let's start here with the templates we're going to remove here, the default implementation. 48 00:03:30,460 --> 00:03:34,810 And we're going to have here a couple of HTML elements and some style. 49 00:03:34,810 --> 00:03:38,320 Let's add here div we are going to give it a class. 50 00:03:38,500 --> 00:03:45,040 We are going to name the class course dash title and we're going to output here the title of the course. 51 00:03:45,070 --> 00:03:50,790 So let's have here an interpolation expression and we are going to print here a member variable called 52 00:03:50,830 --> 00:03:56,470 title that we are going to adhere to our component before writing the component class. 53 00:03:56,470 --> 00:04:02,320 Let's switch over here to the components yes file and let's quickly implement here the course title 54 00:04:02,320 --> 00:04:03,340 Cyesis class. 55 00:04:03,370 --> 00:04:07,350 Let's just make the title of the course to be underlined. 56 00:04:07,360 --> 00:04:10,690 Now, switching over here to our course title component. 57 00:04:10,870 --> 00:04:16,870 Let's add here the title input property that we have just used in the template we're going to need to 58 00:04:16,870 --> 00:04:20,350 annotated here with the input decorator. 59 00:04:20,529 --> 00:04:25,210 Now let's take this component and let's turn it into a Nagler element. 60 00:04:25,210 --> 00:04:29,140 We are going to do that here at the level of our application component. 61 00:04:29,260 --> 00:04:32,410 We're going to be using here the engie on init method. 62 00:04:32,410 --> 00:04:40,150 So here what we need to do is we need to create a browser custom element that is linked to our component. 63 00:04:40,180 --> 00:04:46,240 So this is sort of a bridge between standard browser functionality and the angular framework. 64 00:04:46,390 --> 00:04:47,770 Let's see this in action. 65 00:04:47,770 --> 00:04:52,870 We are going to define here a new constants and we're going to call it HTML element. 66 00:04:53,020 --> 00:04:59,740 So this is going to contain a reference to an HTML custom element in order to create the custom element 67 00:04:59,770 --> 00:05:00,430 we are going. 68 00:05:00,540 --> 00:05:07,440 The goal here is to create custom element function, these function is going to create a custom element 69 00:05:07,440 --> 00:05:09,120 based on the components. 70 00:05:09,130 --> 00:05:15,750 So the first argument that we need to proceed is the component that we want to turn into a custom element. 71 00:05:15,750 --> 00:05:18,420 In this case, it's the course title component. 72 00:05:18,570 --> 00:05:24,600 Now, this component might need certain dependencies to get injected via the constructor. 73 00:05:24,690 --> 00:05:30,840 In order to enable this, we need to pass in here as the second argument to the create custom element 74 00:05:30,840 --> 00:05:33,150 function, the angular injector. 75 00:05:33,360 --> 00:05:38,430 This is going to allow ANGULAR to fetch any dependencies that this component might need. 76 00:05:38,580 --> 00:05:42,090 So let's get here a reference to the angular injector. 77 00:05:42,120 --> 00:05:45,330 We are going to inject it here in our constructor. 78 00:05:45,480 --> 00:05:51,100 Now that we have here the injector property, we can pass it here in the second argument. 79 00:05:51,120 --> 00:05:53,400 This is going to be a configuration object. 80 00:05:53,410 --> 00:05:58,320 We're going to populate the injector property with the name of this variable. 81 00:05:58,320 --> 00:05:59,420 So we are going to pass it. 82 00:05:59,460 --> 00:06:02,700 The D dot injector member variable. 83 00:06:02,850 --> 00:06:07,950 What we get back from this function call is going to be a ready to use custom element. 84 00:06:07,960 --> 00:06:12,830 So we just need to register it in the browser using the custom elements API. 85 00:06:12,930 --> 00:06:16,250 Let's access here the custom elements, global object. 86 00:06:16,280 --> 00:06:19,150 So this is not an angular specific API. 87 00:06:19,170 --> 00:06:21,120 This is standard browser functionality. 88 00:06:21,120 --> 00:06:23,970 And we're going to call here the method define. 89 00:06:24,190 --> 00:06:28,890 We're going to specify here what's the e-mail tag that we are defining. 90 00:06:29,040 --> 00:06:32,940 This case is going to be the course dash title, e-mail tag. 91 00:06:33,120 --> 00:06:37,740 And next, we need to pass it in the custom element that we have just defined. 92 00:06:37,740 --> 00:06:42,690 If we would now try this out by refreshing here, the application, we would notice that we get the 93 00:06:42,690 --> 00:06:48,060 never here in the console, no component factory found for course title component. 94 00:06:48,240 --> 00:06:53,400 This component is indeed only going to be instantiated programmatically by ANGULAR. 95 00:06:53,520 --> 00:06:56,680 That is going to be then here by the custom element itself. 96 00:06:56,700 --> 00:07:03,060 So in order for this to work, we need to add this component here to the list of N three components 97 00:07:03,060 --> 00:07:08,430 of our angular application, which is defined here in our application root module. 98 00:07:08,430 --> 00:07:11,580 We have here a new property that we haven't used so far. 99 00:07:11,700 --> 00:07:17,670 It's going to be the entry components property in the case of this component, because we are not using 100 00:07:17,670 --> 00:07:21,200 it anywhere in our templates, but we are still declaring it here. 101 00:07:21,330 --> 00:07:27,750 We need to inform Angular that this is a programmatically instantiated component and not a declarative 102 00:07:27,750 --> 00:07:31,530 component that angular detected by examining the templates. 103 00:07:31,530 --> 00:07:36,770 Let's then adhere our course title component to our list of entry components. 104 00:07:36,780 --> 00:07:42,180 We are going to reload the application and we're going to confirm that this time around, no errors 105 00:07:42,180 --> 00:07:43,670 occurred in the console. 106 00:07:43,830 --> 00:07:46,920 Let's now see our angular element in action. 107 00:07:46,920 --> 00:07:51,900 We are going to switch here to a larger window and what we are going to do is we are going to add these 108 00:07:52,320 --> 00:07:57,800 type of custom element directly here at our e-mail using the dev tools. 109 00:07:57,960 --> 00:08:02,840 Let's, for example, select here the demo div here on top of our page. 110 00:08:02,850 --> 00:08:06,540 Let's right click on it and let's edit it as e-mail. 111 00:08:06,540 --> 00:08:12,390 So we have here an inline editor where we can start to modify the e-mail of this div. 112 00:08:12,600 --> 00:08:16,740 We're going to add here manually a course title custom element. 113 00:08:16,740 --> 00:08:22,260 Let's add here the closing tag and let's fill in here the title attribute. 114 00:08:22,350 --> 00:08:29,460 Let's pass in here the title Angular Core, Deep Dive and before closing the editor, let's even copy 115 00:08:29,460 --> 00:08:31,440 here several times this tag. 116 00:08:31,440 --> 00:08:33,690 Let's say let's copy it three times. 117 00:08:33,809 --> 00:08:38,159 Now we are going to click here somewhere outside the editor. 118 00:08:38,159 --> 00:08:44,910 So let's click here, for example, this style and notice here that on the page, the angular components 119 00:08:44,910 --> 00:08:50,450 corresponding to the course title is getting automatically instantiated by the browser. 120 00:08:50,490 --> 00:08:56,250 This is happening because we have registered a custom element called this title with the browser. 121 00:08:56,250 --> 00:09:03,480 So whenever we have these custom element to the page, that is going to trigger indirectly the creation 122 00:09:03,480 --> 00:09:05,140 of this angular component. 123 00:09:05,310 --> 00:09:11,070 So going back here to our application root components, if you remember the code that we wrote here, 124 00:09:11,250 --> 00:09:17,910 this custom element that we have registered here in the browser is what is causing the instantiation 125 00:09:17,910 --> 00:09:19,810 of the angular component. 126 00:09:20,040 --> 00:09:26,570 So going back here to the larger window, what we have done here was only possible because our course 127 00:09:26,580 --> 00:09:34,020 title component is an angular element and it's being managed directly by the browser using a custom 128 00:09:34,020 --> 00:09:34,680 element. 129 00:09:34,770 --> 00:09:40,170 If we will try to do the same operation that we did here, of manually adding here, for example, a 130 00:09:40,170 --> 00:09:46,500 course component, this will not work because the course card component and like the course title component 131 00:09:46,650 --> 00:09:48,660 is not an angular element. 132 00:09:48,660 --> 00:09:51,630 It does not have a custom element linked to it. 133 00:09:51,660 --> 00:09:56,370 So the browser has no way of knowing how to instantiate the component. 134 00:09:56,520 --> 00:10:00,390 Notice that the course title component is also usable in our. 135 00:10:00,460 --> 00:10:06,910 Templates, so we, for example, we head over here to our cursor component, we can replace here our 136 00:10:06,910 --> 00:10:10,170 title tag by the course title component. 137 00:10:10,180 --> 00:10:16,240 So we just have to fill in here the title input property in the same way as we would fill in an input 138 00:10:16,240 --> 00:10:18,340 property of any component. 139 00:10:18,460 --> 00:10:24,400 Now, in order to be able to use here a custom element inside the card component template, we're going 140 00:10:24,400 --> 00:10:28,570 to have to add support for it at the level of the courses module. 141 00:10:28,690 --> 00:10:33,460 In order to enable this, we are going to head over here to the courses module and we are going to add 142 00:10:33,460 --> 00:10:37,330 here an extra schema without this configuration. 143 00:10:37,330 --> 00:10:43,050 If we try to use here this custom element inside this angular template, we would get an error. 144 00:10:43,120 --> 00:10:49,270 So if we try this out, we are going to see that our course title Angular Element is getting correctly 145 00:10:49,270 --> 00:10:50,880 displayed as expected. 146 00:10:50,980 --> 00:10:55,240 So this can also be used just like any other angular component. 147 00:10:55,330 --> 00:11:01,450 And with this, we have reached the end of our coverage of angular elements and also the end of the 148 00:11:01,450 --> 00:11:02,080 course. 149 00:11:02,410 --> 00:11:06,670 Let's quickly summarize everything that we have learned in the conclusion lesson.