1
00:00:00,120 --> 00:00:06,540
In this lecture, we are going to create a Tab UI, designing a tab component is an entirely different

2
00:00:06,540 --> 00:00:07,890
process from models.

3
00:00:08,130 --> 00:00:11,370
We all get to explore some advanced features of angular.

4
00:00:11,580 --> 00:00:15,570
Before we do, we need to discuss the overall design of the components.

5
00:00:15,870 --> 00:00:19,170
First, let's check out what a Tab UI looks like.

6
00:00:19,860 --> 00:00:24,570
I'm currently on the documentation page for tabs from the bootstrap framework.

7
00:00:24,780 --> 00:00:27,210
We aren't going to be using bootstrap at all.

8
00:00:27,570 --> 00:00:31,710
Unfortunately, tailwinds doesn't have an example of how tabs work.

9
00:00:32,040 --> 00:00:36,810
The example we're looking at is purely for visual demonstration purposes.

10
00:00:37,290 --> 00:00:39,420
A Tab UI has two features.

11
00:00:39,690 --> 00:00:43,680
The first feature is a navigation menu for switching between content.

12
00:00:44,160 --> 00:00:46,560
The second feature is the content itself.

13
00:00:46,860 --> 00:00:49,200
Only one tab may remain active.

14
00:00:49,500 --> 00:00:51,900
It allows us to group content together.

15
00:00:52,170 --> 00:00:54,780
We will be recreating this type of behavior.

16
00:00:55,560 --> 00:00:59,340
We are going to have two components for creating a Tab UI.

17
00:00:59,670 --> 00:01:03,480
Unlike before, the modal component was a single component.

18
00:01:03,780 --> 00:01:07,200
We didn't have a need to create a nested component structure.

19
00:01:07,560 --> 00:01:10,530
Things are going to be different with our UI for taps.

20
00:01:11,010 --> 00:01:12,330
Taps come in groups.

21
00:01:12,450 --> 00:01:15,240
We want our tabs component to be reusable.

22
00:01:15,570 --> 00:01:18,960
We should be able to display two tabs or 20 tabs.

23
00:01:19,230 --> 00:01:21,930
What if we had two different groups of tabs?

24
00:01:22,260 --> 00:01:27,270
How would we be able to tell the difference between one group of tabs from another group of tabs?

25
00:01:27,780 --> 00:01:31,020
We don't want different groups of tabs to affect one another.

26
00:01:31,530 --> 00:01:35,040
We can separate tabs by creating a container component.

27
00:01:35,370 --> 00:01:39,630
The first component we will create will be a container for our tabs.

28
00:01:39,930 --> 00:01:46,290
If we add a tab to this container component, the container will manage to switch between tabs.

29
00:01:46,620 --> 00:01:50,310
Tabs defined outside the container will remain unaffected.

30
00:01:50,940 --> 00:01:55,500
The second component we will create will be for storing the content for a tab.

31
00:01:55,830 --> 00:02:03,330
Overall, we will have two components a container for a group of taps, another component for an individual

32
00:02:03,330 --> 00:02:03,810
tab.

33
00:02:04,290 --> 00:02:06,900
The container will manage the group of tabs.

34
00:02:07,170 --> 00:02:13,470
This type of design is common for UI components that are grouped together accordions or another type

35
00:02:13,470 --> 00:02:17,190
of UI element that can be implemented similarly to tabs.

36
00:02:17,430 --> 00:02:18,570
Let's get started.

37
00:02:19,410 --> 00:02:21,630
We are going to generate the components.

38
00:02:21,840 --> 00:02:23,910
Open the command line in your editor.

39
00:02:24,180 --> 00:02:30,870
We will type the following Command G See Shared Slash Tabs container.

40
00:02:33,330 --> 00:02:39,270
You'll notice I'm not typing generate components, they generate components, Sub Command has a shorthand

41
00:02:39,270 --> 00:02:44,340
sub command typing GC is the same as typing generate component.

42
00:02:44,760 --> 00:02:47,430
They are free to use either a set of commands.

43
00:02:47,730 --> 00:02:50,460
I prefer these shorthand versions of the command.

44
00:02:50,730 --> 00:02:52,230
Let's run this command.

45
00:02:53,130 --> 00:02:59,760
Next, we will run the following command G C Shared Slash tab.

46
00:03:02,390 --> 00:03:06,320
After creating both components, let's export both components.

47
00:03:06,560 --> 00:03:12,830
We don't have to declare the components with the shared module, the ceiling will automatically declare

48
00:03:12,830 --> 00:03:13,850
both components.

49
00:03:14,150 --> 00:03:19,430
We are declaring these components in the shared module because we want them to be reusable.

50
00:03:19,760 --> 00:03:24,590
However, we do need to export them open the shared module file.

51
00:03:27,070 --> 00:03:32,530
Inside the exports array, we will add the tabs, container and tab components.

52
00:03:34,970 --> 00:03:40,520
We can move on to creating the templates, open the authentication model template file.

53
00:03:42,970 --> 00:03:47,680
Below the paragraph tag, we are going to add the tabs container component.

54
00:03:50,110 --> 00:03:52,670
We can start using our components right away.

55
00:03:53,050 --> 00:03:59,260
The shared module is already imported into the user module, which is the module the authentication

56
00:03:59,260 --> 00:04:01,360
modal component is declared under.

57
00:04:01,690 --> 00:04:08,710
Our model has one group of taps one tab for the login form and another tab for the registration form.

58
00:04:09,100 --> 00:04:12,610
Let's add to tab components inside the container.

59
00:04:16,320 --> 00:04:21,029
Next, let's move the forms to their respective tab components.

60
00:04:21,360 --> 00:04:24,600
The first tab component will hold the log in form.

61
00:04:25,020 --> 00:04:28,440
The second tab component will hold the registration form.

62
00:04:28,890 --> 00:04:32,310
I have added comments about both forms to help you find them.

63
00:04:38,250 --> 00:04:41,850
Subsequently, we will start moving the navigation tabs.

64
00:04:42,090 --> 00:04:47,940
They have a comment above them that says taps cut the entire unordered list element.

65
00:04:50,570 --> 00:04:54,740
Afterward, open the Thames container component template file.

66
00:04:57,210 --> 00:05:00,500
Replace the content with the unordered list element.

67
00:05:03,010 --> 00:05:08,170
We are going to be using content projection to insert the content below the list.

68
00:05:08,500 --> 00:05:13,950
We will need to add the energy content element below the unordered list element.

69
00:05:16,410 --> 00:05:23,280
We're not limited to projecting regular HMO elements, components may be projected into other components

70
00:05:23,580 --> 00:05:27,810
in this example, we are going to be projecting the tab components.

71
00:05:28,350 --> 00:05:34,770
The tab component will need to project content to open the Tab Component Template file.

72
00:05:37,310 --> 00:05:40,810
Replace the contents with the energy content element.

73
00:05:43,280 --> 00:05:49,790
After making those changes, we should be able to view our components in the browser, refresh the page.

74
00:05:52,220 --> 00:05:55,370
If we open the model, we will get the same UI.

75
00:05:55,700 --> 00:06:00,650
We've separated everything into components in the next set of lectures.

76
00:06:00,800 --> 00:06:03,290
We will begin making our tabs functional.