Hello, everyone, and welcome back in the interdiction section of this course, we discussed how one
of the main features of ANGULAR is that it gives us the ability of creating our own custom elements.
So let's do that.
In this lesson, we're going to be creating our very first angular custom component.
The component is going to be a course card similar to this one.
You can see here that the course is visible, and that's because we have here some e-mail in our application
component template.
Now, imagine that our application has several places where we would like to display course cards so
we don't want to repeat these e-mail everywhere on the application.
Also, the data that we are displaying here in this course card might be dynamic.
We might have multiple cards, such as, for example, a list, of course, is displayed and we want
to pass to each card the data that we are retrieving from the end instead of hard coding everything
on the front end.
So let's see how a component is going to help us to implement those use cases in order to create a new
component.
Let's head over here to the command line, stop our server.
And what we are about to do here is we are going to use the angular zeolite to scaffold a new component
for that.
We are going to run the following command and generate component.
And then we need to give here a name for a components.
So we are going to call these the course dash card components after running this command.
We see here that the angular SLA has generated here a few different files.
We have here a typescript file for the component we have here and HTML template synthesis.
And we also have here a test specification.
Let's have a look at these files.
They are here inside the source folder, inside the app directory.
And we have here the new course card folder containing all these files.
Let's now have a look at each of these files separately.
Let's start with the course card components so they can see this file contains a typescript class called
called Card Component.
We can see that these corresponds to an angular component which represents a custom element because
of the presence of the ADD component decorated inside the decorator configuration.
We have here a series of properties.
The first is the selector property that defines what is the e-mail tag that this component belongs to.
Going back here to our application component, the selector means that we are going to replace this
e-mail here by a new custom HTML element called Course That Card.
So the name of this custom HTML tag is the same as the selector string that we have here.
The next thing that we have here in our component configuration is the template URL, which points to
the location in the file system of a template file.
If we open it up, we can see that this is essentially empty at the moment.
But the idea is that this file is going to contain the e-mail that we are going to see on the screen
that corresponds here to a course card.
So as you can see, that is going to correspond here to this course of e-mail that we have here.
So let's go ahead and remove it here from the home page and let's move it here inside the course card
e-mail.
So now we have copies here, this static e-mail and notice that we are applying here.
Some styles we will see later in the course how to make these styles specific only to this component.
Right now, what we're going to do is we are going to run our application using these new angular components
that we have created here with a set of empty styles for the moment.
Let's go to the command line and let's run NPM start after a moment.
Our server is now up and running.
So if we now reload the application, we can see that we get the exact same result that we had before.
But now we have extracted the e-mail that we have here and we have moved it inside the custom e-mail
tag Krasker that we have created ourselves.
This means that if we create here two or three extra HTML tags in our template and we refresh the application,
we are going to see that we have here free instances over the course card component.
As expected as we can see, using ANGULAR, we managed to create in only a couple of minutes a new e-mail
element that we can use to build our application.
If this application will have multiple screens where we have to show course cards, such as, for example,
and all.
Courses page or of courses in promotion page, we could use this component instead of copying all this
e-mail everywhere where we need it, but notice that the strings that we have here with the description
and also the image are hard coded.
So we want to avoid that.
We want to make this content configurable.
We want to receive this content here as an input for the component, the same way that for standard
HTML tags, we have configuration properties such as, for example, here, the class property, the
source property, etc..
Let's then see how can we add configuration properties to our custom e-mail element.