⚠️ This lesson is retired and might contain outdated information.

Create Tabbed Interfaces using Angular Material Tabs

Brian Troncone
InstructorBrian Troncone
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 7 months ago

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.

egghead
egghead
~ 12 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today