Angular Material provides components and directives that help position and layout the content. The components adhere to Material Design specifications and provide functionality out of the box.
This chapter describes three often-used components that encapsulate content, cards, tabs, and an accordion with an expandable panel. A card provides view for a single entity. The entity could be an order or customer. Tabs allow switching between entities for each tab. The accordion with an expansion panel displays a list of items.
Material Design: Card
A card is a Material Design construct that visually puts together the content and actions of an entity in the system.
In the sample application, we have used cards, and a superhero is an entity. We show information about a superhero in a card. The form that creates a superhero could be on a card. Figure 13-1 shows a card that creates a superhero.
Card Title: A header or title for the card. Figure 13-1 shows the title Create a new superhero form.
Card Subtitle: A subtitle provides brief descriptive information about the purpose of the card. Figure 13-1 describes the form and purpose of the page in the web application.
Content : The functionality of the view or the card.
Actions : Possible operations of the card content. This section is placed at the bottom of the card. In the sample, the actions are to create a superhero or reset the form.
Footer: Descriptive text, information, or warning messages can be placed in the footer. The footer is the last section at the bottom of the card.
Card Image: Images and video; provides information about the contents of the card.
Getting Started
To use Angular Material’s card, import the module containing the component. In Listing 13-1, all the Material Design components are encompassed in superheroes-material-design.module.ts.
Import Angular Material Card Module
Using Angular Material Card
Now that we have imported the Angular Material card module, the components that provide the card, card titles, content, and footer are available.
Create Superhero Form in a Card
<mat-card> is the root component for all the card content. It includes the child components.
<mat-card-header> is the top section of the card. It may include the following two components: title and subtitle.
<mat-card-title> is the title of the card or the superhero form.
<mat-card-subtitle> is the subtitle/description of the card or the superhero form.
<mat-card-content> is the card content or the superhero form elements.
<mat-card-actions> are the buttons that allow the user to create a superhero or reset the form.
<mat-card-footer> is the footer text at the bottom of the card.
The mat-card-footer has an align attribute. The value is set to “end”. See line 19 in Listing 13-2. The actions are on the right side of the card. The default value is “start” at which point it is left aligned. Figure 13-2 shows the result.
Angular Material Card with Images
Images on a card are an impressive way to present content to the user. In Figure 13-2, the superhero’s profile is presented in a visually impactful manner. We modify superhero-profile.component.html in the code sample to present data in a card. Similar to Listing 13-3, we add mat-card, the header, and title to the profile component.
mat-card-avatar: The directive positions the avatar in the header. Add an image to the mat-card-header and the directive mat-card-avatar.
In Figure 13-2 and Listing 13-3, we use the mat-card-avatar directive on the image element. It is added in <mat-card-header> to show the avatar in the card header, along with the card title and subtitle.
Consider lines 2 to 6 in the card header. See line 3 for usage of the mat-card-avatar directive.
mat-card-image: The directive positions a large image on the card to provide a visual depiction of the content.
Use Material Design Card Components and Directives on Superhero Profile
Note
Image URLs are hard-coded for simplicity. They can be obtained from the model object on the superhero-profile.component.ts file.
Material Design: Tabs
Tabs are often used to organize multiple views on a page. The tab title could be text, or an icon, or both. Tabs show one active view at a time (see Figure 13-3).
The Angular Material component for tabs is confined to the control’s Material Design specifications. It highlights the active tab with an ink bar. The superheroes list in Figure 13-3 animates as we switch between tabs.
Note
Remember, BrowserAnimationsModule was imported into SuperheroesMaterialDesignModule. We can limit animations by switching to NoopAnimationModule instead.
Getting Started
To use Angular Material’s tabs, import the module containing the component. In Listing 13-4, all the Material Design components are encompassed in superheroes-material-design.module.ts.
Import Tabs Module
Create a New Component for Tabs
The Angular CLI command in Listing 13-5 updates the declarations array in the superheroes-material-design module. The component is available to use within SuperheroesMaterialDesignModule. We have taken advantage of the scaffolded import (automatically) with many components created using Angular CLI.
Import Tabs Module
Using Angular Material Tabs
So far, we have imported the required module to use the tabs and created a new component (TabSampleComponent), in which the tabs code can be written.
Let’s create the tabs. In tab-sample.component.html (the template file for TabSampleComponent), use the <mat-tab-group> and <mat-tab> components. The <mat-tab-group> component encapsulates multiple tabs. It is the parent component for all tabs. Each tab is represented by <mat-tab>.
Using Tabs
Components that list superheroes and create a superhero are child elements within each <mat-tab>. The first tab shows the superhero list, and the second tab shows the create superhero component.
Note the label attribute on <mat-tab>. The text input into the label is the tab title (see Figure 13-3).
AppComponent at Root, Referencing Tabs
Note
For this sample, we use tabs instead of left navigation and workspace. app-tab-sample is the selector for TabSampleComponent; hence, it is used in the HTML template.
Tab Labels with Rich Text
Router Integration with Tabs
We have created two tabs. They load two different components or views without updating the route. The URL does not change as the users switch tabs. However, we might need router integration to let users bookmark a tab. Moreover, if there are a large number of tabs, it is good practice to map a route to each tab.
mat-tab-nav-bar: Creates a tab group with router links. Use on a parent component that encapsulates tabs that are router links.
mat-tab-link: A router link with the view of a tab. Use mat-tab-link along with routerLink.
Router Integration with Tabs
For the router to work, RouterModule from @angular/router needs to be imported. Remember, in Chapter 11 we used app-routing.module for the routing logic.
App Routing Module Import for Router Integration with Tabs
Expansion Panel
The Angular Material expansion panel with the accordion allows the showing of a long list of entities in a concise manner. In a large list, the user can collapse many items and expand only the entities that she prefers to focus on. The remaining data elements are collapsed and hidden, making the view easy to comprehend.
Getting Started
To use Angular Material’s expansion panel, import the module containing the component. In Listing 13-12, all the Material Design components are encompassed in superheroes-material-design.module.ts.
Import Angular Material Expansion Panel
Create a New Component for Expansion Panel
Import Angular Material Expansion Panel
Router Configuration For Expansion Panel
To see the component in action, navigate to the newly configured url /heroes-accordion.
Using the Expansion Panel
mat-accordion: Uses the accordion as the root component for the list of expansion panels.
mat-expansion-panel: Each expandable area under the accordion is an expansion panel. It is the child component of the accordion. A panel can be in one of the two states: expanded or collapsed.
mat-expansion-panel-header: The header is the title section of the expansion panel. This section always shows minimal information about the panel, even in a collapsed state. Typically, clicking the header section expands to show more information about the panel. It is a child component of mat-expansion-panel (see Figure 13-6).
mat-panel-title: The title text or section of the panel. It is a child component of mat-expansion-panel-header. See Figure 13-6.
mat-panel-description: Provides descriptive information about the panel. It is a child component of mat-expansion-panel-header (see Figure 13-6).
mat-action-row: Actions are typically buttons or links that perform operations on the panel or the entity in the panel. The buttons show in an expanded state and hide with the collapsed panel. It is a child component of mat-expansion-panel.
MatExpansionPanelContent: Typically, the whole list of panels under the accordion load upfront. To delay loading the panel only on Click to expand, use the MatExpansionPanelContent directive.
Using Material Design Expansion Panel
TypeScript File Component with Heroes Objects Defined
Each superhero is shown in a single mat-expansion-panel element. It is similar to the list screen in earlier samples except that the expansion panel allows the user to focus on one of the rows for more information (by expanding just one item).
Expand Panel by Default
We used data binding to expand a panel on load. The accordion allows only one of them to open. As another panel is expanded, the open item collapses.
In Listing 13-19, just one item’s isExpanded is expected to be true. It is part of the hero object, which is an item in the heroes array. If more than one objects’ isExpanded is true, the last value takes effect.
All Panels Expanded
Conclusion
The chapter discussed three Angular Material components: cards, tabs, and the accordion with an expansion panel. The Angular Material card showcases an entity, categorized with a title (within the header), content, footer, and actions.
The chapter also covered importing the Angular Material tabs module. We created a separate component using Angular CLI that showed tabs for a create component and a list of superheroes. The expansion panel and accordion were explained. The component shows a list of superheroes that is expandable or collapsible as the user clicks a section.
Exercise
In the dinosaur application, create a new component to show a list of dinosaurs. Use expansion panels for the list. Expand the first item in the list on load.
Create a new tabbed component. Add the newly created dinosaur list as the first tab. Create additional tabs that show the add dinosaur and the dinosaur details components.
References
Angular Material documentation (https://material.angular.io/)
Material Design Specification for Cards (https://material.io/design/components/cards.html)
Spiderman image by Naumovski on Pixabay (https://pixabay.com/illustrations/spiderman-movie-superhero-spider-4378357/)