Angular Material এর Material Menu কম্পোনেন্ট একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যা ইউজার ইন্টারফেসে বিভিন্ন অপশন বা কমান্ড প্রদর্শন করে। এটি mat-menu ট্যাগ ব্যবহার করে তৈরি করা হয় এবং সাধারণত বিভিন্ন অ্যাকশন বা অপশন নির্বাচন করার জন্য ব্যবহার করা হয়।

Angular Material মেনু সাধারণত MatMenuModule দ্বারা নিয়ন্ত্রিত হয় এবং এটি ব্যবহারকারীকে একাধিক অপশন প্রদর্শন করতে সহায়তা করে। মেনু কম্পোনেন্টটি বেশিরভাগ সময় button, icon button, বা menu trigger দ্বারা ট্রিগার করা হয়।

Material Menu এর বৈশিষ্ট্য

• MatMenuModule ব্যবহার করে মেনু তৈরি করা হয়।
• মেনু আইটেমগুলিকে mat-menu-item এর মাধ্যমে প্রতিটি অপশন বা আইটেম তৈরি করা হয়।
• মেনু কাস্টমাইজ করা যায় এবং বিভিন্ন রকমের অ্যাকশন বা অপশন দেখানোর জন্য ব্যবহৃত হয়।
• এটি সাধারণত একটি button বা icon এর মাধ্যমে ট্রিগার করা হয়।
• মেনু ত্রিগার করার জন্য ব্যবহার করা যেতে পারে mat-button, mat-icon-button, ইত্যাদি।

Material Menu ব্যবহার করার ধাপসমূহ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatMenuModule এবং MatButtonModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে।

import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatMenuModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. Material Menu তৈরি করা

mat-menu কম্পোনেন্টটি একটি mat-button বা mat-icon-button এর সাথে যুক্ত থাকে, যা মেনু ট্রিগার করতে ব্যবহৃত হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

এখানে:

• [matMenuTriggerFor]="menu": এটি বাটন বা অন্য কোনো এলিমেন্টকে মেনু টিগার করতে ব্যবহার করা হয়।
• <mat-menu>: এটি মেনু কনটেইনার, যেখানে আপনার অপশনগুলো থাকবে।
• <mat-menu-item>: এটি মেনু আইটেম বা অপশন, যা ব্যবহারকারী নির্বাচন করতে পারে।

৩. আইকন এবং সাব-মেনু (Sub-menu) ব্যবহার করা

Angular Material মেনুতে আপনি আইকন এবং সাব-মেনু তৈরি করতে পারেন। একটি সাব-মেনু তৈরি করতে, মেনু আইটেমের মধ্যে একটি আরেকটি মেনু ব্যবহার করা হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <mat-menu #subMenu="matMenu">
    <button mat-menu-item>Sub Option 1</button>
    <button mat-menu-item>Sub Option 2</button>
  </mat-menu>
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Sub Menu</button>
</mat-menu>

এখানে:

• Sub-menu তৈরি করার জন্য একটি mat-menu কম্পোনেন্ট আবার ব্যবহার করা হয়েছে এবং এটি matMenuTriggerFor এর মাধ্যমে ট্রিগার করা হয়েছে।

৪. মেনু আইটেমের ইভেন্ট হ্যান্ডলিং

mat-menu-item এর মাধ্যমে ব্যবহারকারীর ক্লিক ইভেন্ট হ্যান্ডল করতে পারেন। এটি সাধারণত click ইভেন্টের মাধ্যমে পরিচালিত হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onOptionClick('Option 1')">Option 1</button>
  <button mat-menu-item (click)="onOptionClick('Option 2')">Option 2</button>
  <button mat-menu-item (click)="onOptionClick('Option 3')">Option 3</button>
</mat-menu>

export class AppComponent {
  onOptionClick(option: string) {
    console.log(option + ' clicked!');
  }
}

এখানে:

• (click)="onOptionClick('Option 1')"`: এই ইভেন্ট হ্যান্ডলারটি যখন ব্যবহারকারী একটি মেনু অপশন ক্লিক করবেন তখন কল হবে এবং অপশনটি কনসোলে প্রিন্ট হবে।

৫. Material Menu Styling

Angular Material Menu কম্পোনেন্টটির স্টাইলিং কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, আপনি মেনুর ব্যাকগ্রাউন্ড রঙ বা বর্ডার পরিবর্তন করতে পারেন:

উদাহরণ:

::ng-deep .mat-menu-panel {
  background-color: #f0f0f0;
  border-radius: 8px;
}

এখানে:

• ::ng-deep: এটি স্টাইল প্রোপার্টি কোডের মধ্যে encapsulation সরিয়ে দেয়, যা উপাদানটি বাইরে থেকে স্টাইল করার সুযোগ দেয়।

Angular Material Menu একটি শক্তিশালী এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট যা আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সহজ নেভিগেশন প্রদান করে। mat-menu, mat-menu-item, এবং matMenuTriggerFor এর মাধ্যমে আপনি সহজেই বিভিন্ন অপশন এবং সাব-মেনু তৈরি করতে পারবেন। Angular Material এর মেনু কম্পোনেন্টটি স্টাইলিং এবং ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আরও ইন্টারঅ্যাকটিভ করা যায়, যা অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসে আধুনিক এবং পেশাদার লুক যোগ করে।