1
00:00:00,180 --> 00:00:06,480
In this lecture, we're going to create our first component and get our needs at least one component

2
00:00:06,480 --> 00:00:11,310
to run creating a component is a similar process to create a module.

3
00:00:11,490 --> 00:00:17,670
In fact, you'll find that creating anything in angular is mostly a consistent experience.

4
00:00:18,000 --> 00:00:23,220
Almost everything in Angular is made up of classes with decorators attached to them.

5
00:00:23,880 --> 00:00:29,820
We will be working inside the App Dock component Dot's file inside this file.

6
00:00:29,850 --> 00:00:33,240
We will export a class called app components.

7
00:00:35,820 --> 00:00:42,810
Next, we will need to import a decorator called component from the angular slash core package.

8
00:00:45,300 --> 00:00:48,960
Afterward, we can apply this decorator to the class.

9
00:00:51,500 --> 00:00:56,120
We need to configure the component by passing it and object to the decorator.

10
00:00:56,480 --> 00:00:59,410
There are two required options for the components.

11
00:00:59,690 --> 00:01:04,250
We need to provide a selector and component in this object.

12
00:01:04,370 --> 00:01:08,540
We will add the selector option with a value of approach.

13
00:01:11,160 --> 00:01:16,050
The value for these select Selecter option is a custom tag name for our components.

14
00:01:16,440 --> 00:01:20,430
The name of the tag must be a valid CIUSSS selector value.

15
00:01:20,730 --> 00:01:24,360
We can't use spaces or special characters in the name.

16
00:01:24,360 --> 00:01:30,330
Aside from a dash, the name should be all lowercase with dashes to separate words.

17
00:01:30,690 --> 00:01:34,140
We want to be consistent with other HTML tags.

18
00:01:34,440 --> 00:01:37,410
We can't override other HTML tags.

19
00:01:37,770 --> 00:01:40,650
Otherwise, the browser will get confused.

20
00:01:40,920 --> 00:01:43,560
We should have unique and custom names.

21
00:01:44,130 --> 00:01:47,070
The next option we will add is called templates.

22
00:01:47,430 --> 00:01:49,860
Its value will be a template string.

23
00:01:52,480 --> 00:01:57,040
The template option can contain the HTML markup for our components.

24
00:01:57,340 --> 00:02:00,520
We can add whatever we want for this example.

25
00:02:00,670 --> 00:02:04,570
We're going to add a pair of paragraph tags with some text.

26
00:02:07,080 --> 00:02:11,430
We have created our first component, it's time to load it in the browser.

27
00:02:11,760 --> 00:02:14,700
Earlier, we received an error from the browser.

28
00:02:15,180 --> 00:02:18,120
The error stems from not rendering a component.

29
00:02:18,480 --> 00:02:22,050
Now that we have created a component, we can try loading it.

30
00:02:22,410 --> 00:02:26,400
We're going to need to perform a series of steps to render a component.

31
00:02:26,760 --> 00:02:29,820
First, we need to import it into the module.

32
00:02:30,090 --> 00:02:33,960
Switch over to the app module acts file.

33
00:02:36,670 --> 00:02:41,230
At the top of the file, we're going to import the app component class.

34
00:02:43,840 --> 00:02:48,700
The app module is responsible for loading components necessary for our app.

35
00:02:49,030 --> 00:02:55,120
We need to register if the component with our module, we can register components by adding an array

36
00:02:55,120 --> 00:02:57,940
to the decorator called declarations.

37
00:03:00,480 --> 00:03:03,990
Next, we can pass in the app component class.

38
00:03:06,640 --> 00:03:13,210
By registering the component, Angular will allow us to use the components the browser will be able

39
00:03:13,210 --> 00:03:16,030
to understand how to render the component.

40
00:03:16,420 --> 00:03:19,270
Normally we can use components straight away.

41
00:03:19,570 --> 00:03:24,430
However, the app component is considered the root component of our app.

42
00:03:25,060 --> 00:03:28,810
The root component is responsible for loading other components.

43
00:03:29,080 --> 00:03:33,880
It's similar to how the root module is responsible for loading other modules.

44
00:03:34,180 --> 00:03:35,740
We need to chill angular.

45
00:03:35,740 --> 00:03:42,160
This is the root component, and the configuration object will add an array called bootstrap.

46
00:03:44,800 --> 00:03:50,680
Inside this array, we need to pass in a list of components for bootstrapping other components.

47
00:03:51,010 --> 00:03:53,650
We will pass in the app component class.

48
00:03:56,270 --> 00:04:01,080
The bootstrap component only applies to the root module and components.

49
00:04:01,490 --> 00:04:07,880
When we start creating other components, we won't need to constantly pass in our components to this

50
00:04:07,880 --> 00:04:08,330
array.

51
00:04:08,750 --> 00:04:11,240
Only root component should be passed in.

52
00:04:11,930 --> 00:04:15,890
There's one last step we need to take in the source directory.

53
00:04:16,070 --> 00:04:18,860
Open the index source HTML file.

54
00:04:21,420 --> 00:04:24,690
The index file is a standard HTML file.

55
00:04:25,080 --> 00:04:30,390
The indexed HTML file is the file running in the browser when we view the app.

56
00:04:30,750 --> 00:04:33,150
You'll notice there aren't script tags.

57
00:04:33,420 --> 00:04:39,810
The development server will automatically inject our app into this file when delivering it to the browser.

58
00:04:40,230 --> 00:04:43,950
It does not need to be manually included in the document.

59
00:04:44,550 --> 00:04:51,270
There's nothing special about it besides this one line inside the body tag inside the body tag.

60
00:04:51,420 --> 00:04:52,980
We're loading the app route.

61
00:04:52,980 --> 00:04:58,410
Components using components is similar to using any other HTML tag.

62
00:04:58,650 --> 00:05:01,920
It's the name of the tag surrounded by angle brackets.

63
00:05:02,220 --> 00:05:06,960
Components have opening and closing tags during initialization.

64
00:05:07,200 --> 00:05:11,820
Angular will insert the content of the component inside this tag.

65
00:05:12,150 --> 00:05:15,690
We have complete freedom over where our app is placed.

66
00:05:16,050 --> 00:05:18,300
We won't be doing anything with the tags.

67
00:05:18,480 --> 00:05:19,590
We'll leave them be.

68
00:05:19,830 --> 00:05:21,360
Let's check out the browser.

69
00:05:23,990 --> 00:05:26,570
The app is entirely different from before.

70
00:05:26,870 --> 00:05:30,320
It's not rendering the page we had in the default project.

71
00:05:30,620 --> 00:05:33,790
It's cause of the template we had in the components.

72
00:05:34,220 --> 00:05:37,850
The code from the template option gets rendered on the browser.

73
00:05:38,240 --> 00:05:39,380
Mission accomplished.

74
00:05:39,650 --> 00:05:43,430
We've successfully created and loaded our first components.

75
00:05:43,760 --> 00:05:45,830
Everything is starting to come together.

76
00:05:46,160 --> 00:05:50,050
We're almost at the homestretch in the last few lectures.

77
00:05:50,090 --> 00:05:52,880
We're going to explore the last few files.

78
00:05:53,120 --> 00:05:56,840
By the end, we will have recreated the default project.

79
00:05:57,050 --> 00:05:59,390
Let's continue in the next lecture.