1
00:00:00,600 --> 00:00:05,430
In the last video we put together some of the plate for our five different core components.

2
00:00:05,430 --> 00:00:09,840
Now in this video we're going to continue by certain to work on this header at the top of each of these

3
00:00:09,840 --> 00:00:14,970
individual screens putting the letter together is really important because it forms the basis of having

4
00:00:14,970 --> 00:00:20,420
the ability to log in and log out of our application which is a very large feature inside of our app.

5
00:00:20,460 --> 00:00:25,050
Now in order to put the header together you might think that we could build a better component and then

6
00:00:25,050 --> 00:00:31,040
show it inside of the stream list inside of streams show inside a stream create edit and so on.

7
00:00:31,260 --> 00:00:36,720
But instead we can use a little shortcut that will make us only have to define or show the header component

8
00:00:36,720 --> 00:00:38,660
exactly one time.

9
00:00:38,670 --> 00:00:40,900
So here's what we're going to do.

10
00:00:40,910 --> 00:00:45,800
This is a diagram of our current component hierarchy except for what you see on the right hand side

11
00:00:45,800 --> 00:00:46,710
I suppose.

12
00:00:46,970 --> 00:00:50,450
So at the very top we have our app component inside the app component.

13
00:00:50,450 --> 00:00:55,840
We are showing a browser router and the browser router has some number of routes defined inside of it.

14
00:00:55,850 --> 00:00:59,870
Now these different routes are only going to be visible depending upon the current Your eldest the user

15
00:00:59,870 --> 00:01:00,910
is visiting.

16
00:01:01,130 --> 00:01:06,260
What we are saying that we want our head component to always be visible no matter what you are l the

17
00:01:06,260 --> 00:01:07,760
user is trying to look at.

18
00:01:07,970 --> 00:01:14,210
So in order to do so we're just going to add the header component to our app component outside of the

19
00:01:14,210 --> 00:01:16,070
browser router.

20
00:01:16,290 --> 00:01:21,180
If we have a component that is not listed inside the browser router it will always be shown 100 percent

21
00:01:21,180 --> 00:01:24,510
of the time irrespective of what the current path is.

22
00:01:24,720 --> 00:01:26,750
So let me show you a quick example of this.

23
00:01:27,030 --> 00:01:32,820
Back inside of my app component I'm going to find the div right here that is dropping our browser router.

24
00:01:33,150 --> 00:01:38,700
And then as a quick example I'm going to put a H-1 tag inside of here and I'll just give it the text

25
00:01:38,880 --> 00:01:40,850
header like so.

26
00:01:40,910 --> 00:01:45,470
So then I'll save this and then we can flip back over to our application we can visit all the different

27
00:01:45,470 --> 00:01:50,690
routes that we have defined and we'll see that no matter what this one is always visible at the top

28
00:01:50,690 --> 00:01:51,710
of the screen.

29
00:01:52,130 --> 00:01:58,650
So if I flip back over that streams delete I see the header if I go to the route I see the header at

30
00:01:58,670 --> 00:01:59,890
Stream list.

31
00:01:59,900 --> 00:02:02,620
I can do streams slash at it.

32
00:02:02,630 --> 00:02:06,190
I still see the header and you get the general idea.

33
00:02:06,200 --> 00:02:10,220
So in order to make sure that this component is always visible we're just going to show it inside the

34
00:02:10,400 --> 00:02:14,330
component outside of our browser router and that's pretty much it.

35
00:02:14,330 --> 00:02:15,680
Now let's take a quick pause right here.

36
00:02:15,680 --> 00:02:19,060
When we come back the next section will start actually putting our real header together.