Angular Material List
<Mat-list> is an angular directive used to create a container for carrying and formatting various objects. <Mat-list> is a container component that wraps the line items. It provides material design styling but has no behavior.
Angular Content is a UI component library developed by the Angular to build design components for mobile or desktop applications. Enter the command in the command prompt and download it. The <mat-list> tag is used to display a list of objects or records.
Syntax:
Installation Steps
- Install the Angular Material by using the command mentioned above.
- After installation, import ‘MatListModule‘ from ‘@angular/material/list’ in the module.ts file.
- After importing the ‘MatListModule‘ we need to use <mat-list> tag.
- Inside the <mat-list> tag we need to use <mat-list-item> tag for every item or labels.
- We need to include property for both <mat-list> tag and <mat-list-item>.
- For <mat-list>, we assign the role property with the “list” string, and for <mat-list-item>, we have to assign the role property with the “listitem” string value.
- Once done with the steps, then start the project.
Simple lists
The <mat-list> element contains many <mat-list-item> elements.
Navigation lists
Use mat-nav-list tags for navigation lists (i.e. lists that have anchor tags).
For more complex navigation lists (more than one target per item), wrap the anchor element in <mat-list-item>.
Action lists
When each item in the list performs some action, use the <mat-action-list> element. Each item in the list is the <button> element.
Simple action lists will use the mat-list-item attribute on button tag elements:
Selection lists
It provides an interface to select values, where every list item is an option.
app.component.html
app.component.ts
Output:
Options selected: 0
Select-list options may not have further interactive controls, such as buttons and anchors.
Multi-line List
Lists that require multiple lines per item, annotate each line with a matlin attribute.
Lists with Icons
Use the matListIcon attribute for adding an icon to the list item.
Lists with Avatars
Add an image tag with the matListAvatar attribute for include an avatar image.
Dense Lists
To enable Dense list mode, add a dense attribute mat-list tag.
Lists with Multiple Sections
Sub-header will be added to a list by a heading tag with a matSubheader attribute. Use <mat-divider> to add a divider.
Accessibility
The type of list used in any situation depends on the end-user who interacts with it.
Navigation
When list-items navigate somewhere, <mat-nav-list> should be used as a list item with the elements <mat-list-item>. The neo-list will be rendered using role = “navigation” and can be given an area-label to reference the set of presented navigation options. Additional interactive Content, Like buttons, is not be added inside the anchor.
Example 1:
Below is the content of the modified module descriptor app.module.ts.
Following is the content of the modified HTML host file app.component.html.
Output:
Explanation:
Previously, we have created the list using mat-list. Then, we have added Content using mat-list-item.
Example 2:
app.module.ts
app.component.html
Output:
Example 3:
app.component.html
app.module.ts
Output: