Create an Extended Header Using Angular Material Toolbars

Instructor: [00:00] To get started with the toolbar component, you first need to include the Material toolbar module. We'll start by adding a toolbar with no settings. When we refresh, we can see we have a basic toolbar with a light gray background.

[00:18] Like other themable components in Angular Material, the mat-toolbar component accepts the usual options of primary, accent, and warn corresponding with your app theme.

[00:30] If you have a use case for stacked toolbars, you can use the mat-toolbar-row component. All we need to do, we'll go ahead and copy down out toolbar component here. Inside the toolbar component, we can add our mat-toolbar-row. You can stack as many toolbars as you want. For our case, we'll just add three toolbars.

[00:46] When we refresh, we can see we have our extra three stacked toolbars. It's worth noting that the toolbar color is based off the wrapping toolbar. If we change the color to primary here, all three toolbars will reflect the primary color of our application.

[01:04] One pattern we can create using the Material toolbar is the extended header. As we scroll down, the title pops us and box-shadow appears at the right position. Let's see how we can replicate this with Angular.

[01:18] The first thing that we need to do is add our two toolbars to the top. We can go ahead and copy these up here. Let's name one "egghead." The one beneath it we'll call "material toolbars" so we can see a separation.

[01:31] Let's also switch the colors of both toolbars to the accent color of our app. We also need to assign each a class so we can add a little extra styling. We're going to call this one the "primary toolbar," and the one below we'll call the "secondary toolbar."

[01:44] Let's see where we're at. We have our stacked toolbars, but we need the bottom toolbar to scroll under the top. Let's add a little styling. We're going to go ahead and target the primary toolbar. We'll fix the positions to the top of the screen. We also need to add a little padding and adjust the font size to make the secondary toolbar slightly bigger.

[02:11] At this point, we just need to add the logic to hide and show the appropriate toolbar text and show our box-shadow at the right time. We'll start by adding a couple of properties that can act as flags to determine whether our text should be shown and hidden, and whether our box-shadow should be applied based on the scroll position.

[02:26] I went ahead and added a reference to our scroll container and grabbed the element via the querySelector API. All that's left to do is listen to the scroll events from this container. To do this, we're going to create an observable from the scroll event. We can call fromEvent, passing it our container and the event that we want to listen to, which in this case is the scroll event.

[02:45] We can go ahead and subscribe to this observable. What we want to do is we want to create a function that we're going to pass the scrollTop position of our container on every event. This will determine the status of our header.

[02:59] For now, I'm going to create an empty method that accepts a scroll position. I'm going to define the scroll and shadow thresholds as constants. Next, I'm going to add a simple if/else statement that depending on the current scroll position we're going to set the previously declared properties to either true or false. I'll do the same for the applyShadow property.

[03:24] Now that our flags are being set, we can add an ngIf state for each header. The top header will be shown when the popText property is true. The opposite will be case for our extended Material toolbars header. We now have the extended header text and our primary toolbar text disappearing and reappearing in the right location.

[03:45] Next, we need to imply our box-shadow. We can do this utilizing a simple class binding with our applyShadow property as well as Material's elevation helpers. It's worth noting that with Material's elevation helpers you can supply a value between 0and 24. For instance, if we made this z24, then it would have higher elevation than if we made it z2 or even z10.

[04:11] Our box-shadow is now applying correctly. All that's left is to perform a little cleanup on our component. We need to clean up the scroll subscription when this component is no longer active. To do this, we're going to utilize the takeUntil operator that accepts an observable. When this observable emits, it completes the subscription.

[04:27] Next, we're going to add a private property that's a subject that we'll use to emit a value in the ngOnDestroy lifecycle hook. OnDestroy, we're going to call next on our subject in order to trigger subscription cleanup. All that's left to do is add this to our takeUntil operator. Our Material extended header is now complete.