Hello, everyone, and welcome back.
In these lessons, we're going to talk about component inputs.
So as we have seen in the last lesson we know have here free instances of the Coast Guard component.
All this text here is the same and the image is also the same.
We would like to give to each course, guard a different title and image and let's see where we could
get the data for that.
If you open here our angular course root repository and then open here the source folder, you're going
to see that there is a typescript file here called DB Data.
That's if we click on it, we're going to see that it contains here a series of courses.
So each of these JavaScript objects that we see here corresponds to a given course.
Let's see, how can you use this to bring to the screen one course card for each of the elements that
we have here?
The first thing that we have to do is to make the data available to the template.
The template consumes data that is available here at the level of the component as a member variable.
So let's say that we are going to define here a variable called courses that is going to contain a few
of the courses here available in this array.
Let's say that we want to take the courses, number one, number two.
And number three, we can make this data available at the level of the application component so that
we can add it to the screen by adding member variables here at the level of this component.
Let's say that we want to make available the data for this course.
Then we define here a variable called core course and we assign it the first element of the courses
array who can do the same for a couple of other courses.
Let's define here, for example, one for our guests and the other for end.
So here we have free member variables.
Define any of these member variables are available for being used here at the level of the template.
Let's try these out.
We are going to arrive here in H1 tag and we're going to use here the angular template interpolation
syntax and we're going to try to access the description of the core cause.
If we know relo of the application, we are going to see that indeed we are using here the title of
the first course.
If by some reason we would like to print instead of the title of the second course, we just have to
use the second variable that we have defined here.
If we replace core course with our discourse and reload our application, we are going to see that now.
We have the title of the second course here in our courses array.
So as you can see, in order to be able to use some data in our template, we need to first assign it
to a member variable at the level of a component.
If we do not do that first, then the data will not be visible here at the level of the template.
Now, instead of printing out here, the description of the first course that we would like to do is
to pass the description as an input of the Coast Guard component.
We would like to do something like this.
I would like to define here a custom input property called title and inside it.
Somehow we would like to pass in here the arrogance course description.
As we have seen before, the angular syntax for inputs is the square brackets syntax.
So D says to Angular that the content here inside these double quotes is to be interpreted as a JavaScript
expression that is going to be evaluated in the context of the application component.
Now the question is how to add these input properties title to the course curve.
We can do so by defining here a member variable, which will be a string at the level of the course
curve component.
And we want to annotated with angular core input decorated this way.
Angular will note that this is an input property of the course card element.
With this in place, we are now passing in here the description of the course.
What we want to do now is to use the title here at the level of the course card components template.
In order to do that, we do the same as we were doing here in our application component.
We are going to use here the ANGULAR.
There will clearly be syntax for interpolating here an expression and we are going to access here the
title property that is present here in the context of the course of component class.
So let's try this out.
If we now reload our application, we are going to see that for the first car that we have defined here
in our list of cards we still have here the are.
Yes.
In practice.
His course description, actually, I wanted to pass in here the of course.
So let's quickly fix that.
We will lower the application and we can see that we have here the correct title.
The other two cards, however, are not displaying anything.
And this is because the title property for these two other cards has not been defined.
So this means that each of the course card components has its own data scope.
There is an instance of the cost curve component for each of the courses here we have the title with
this value, but here these value is not defined.
So we have here an empty string.
Let's now change here, our template and parsing here.
The other course descriptions we are going to add here in the second card, the title of the RSG is
Course.
And here we are going to pass in the title of the engineering course.
And now by reloading here our cards, we can see that we have the titles as expected.
First the core div, then are exchanges and then indirects.
Now the next thing that we would like to do is to change the course image for each of the cards.
So we would like to pass to the component, the second property here, the icon Eurail.
We will also like to change here the long description of the course so that it corresponds to the text
that we have here.
So one way of doing it would be to pass to this card component to extra properties.
We would go here to the course card component and we will have here a couple of new properties.
We're going to do this in a different way.
We are going to instead pass as an input to the card component, the complete course object in one go
with all its properties.
For that, we are going to be using here a type definition that you will find here in the model folder.
If you open the course, the file you and see that we have here a very simple interface defined that
defines a course type.
This is a very practical way of defining custom JavaScript object types in a type safe way.
As we will see, this is going to give us auto completion at the level of our component classes and
even at the level of the template.
Right now we want to refactor our course card component to take as input instead of only the course
title.
We want to take as input a complete course object that we are going to import here from the model folder.
Now, moving to the template of our course car component, this variable here is no longer present in
the course card component class.
Instead, we have available the course object so we can now access the title of the course by auto completing
here the property that we want.
We have here all the properties available at the level of the template and we can now choose here because
that description, the same way that we have printed here, the description of the course, we can also
access here the course image.
So the source of this image is no longer going to be here and hardcoded value.
Instead, we are going to pass it.
The value of the course image.
We want to again access the course object and we're going to see that in our autocomplete list we have
available that I can you l property in a very similar way, using an interpolation expression.
We are going to be able to pass in here the long description of the course.
Now in order to view the free courses on the screen, all we have to do is go back here to our application
component template and instead of filling in the title property, we are going to instead of filling
the court property for each of the courses for the first car that we want to pass in the caucus for
the second hour discourse and for the for the indirect course.
If we now try this out, we are going to see that our data is being correctly displayed as expected
as we can see the input syntax with square brackets for passing input data to a custom component.
It's exactly the same syntax that we use for defining a property of a standard HTML element, such as,
for example, an image tag.
The syntax is consistent in both cases.
Next, what we are going to cover is component outputs, how to generate custom events from our custom
components.