1
00:00:00,390 --> 00:00:06,420
Hello, everyone, again, so the last lesson we talked about the importance of components over app

2
00:00:06,480 --> 00:00:07,770
components, right?

3
00:00:08,860 --> 00:00:16,060
And this is the basic component for anger, so will our project only be a component?

4
00:00:16,720 --> 00:00:17,980
Well, of course not.

5
00:00:19,060 --> 00:00:25,690
We can add different functionality to our project by creating new components and to do this well, we're

6
00:00:25,690 --> 00:00:28,870
now going to learn how to add components to our project.

7
00:00:30,040 --> 00:00:36,250
So, as I say, we're preparing a page where company's products live and we want to create a list of

8
00:00:36,250 --> 00:00:40,540
these products and some descriptive information about some of the products.

9
00:00:40,560 --> 00:00:47,120
So now I'm going to create a new folder under the Yapp folder to proceed properly and cleanly.

10
00:00:47,830 --> 00:00:56,350
Now, since this folder is related to products, I am making the folder name products and I'll create

11
00:00:56,350 --> 00:01:02,980
the folder under the folder because usually angular related applications are stored underneath this

12
00:01:02,980 --> 00:01:03,390
folder.

13
00:01:04,970 --> 00:01:10,670
So now we're going to create a new file under this folder and I'll right click and new file and this

14
00:01:10,670 --> 00:01:14,780
file name is Products Dot Component Dot T.S..

15
00:01:17,050 --> 00:01:22,300
I notice while naming I'll write the folder and file name the same.

16
00:01:23,980 --> 00:01:30,880
Of course, this is not a rule, but it is a very good method for organizing as well as for convenience

17
00:01:31,330 --> 00:01:32,260
and clarity.

18
00:01:33,780 --> 00:01:37,220
And see the file with the tax extension.

19
00:01:37,800 --> 00:01:39,420
All right, so this is indeed important.

20
00:01:41,530 --> 00:01:45,100
OK, so now we have an empty component file.

21
00:01:45,940 --> 00:01:47,980
How do we create a component structure?

22
00:01:50,380 --> 00:01:56,920
So first of all, the component that we created is actually a typescript class.

23
00:01:59,150 --> 00:02:01,120
And I'm creating a class for.

24
00:02:08,130 --> 00:02:13,260
In order to export this glass outside the file, I'll write export at the beginning.

25
00:02:15,300 --> 00:02:18,360
Right, so now we have created a normal typescript class.

26
00:02:19,450 --> 00:02:24,970
Now, up until now, we haven't said anything to Angular, telling it that it's a component.

27
00:02:25,920 --> 00:02:29,940
So we should declare that this structure we create is actually a component.

28
00:02:29,970 --> 00:02:30,810
So how do you do that?

29
00:02:31,020 --> 00:02:31,410
Well.

30
00:02:32,310 --> 00:02:35,490
Just like this at Component Decorator.

31
00:02:36,580 --> 00:02:37,220
That's right.

32
00:02:38,590 --> 00:02:41,770
This is where the component decorator comes into play.

33
00:02:44,650 --> 00:02:49,630
So we can use this decorator to tell Angular that this file is a component.

34
00:02:50,700 --> 00:02:54,140
Now, decorator's always take the at sign in front of them.

35
00:02:55,550 --> 00:02:58,550
So now when we use his decorator, it gives us a warning.

36
00:02:58,730 --> 00:02:59,310
Oh, no.

37
00:02:59,330 --> 00:03:00,230
Why you say.

38
00:03:00,650 --> 00:03:05,260
But it's just because TypeScript didn't know about this decorator from the start.

39
00:03:06,080 --> 00:03:08,840
So that means that we have to import the component.

40
00:03:14,050 --> 00:03:16,330
And then right from.

41
00:03:20,480 --> 00:03:25,010
The package we imported is at Angular Igor.

42
00:03:28,190 --> 00:03:31,850
And we can say that this package contains the basic functions of angular.

43
00:03:32,830 --> 00:03:36,160
And yes, it's thanks to this at Component Decorator.

44
00:03:37,520 --> 00:03:44,300
The typescript component knows, and then the file can be compiled as JavaScript.

45
00:03:45,750 --> 00:03:52,320
However, the file is still empty and it hasn't gained any of the functionality so far, so we've got

46
00:03:52,320 --> 00:03:57,510
to stay together on this, right, because we first have to start filling in the class.

47
00:03:58,770 --> 00:03:59,710
So what'll I do?

48
00:03:59,730 --> 00:04:01,260
I'll write Selecter.

49
00:04:06,520 --> 00:04:14,500
So the HTML tag that we'll write here when using this component and other components, right, and look

50
00:04:14,500 --> 00:04:20,130
at this, if we write it in this way, we can write it like this when calling it in other places.

51
00:04:28,370 --> 00:04:34,490
Or if we put a dot in front of it like this, we call it as a div class.

52
00:04:42,870 --> 00:04:49,250
Or if we put a hash sign in front of it, we could write the I.D. here, right?

53
00:04:49,770 --> 00:04:53,430
So it's the same exact logic.

54
00:04:56,290 --> 00:04:57,970
But now I'm just going to use it this way.

55
00:04:59,250 --> 00:05:03,240
So we have now created The Selecter for later use and other components.

56
00:05:04,380 --> 00:05:09,210
Next up, we have another important part, which is the template.

57
00:05:10,740 --> 00:05:18,510
And this is actually the HTML page of our component, so over this first I create a new file under this

58
00:05:18,510 --> 00:05:18,960
folder.

59
00:05:22,820 --> 00:05:25,730
And don't forget to write the e-mail at the end.

60
00:05:28,360 --> 00:05:33,100
All right, so this is our file that we will keep our timecode.

61
00:05:34,270 --> 00:05:38,200
And look at this, I write in the template your URL.

62
00:05:41,450 --> 00:05:48,080
And the path of our HTML file in the component, since these two files are under the same folder, I

63
00:05:48,080 --> 00:05:49,070
can write it like this.

64
00:05:51,870 --> 00:05:55,110
So now let's add a simple code to this HTML file.

65
00:05:59,370 --> 00:06:06,660
Now, we have simply created our component, so let's have a look now, when we create a component,

66
00:06:06,660 --> 00:06:08,160
we need two basic files.

67
00:06:09,180 --> 00:06:10,860
TypeScript and HTML.

68
00:06:12,700 --> 00:06:20,730
So now Angular uses different components to create Web pages and uses modules to combine different parts.

69
00:06:20,790 --> 00:06:21,130
Right.

70
00:06:22,560 --> 00:06:28,170
So that means that we have to notify the module of this component that we've now created.

71
00:06:29,090 --> 00:06:35,810
Because module's bundled different parts into one package and Angular offers his package.

72
00:06:37,480 --> 00:06:44,620
So now we need to declare this component we created to the module so that Angular can use this component.

73
00:06:47,620 --> 00:06:54,430
So for now, we're going to prepare applications on a single module, and that's the app module.

74
00:06:55,600 --> 00:07:01,350
Then, as applications grow, multiple modular structures can be used, but for now.

75
00:07:02,250 --> 00:07:04,410
We'll continue on a single module.

76
00:07:05,970 --> 00:07:11,100
And we're going to talk about these topics in detail while explaining the module topic, so let's open

77
00:07:11,100 --> 00:07:14,550
up the app module and we can see how to add our component.

78
00:07:15,750 --> 00:07:20,820
So when we look at the content of this place, we see an empty class.

79
00:07:22,270 --> 00:07:29,020
And there is some other information that's been imported and we see the engie module decorator imported

80
00:07:29,020 --> 00:07:37,690
from at Angor and we see that four different features are used in these declarations imports, providers

81
00:07:37,690 --> 00:07:38,740
and bootstrap.

82
00:07:44,060 --> 00:07:51,050
Now, we've talked about bootstrap before, and it specifies which component to start with first and

83
00:07:51,050 --> 00:07:53,450
then what application is run.

84
00:07:54,540 --> 00:08:00,680
Now, it was communicating with our index dot html page, so we don't have to make any changes here.

85
00:08:02,420 --> 00:08:08,950
Now, there is already the app component in the declaration's directory, even though it is in the bootstrap

86
00:08:08,950 --> 00:08:11,440
directory, we've got to specify it here.

87
00:08:12,640 --> 00:08:19,230
Because it's a component of our application, so we specify the components that we're going to use here.

88
00:08:22,080 --> 00:08:24,900
So now we also add our new component to this section.

89
00:08:26,110 --> 00:08:28,450
When we have the component, we need to import it.

90
00:08:30,470 --> 00:08:35,240
When we come to it and press enter, we can automatically import.

91
00:08:37,070 --> 00:08:42,490
Now, of course, we can always write it ourselves, but using it this way is so much easier.

92
00:08:45,140 --> 00:08:47,930
So now TypeScript knows where to find this component.

93
00:08:49,630 --> 00:08:53,590
Because by importing it, we specified where this file is.

94
00:08:55,550 --> 00:08:58,020
So just like that, it's time to use the component.

95
00:08:58,820 --> 00:09:01,600
Now, you remember the Selecter for this component, don't you?

96
00:09:02,360 --> 00:09:03,440
Let's look at it again.

97
00:09:05,240 --> 00:09:10,340
So here we will use this selector in AFG Components HTML.

98
00:09:11,280 --> 00:09:12,840
So I'll open this file and.

99
00:09:14,090 --> 00:09:15,590
I'm adding a little thing here.

100
00:09:19,710 --> 00:09:26,820
Now, I'm calling the newly added component and look, I'm writing this like a tag.

101
00:09:29,540 --> 00:09:35,020
We already talked about this earlier, so I'll say the changes and run our project.

102
00:09:36,190 --> 00:09:39,610
So now I'm using the engy served a showband command for this.

103
00:09:45,260 --> 00:09:49,310
And just like that, our project opens automatically in the browser.

104
00:09:50,680 --> 00:09:53,250
So what do you think of that our project is now open.

105
00:09:54,550 --> 00:09:59,680
And here is the part from the Abdah component, TML.

106
00:10:03,420 --> 00:10:07,920
And just below is the content of the HTML page of the newly added component.

107
00:10:09,360 --> 00:10:12,000
So we can see it by saying inspect.

108
00:10:12,950 --> 00:10:16,670
And look at that, we can see which file they've come from.

109
00:10:27,670 --> 00:10:34,990
So there you have it, my friends, that is component's, adding a component has taught us how to use

110
00:10:34,990 --> 00:10:35,170
it.

111
00:10:35,200 --> 00:10:37,690
So I think I think that's enough for now.

112
00:10:37,930 --> 00:10:39,310
I want to see in the next lesson, though.