Angular Material এর MatTree কম্পোনেন্ট ট্রি ভিউ তৈরি করতে ব্যবহৃত হয়, যেখানে ডেটা একটি কাঠামোবদ্ধ হায়ারার্কির (hierarchical) আকারে প্রদর্শিত হয়। এটি সাধারণত ব্যবহারকারীদের তথ্য নেভিগেশনে সাহায্য করতে ব্যবহৃত হয়, যেমন ফাইল সিস্টেম বা ক্যাটেগরি বায়ানির জন্য। Lazy loading এর মাধ্যমে, বড় ডেটা কাঠামোকে শুধু তখনই লোড করা হয় যখন সেই ডেটার প্রয়োজন হয়, যা অ্যাপ্লিকেশন পারফরম্যান্সে বড় ধরনের উন্নতি নিয়ে আসে।
এই টিউটোরিয়ালে, আমরা দেখব কীভাবে Angular Material এর MatTree কম্পোনেন্টের সাথে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করা যায়।
Angular Material এর MatTree কম্পোনেন্ট ট্রি নোড লোড করতে FlatTree বা NestedTree ব্যবহার করতে পারে। লেজি লোডিং ট্রি নোড সাধারণত NestedTree এর মাধ্যমে ব্যবহৃত হয়, যেখানে শিশুর নোডগুলো ক্লিক করার পর লোড হয়।
প্রথমে MatTreeModule এবং MatIconModule ইমপোর্ট করতে হবে।
import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { NgModule } from '@angular/core';
@NgModule({
imports: [
MatTreeModule,
MatIconModule,
MatButtonModule
]
})
export class AppModule {}
লেজি লোডিং ট্রি নোডের জন্য ডেটা উৎস তৈরি করতে হবে। উদাহরণস্বরূপ, একটি TreeControl এবং DataSource তৈরি করা হয় যা ডেটার লেজি লোডিং পরিচালনা করবে।
import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
interface ExampleNode {
name: string;
children?: ExampleNode[];
}
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent {
treeControl: FlatTreeControl<any>;
treeFlattener: MatTreeFlattener<any, any>;
dataSource: MatTreeFlatDataSource<any, any>;
constructor() {
const transformer = (node: ExampleNode, level: number) => ({
expandable: !!node.children && node.children.length > 0,
name: node.name,
level
});
this.treeFlattener = new MatTreeFlattener(transformer, node => node.level, node => node.expandable, node => node.children);
this.treeControl = new FlatTreeControl<any, any>(node => node.level, node => node.expandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
}
// লেজি লোডিং ফাংশন
getChildren(node: ExampleNode): ExampleNode[] {
return node.children ? node.children : [];
}
hasChild = (_: number, node: any) => node.expandable;
}
এখানে:
এখন HTML টেমপ্লেটে ট্রি ভিউটি দেখানোর জন্য কোড লিখতে হবে।
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<button mat-icon-button disabled></button>
{{node.name}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild">
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}
</mat-icon>
</button>
{{node.name}}
</mat-tree-node>
</mat-tree>
এখানে:
এখন আপনি লেজি লোডিং ইমপ্লিমেন্ট করতে getChildren ফাংশন ব্যবহার করতে পারেন, যা পিতামাতার নোডের ক্লিক করার পর শুধুমাত্র সেই নোডের শিশুদের লোড করবে।
// লেজি লোডিং ফাংশন
getChildren(node: ExampleNode): ExampleNode[] {
if (!node.children) {
node.children = this.loadData(node.name); // লোড ডেটা
}
return node.children;
}
// ডেটা লোড করার জন্য একটি সিম্পল ফাংশন
loadData(parentName: string): ExampleNode[] {
// এখানে API কল বা স্ট্যাটিক ডেটা লোড করা যেতে পারে
return [
{ name: `${parentName} Child 1` },
{ name: `${parentName} Child 2` },
];
}
এখানে, getChildren ফাংশনটি শুধুমাত্র তখনই শিশু নোড লোড করবে যখন পিতামাতা নোডটি ক্লিক করা হবে, যা লেজি লোডিং এর ধারণা অনুসরণ করে।
MatTree কম্পোনেন্টের মাধ্যমে Angular Material এ লেজি লোডিং ট্রি নোড তৈরি করা সহজ এবং কার্যকরী। FlatTree এবং NestedTree এর মাধ্যমে আপনি ডেটা কাঠামোকে দক্ষভাবে ম্যানেজ করতে পারেন। লেজি লোডিং দ্বারা শুধুমাত্র প্রয়োজনীয় ডেটা লোড হয়, যা পারফরম্যান্স উন্নত করতে সহায়তা করে। MatTree কম্পোনেন্টে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করে, আপনি বড় ডেটাসেট পরিচালনা করতে পারেন, যাতে ব্যবহারকারীরা দ্রুত এবং সহজভাবে অ্যাপ্লিকেশনের ট্রি ডেটা দেখতে পায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
