Angular Material ব্যবহার করে Modern UI তৈরি করা

Angular Material হলো Angular অ্যাপ্লিকেশনগুলির জন্য একটি জনপ্রিয় এবং শক্তিশালী UI কম্পোনেন্ট লাইব্রেরি। এটি বিভিন্ন ধরনের UI কম্পোনেন্ট, যেমন বাটন, টেবিল, কার্ড, ডায়ালগ, লিস্ট, এবং আরও অনেক কিছু সরবরাহ করে, যা মোডার্ন এবং রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে।

এখানে আমরা Angular Material ইনস্টল করার এবং Modern UI তৈরি করার জন্য একটি সাদারণ গাইডলাইন দেব।

1. Angular Material ইনস্টলেশন

প্রথমেই আপনাকে আপনার Angular প্রজেক্টে Angular Material ইনস্টল করতে হবে।

১.১ Angular Material ইনস্টল করা

Angular Material ইনস্টল করতে, নিচের কমান্ডটি চালান:

ng add @angular/material

এই কমান্ডটি Angular Material এবং প্রয়োজনীয় ডিপেনডেন্সি গুলো আপনার প্রজেক্টে ইনস্টল করবে। ইনস্টলেশন প্রক্রিয়া চলাকালে আপনাকে থিম, আইকন এবং অন্যান্য কনফিগারেশন চাওয়া হতে পারে, যা আপনি আপনার প্রয়োজন অনুযায়ী চয়ন করতে পারেন।

১.২ Angular Material Theme ব্যবহার করা

Angular Material ইনস্টল করার পরে, আপনাকে একটি থিম নির্বাচন করতে হবে। Angular Material তিনটি ডিফল্ট থিম প্রদান করে: Indigo/Pink, Deep Purple/Amber, এবং Pink/Blue Grey। আপনি নিজে একটি কাস্টম থিমও তৈরি করতে পারেন।

আপনি যেটি নির্বাচন করবেন সেটি styles.scss ফাইলে যুক্ত করুন:

@import '@angular/material/prebuilt-themes/indigo-pink.css';

এটি আপনার অ্যাপ্লিকেশনের জন্য একটি আধুনিক থিম সেট করবে।

2. Angular Material Components ব্যবহার করা

এখন আপনি Angular Material এর বিভিন্ন কম্পোনেন্ট ব্যবহার করতে পারবেন। নিচে কিছু জনপ্রিয় কম্পোনেন্ট এবং তাদের ব্যবহার দেখানো হলো:

২.১ Button (বাটন)

<button mat-button>Default Button</button>
<button mat-raised-button color="primary">Primary Button</button>
<button mat-stroked-button color="accent">Stroked Button</button>

এখানে:

• mat-button: সাধারণ বাটন।
• mat-raised-button: একটি raised বা elevated বাটন।
• mat-stroked-button: একটি বর্ডারেড বাটন।

২.২ Card (কার্ড)

Angular Material এর Card কম্পোনেন্ট ব্যবহার করে আপনি একটি সুন্দর তথ্য কার্ড তৈরি করতে পারেন:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>Content goes here...</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Action 1</button>
    <button mat-button>Action 2</button>
  </mat-card-actions>
</mat-card>

এখানে mat-card কম্পোনেন্টে ডেটা এবং অ্যাকশন বাটনগুলো সংযুক্ত করা হয়েছে।

২.৩ Dialog (ডায়ালগ)

Angular Material দিয়ে Dialog তৈরি করার জন্য MatDialog ব্যবহার করা হয়:

import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

@Component({
  selector: 'dialog-content-example-dialog',
  template: '<h1 mat-dialog-title>Dialog</h1><div mat-dialog-content>Dialog content</div>',
})
export class DialogContentExampleDialog {}

এখানে openDialog() ফাংশনটি ডায়ালগ পপ-আপ খুলবে এবং পপ-আপ বন্ধ হওয়ার পরে একটি আউটপুট প্রাপ্ত হবে।

২.৪ Navigation (নেভিগেশন)

Angular Material এর Sidenav এবং Toolbar ব্যবহার করে একটি আধুনিক নেভিগেশন সিস্টেম তৈরি করা যায়:

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item href="#">Home</a>
      <a mat-list-item href="#">About</a>
      <a mat-list-item href="#">Contact</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">My App</mat-toolbar>
    <div class="content">
      <h1>Welcome to the app!</h1>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

এটি একটি সাইড মেনু (Sidenav) তৈরি করবে যা নেভিগেশন লিঙ্কগুলি ধারণ করবে এবং প্রধান কনটেন্টের জন্য একটি Toolbar প্রদর্শন করবে।

২.৫ Table (টেবিল)

Angular Material এর MatTable ব্যবহার করে একটি আধুনিক টেবিল তৈরি করা যায়:

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে একটি টেবিল তৈরি করা হয়েছে যেখানে দুটি কলাম: name এবং age রয়েছে, এবং dataSource থেকে ডাটা ফেচ করা হয়।

3. Other Useful Angular Material Components

Angular Material এর আরও অনেক উপযোগী কম্পোনেন্ট রয়েছে, যেমন:

• MatInput: ইনপুট ফিল্ড।
• MatSelect: ড্রপডাউন সিলেক্ট।
• MatCheckbox: চেকবক্স।
• MatSlider: স্লাইডার।
• MatProgressSpinner: লোডিং স্পিনার।

4. Customizing Angular Material Components

Angular Material এর ডিজাইন খুবই কাস্টমাইজেবল। আপনি আপনার অ্যাপের ব্র্যান্ডিং অনুসারে themes, colors, এবং typography কাস্টমাইজ করতে পারেন।

৪.১ Creating a Custom Theme

@import '~@angular/material/theming';

$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, 500, 300, 800);

$my-theme: mat-light-theme($my-primary, $my-accent);

@include angular-material-theme($my-theme);

এখানে আপনি $my-primary এবং $my-accent প্যালেট কাস্টমাইজ করে থিম তৈরি করছেন এবং তা angular-material-theme ব্যবহার করে অ্যাপ্লিকেশনে প্রয়োগ করছেন।

সারাংশ

Angular Material হল একটি শক্তিশালী UI লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির জন্য আধুনিক এবং রেসপন্সিভ ডিজাইন তৈরি করতে সহায়তা করে। Angular Material এর কম্পোনেন্টগুলি সহজে ব্যবহারযোগ্য এবং কাস্টমাইজ করা যায়। এটি আপনাকে একটি ইউজার ফ্রেন্ডলি এবং নেটিভ মোবাইল অ্যাপের মতো অভিজ্ঞতা প্রদান করে, বিশেষ করে যদি আপনি অফলাইন মোড, ডায়নামিক ডাটা বা পুশ নোটিফিকেশন যোগ করতে চান।

Angular Material এর কিছু গুরুত্বপূর্ণ কম্পোনেন্ট ব্যবহার করে আপনি একটি Modern UI তৈরি করতে পারেন যা আপনার অ্যাপের ইউজার এক্সপেরিয়েন্স উন্নত করবে।