Hello, everyone, and welcome back.
In this new section of the course, we are going to talk about angular elements.
So what are angular elements exactly?
Imagine that you have an application where you have the need to generate some dynamic content.
Let's take, for example, a or a content management system.
This is the typical type of application when the user might want to generate its own content.
That would be a situation where the angular elements functionality would come in handy.
Another scenario would be, for example, the case of a react or view or even plain e-mail application.
So we might want to write our angular code under the form of a widget that then gets cheap and integrated
as a third party widget in all sorts of applications, not necessarily angular applications.
In those cases, we would like to be able to have our code still get executed and have it be compatible
with other frameworks.
The problem is that in this current application, ANGULAR is taking control of the whole page and it's
the angular framework that is instantiating here these components after examining the e-mail of the
application.
However, in a reject application, for example, it's going to be react that is taking over the page
and not angular.
So the only way that an angular component could work in a third party application would be if the browser
and not any given particular framework that is taking care of instantiating each component.
This is now actually possible today using the custom elements appx.
So this is a standard built in browser functionality for handling custom elements such as, for example,
the course curve component.
Let's then see these in action.
What we are about two is the following.
We are going to create a new component.
We're going to call it the course title component is going to be a component that will allow us to handle
here the title of the course.
We're going to give it a couple of styles so that we can see visually on the screen that the component
is active and we're going to have that component to be managed by the browser and not by the angular
framework itself.
Let's now head over to the terminal and add to our project the ability to handle angular elements.
We're going to stop the angular scale.
And in your project, if you need to add angular elements, you should run the following commands NGF
at angular elements depending on your configuration.
You might have to add here the project name onto which you want to have angular elements.
In this case, the name of our project is Angular Dash Course.
Now you don't need to execute this command in the branch that you are using.
Angular elements are already added to the project.
All the libraries are installed, so we are ready to create our first angular element.
Let's then do the following.
We are going to run the command and generate.
We are going to generate the component and we are going to call it because that title, this command
is going to take a moment to execute.
But after a while, we are going to have here a new component folder.
Let's now quickly implement these very simple components.
We are going to open here our component file and also the template.
Let's start here with the templates we're going to remove here, the default implementation.
And we're going to have here a couple of HTML elements and some style.
Let's add here div we are going to give it a class.
We are going to name the class course dash title and we're going to output here the title of the course.
So let's have here an interpolation expression and we are going to print here a member variable called
title that we are going to adhere to our component before writing the component class.
Let's switch over here to the components yes file and let's quickly implement here the course title
Cyesis class.
Let's just make the title of the course to be underlined.
Now, switching over here to our course title component.
Let's add here the title input property that we have just used in the template we're going to need to
annotated here with the input decorator.
Now let's take this component and let's turn it into a Nagler element.
We are going to do that here at the level of our application component.
We're going to be using here the engie on init method.
So here what we need to do is we need to create a browser custom element that is linked to our component.
So this is sort of a bridge between standard browser functionality and the angular framework.
Let's see this in action.
We are going to define here a new constants and we're going to call it HTML element.
So this is going to contain a reference to an HTML custom element in order to create the custom element
we are going.
The goal here is to create custom element function, these function is going to create a custom element
based on the components.
So the first argument that we need to proceed is the component that we want to turn into a custom element.
In this case, it's the course title component.
Now, this component might need certain dependencies to get injected via the constructor.
In order to enable this, we need to pass in here as the second argument to the create custom element
function, the angular injector.
This is going to allow ANGULAR to fetch any dependencies that this component might need.
So let's get here a reference to the angular injector.
We are going to inject it here in our constructor.
Now that we have here the injector property, we can pass it here in the second argument.
This is going to be a configuration object.
We're going to populate the injector property with the name of this variable.
So we are going to pass it.
The D dot injector member variable.
What we get back from this function call is going to be a ready to use custom element.
So we just need to register it in the browser using the custom elements API.
Let's access here the custom elements, global object.
So this is not an angular specific API.
This is standard browser functionality.
And we're going to call here the method define.
We're going to specify here what's the e-mail tag that we are defining.
This case is going to be the course dash title, e-mail tag.
And next, we need to pass it in the custom element that we have just defined.
If we would now try this out by refreshing here, the application, we would notice that we get the
never here in the console, no component factory found for course title component.
This component is indeed only going to be instantiated programmatically by ANGULAR.
That is going to be then here by the custom element itself.
So in order for this to work, we need to add this component here to the list of N three components
of our angular application, which is defined here in our application root module.
We have here a new property that we haven't used so far.
It's going to be the entry components property in the case of this component, because we are not using
it anywhere in our templates, but we are still declaring it here.
We need to inform Angular that this is a programmatically instantiated component and not a declarative
component that angular detected by examining the templates.
Let's then adhere our course title component to our list of entry components.
We are going to reload the application and we're going to confirm that this time around, no errors
occurred in the console.
Let's now see our angular element in action.
We are going to switch here to a larger window and what we are going to do is we are going to add these
type of custom element directly here at our e-mail using the dev tools.
Let's, for example, select here the demo div here on top of our page.
Let's right click on it and let's edit it as e-mail.
So we have here an inline editor where we can start to modify the e-mail of this div.
We're going to add here manually a course title custom element.
Let's add here the closing tag and let's fill in here the title attribute.
Let's pass in here the title Angular Core, Deep Dive and before closing the editor, let's even copy
here several times this tag.
Let's say let's copy it three times.
Now we are going to click here somewhere outside the editor.
So let's click here, for example, this style and notice here that on the page, the angular components
corresponding to the course title is getting automatically instantiated by the browser.
This is happening because we have registered a custom element called this title with the browser.
So whenever we have these custom element to the page, that is going to trigger indirectly the creation
of this angular component.
So going back here to our application root components, if you remember the code that we wrote here,
this custom element that we have registered here in the browser is what is causing the instantiation
of the angular component.
So going back here to the larger window, what we have done here was only possible because our course
title component is an angular element and it's being managed directly by the browser using a custom
element.
If we will try to do the same operation that we did here, of manually adding here, for example, a
course component, this will not work because the course card component and like the course title component
is not an angular element.
It does not have a custom element linked to it.
So the browser has no way of knowing how to instantiate the component.
Notice that the course title component is also usable in our.
Templates, so we, for example, we head over here to our cursor component, we can replace here our
title tag by the course title component.
So we just have to fill in here the title input property in the same way as we would fill in an input
property of any component.
Now, in order to be able to use here a custom element inside the card component template, we're going
to have to add support for it at the level of the courses module.
In order to enable this, we are going to head over here to the courses module and we are going to add
here an extra schema without this configuration.
If we try to use here this custom element inside this angular template, we would get an error.
So if we try this out, we are going to see that our course title Angular Element is getting correctly
displayed as expected.
So this can also be used just like any other angular component.
And with this, we have reached the end of our coverage of angular elements and also the end of the
course.
Let's quickly summarize everything that we have learned in the conclusion lesson.