Angular Material is a popular UI component library for Angular applications. It provides a set of ready-to-use components that can be easily integrated into your application. One such component is the Tree component, which allows you to display hierarchical data in a tree-like structure.
In this article, we will explore how to use the Angular Material Tree component to create nested nodes in your application.
Setting up Angular Material
Before we can start using the Angular Material Tree component, we need to set up Angular Material in our project. Follow these steps to install Angular Material:
- Open a terminal or command prompt and navigate to your project directory.
- Run the following command to install Angular Material:
npm install @angular/material
- After the installation is complete, import the required Angular Material modules in your application's module file. You can do this by adding the following code:
import { MatTreeModule } from '@angular/material/tree';
Make sure to also import any other Angular Material modules that you may need, such as MatIconModule for icons or MatButtonModule for buttons.
Creating the Tree Component
Now that we have Angular Material set up, let's create our Tree component. Follow these steps to create the Tree component:
- Create a new component file, e.g., tree.component.html, and add the following code:
<mat-tree [dataSource]="dataSource">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle>
<mat-icon>{{node.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
</button>
{{node.name}}
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<button mat-icon-button matTreeNodeToggle>
<mat-icon>{{node.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
</button>
{{node.name}}
<ng-container matTreeNodeOutlet></ng-container>
</mat-nested-tree-node>
</mat-tree>
- In your component's TypeScript file, e.g., tree.component.ts, add the following code:
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { NestedTreeControl } from '@angular/cdk/tree';
interface TreeNode {
name: string;
children?: TreeNode[];
}
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent {
treeControl = new NestedTreeControl(node => node.children);
dataSource = new MatTreeNestedDataSource();
constructor() {
this.dataSource.data = [
{
name: 'Node 1',
children: [
{
name: 'Node 1.1',
children: [
{ name: 'Node 1.1.1' },
{ name: 'Node 1.1.2' }
]
},
{ name: 'Node 1.2' }
]
},
{ name: 'Node 2' }
];
}
hasChild = (_: number, node: TreeNode) => !!node.children && node.children.length > 0;
}
Let's break down the code:
- The
<mat-tree>element is the root element of our tree. We bind the[dataSource]property to thedataSourcevariable in our component. - The
<mat-tree-node>element represents a single node in the tree. We use the*matTreeNodeDefdirective to define the template for each node. In this case, we display a button to expand or collapse the node and the node's name. - The
<mat-nested-tree-node>element represents a node that can have child nodes. We use the*matTreeNodeDefdirective with thewhen: hasChildcondition to define the template for nodes with children. Inside this template, we display the expand/collapse button, the node's name, and an<ng-container>element to render the child nodes. - In the component's TypeScript file, we define the
treeControlanddataSourcevariables. ThetreeControlis responsible for controlling the expansion and collapse of nodes, while thedataSourceis responsible for providing the data to the tree. - In the constructor, we assign an array of tree nodes to the
dataSource.dataproperty. Each node has a name and an optionalchildrenproperty, which contains an array of child nodes. - The
hasChildmethod is used to determine whether a node has children. It returnstrueif the node has children andfalseotherwise.
Using the Tree Component
Now that we have our Tree component set up, we can use it in our application. Follow these steps to use the Tree component:
- In your application's template file, e.g., app.component.html, add the following code:
<app-tree></app-tree>
- In your application's module file, e.g., app.module.ts, import and declare the Tree component:
import { TreeComponent } from './tree/tree.component';
@NgModule({
declarations: [
AppComponent,
TreeComponent
],
imports: [
BrowserModule,
MatTreeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
That's it! Now, when you run your application, you should see the Tree component with the nested nodes.
The Angular Material Tree component is a powerful tool for displaying hierarchical data in a tree-like structure. By following the steps outlined in this article, you should now be able to create a Tree component with nested nodes in your Angular application.
| Reference | Link |
|---|---|
| Angular Material | https://material.angular.io/ |
| Angular CDK Tree | https://material.angular.io/cdk/tree/overview |