1
00:00:03,640 --> 00:00:09,580
Hello, everyone, and welcome back in the interdiction section of this course, we discussed how one

2
00:00:09,580 --> 00:00:15,770
of the main features of ANGULAR is that it gives us the ability of creating our own custom elements.

3
00:00:15,790 --> 00:00:16,840
So let's do that.

4
00:00:16,840 --> 00:00:22,090
In this lesson, we're going to be creating our very first angular custom component.

5
00:00:22,390 --> 00:00:26,680
The component is going to be a course card similar to this one.

6
00:00:26,820 --> 00:00:33,940
You can see here that the course is visible, and that's because we have here some e-mail in our application

7
00:00:33,940 --> 00:00:35,230
component template.

8
00:00:35,470 --> 00:00:41,650
Now, imagine that our application has several places where we would like to display course cards so

9
00:00:41,650 --> 00:00:46,600
we don't want to repeat these e-mail everywhere on the application.

10
00:00:46,630 --> 00:00:51,160
Also, the data that we are displaying here in this course card might be dynamic.

11
00:00:51,160 --> 00:00:57,460
We might have multiple cards, such as, for example, a list, of course, is displayed and we want

12
00:00:57,460 --> 00:01:04,209
to pass to each card the data that we are retrieving from the end instead of hard coding everything

13
00:01:04,239 --> 00:01:05,190
on the front end.

14
00:01:05,379 --> 00:01:10,900
So let's see how a component is going to help us to implement those use cases in order to create a new

15
00:01:10,900 --> 00:01:11,530
component.

16
00:01:11,860 --> 00:01:15,730
Let's head over here to the command line, stop our server.

17
00:01:15,940 --> 00:01:22,090
And what we are about to do here is we are going to use the angular zeolite to scaffold a new component

18
00:01:22,450 --> 00:01:22,960
for that.

19
00:01:22,960 --> 00:01:27,190
We are going to run the following command and generate component.

20
00:01:27,370 --> 00:01:31,030
And then we need to give here a name for a components.

21
00:01:31,240 --> 00:01:37,000
So we are going to call these the course dash card components after running this command.

22
00:01:37,000 --> 00:01:41,950
We see here that the angular SLA has generated here a few different files.

23
00:01:42,220 --> 00:01:49,150
We have here a typescript file for the component we have here and HTML template synthesis.

24
00:01:49,150 --> 00:01:52,380
And we also have here a test specification.

25
00:01:52,720 --> 00:01:54,640
Let's have a look at these files.

26
00:01:54,640 --> 00:01:59,020
They are here inside the source folder, inside the app directory.

27
00:01:59,020 --> 00:02:04,570
And we have here the new course card folder containing all these files.

28
00:02:04,600 --> 00:02:07,510
Let's now have a look at each of these files separately.

29
00:02:07,520 --> 00:02:15,130
Let's start with the course card components so they can see this file contains a typescript class called

30
00:02:15,130 --> 00:02:16,770
called Card Component.

31
00:02:17,170 --> 00:02:23,980
We can see that these corresponds to an angular component which represents a custom element because

32
00:02:23,980 --> 00:02:29,500
of the presence of the ADD component decorated inside the decorator configuration.

33
00:02:29,500 --> 00:02:31,290
We have here a series of properties.

34
00:02:31,330 --> 00:02:39,920
The first is the selector property that defines what is the e-mail tag that this component belongs to.

35
00:02:40,420 --> 00:02:46,750
Going back here to our application component, the selector means that we are going to replace this

36
00:02:47,470 --> 00:02:53,580
e-mail here by a new custom HTML element called Course That Card.

37
00:02:53,770 --> 00:03:00,500
So the name of this custom HTML tag is the same as the selector string that we have here.

38
00:03:00,910 --> 00:03:07,510
The next thing that we have here in our component configuration is the template URL, which points to

39
00:03:07,510 --> 00:03:11,170
the location in the file system of a template file.

40
00:03:11,300 --> 00:03:16,000
If we open it up, we can see that this is essentially empty at the moment.

41
00:03:16,180 --> 00:03:21,910
But the idea is that this file is going to contain the e-mail that we are going to see on the screen

42
00:03:22,240 --> 00:03:24,390
that corresponds here to a course card.

43
00:03:24,670 --> 00:03:30,920
So as you can see, that is going to correspond here to this course of e-mail that we have here.

44
00:03:31,090 --> 00:03:39,190
So let's go ahead and remove it here from the home page and let's move it here inside the course card

45
00:03:39,230 --> 00:03:40,090
e-mail.

46
00:03:40,240 --> 00:03:46,150
So now we have copies here, this static e-mail and notice that we are applying here.

47
00:03:46,180 --> 00:03:53,030
Some styles we will see later in the course how to make these styles specific only to this component.

48
00:03:53,170 --> 00:04:00,550
Right now, what we're going to do is we are going to run our application using these new angular components

49
00:04:00,550 --> 00:04:05,550
that we have created here with a set of empty styles for the moment.

50
00:04:05,980 --> 00:04:11,550
Let's go to the command line and let's run NPM start after a moment.

51
00:04:11,560 --> 00:04:13,540
Our server is now up and running.

52
00:04:13,550 --> 00:04:19,720
So if we now reload the application, we can see that we get the exact same result that we had before.

53
00:04:19,930 --> 00:04:26,740
But now we have extracted the e-mail that we have here and we have moved it inside the custom e-mail

54
00:04:26,740 --> 00:04:29,800
tag Krasker that we have created ourselves.

55
00:04:30,130 --> 00:04:37,300
This means that if we create here two or three extra HTML tags in our template and we refresh the application,

56
00:04:37,540 --> 00:04:43,120
we are going to see that we have here free instances over the course card component.

57
00:04:43,270 --> 00:04:51,310
As expected as we can see, using ANGULAR, we managed to create in only a couple of minutes a new e-mail

58
00:04:51,310 --> 00:04:53,910
element that we can use to build our application.

59
00:04:53,920 --> 00:04:59,980
If this application will have multiple screens where we have to show course cards, such as, for example,

60
00:04:59,980 --> 00:05:00,490
and all.

61
00:05:00,570 --> 00:05:08,190
Courses page or of courses in promotion page, we could use this component instead of copying all this

62
00:05:08,190 --> 00:05:14,400
e-mail everywhere where we need it, but notice that the strings that we have here with the description

63
00:05:14,400 --> 00:05:17,150
and also the image are hard coded.

64
00:05:17,460 --> 00:05:18,750
So we want to avoid that.

65
00:05:18,760 --> 00:05:21,780
We want to make this content configurable.

66
00:05:21,780 --> 00:05:28,320
We want to receive this content here as an input for the component, the same way that for standard

67
00:05:28,530 --> 00:05:34,470
HTML tags, we have configuration properties such as, for example, here, the class property, the

68
00:05:34,470 --> 00:05:36,150
source property, etc..

69
00:05:36,270 --> 00:05:42,210
Let's then see how can we add configuration properties to our custom e-mail element.