Create Tabbed Interfaces using Angular Material Tabs
This lesson explores the material design tabs component. We will discuss configuration, basic tabs, and creating a routable tabbed interface.
Instructor: [00:00] To start using the Material tabs component, you need to include the MatTabs module in your NgModule imports.
[00:05] To create a basic tabbed interface, you start with a matTabGroup component. You can then add tabs by including the MatTab component within your matTabGroup. Content containing within the tab is what we'll be seeing when in the tab is active, while the label input on a tag component is what will display on the tab itself.
[00:20] Let's go ahead and create a second tab, so we can see how a basic example looks. This gives us a material design themed tag UI, which transitions between the content and the active tab. If you want to further customize your tab label, you can include a template inside the MatTab component with the mat-tab-label directive.
[00:34] I'm going to go ahead and add an ng-template with the mat-tab-label directive. Inside this template, we can include anything that we want to see on our tab. For now, I'm just going to include a material icon next to the tab name.
[00:45] We now have a check mark appearing on our first tab. If you would like each tab to be its own route, you can use the mat-tab-nav-bar directive. To demonstrate this, I went ahead and added some child routes to our tabs lesson component.
[00:55] I also made the default route tab route one, which is going to be our tab that appears first. I then simply added a header and some dummy content for each tab. In our tabs lesson component, I created an array of tab routes using our route config.
[01:07] To create routable tags, we'll include a nav element with the mat-tab-nav-bar directive. We can then loop through our child tab routes, creating an anchor tag for each. We'll then add a mat-tab-link directive to each anchor tag. This identifies it is a tab. We'll then add a router link to route to the appropriate path given our config.
[01:25] MatTab links accept an active input to determine which tab is currently active and display the ink-bar under. We'll include the router-link-active directive which determines whether an element is active, based on the router link and the current URL.
[01:38] We can then grab a reference to this and pass it as a flag to our active input. For now, I'm just going to grab the current index from our ng4 and give each tab a generic name. When we refresh, we can see we still have our Material tabs UI, but now clicking on each tab transitions to a unique route.