Angular Material হল একটি UI component লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির জন্য ডেভেলপারদের আধুনিক, প্রতিক্রিয়া-ভিত্তিক এবং অদ্বিতীয় ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এটি Google Material Design-এর প্রিন্সিপল অনুসরণ করে, যা একটি সুন্দর, ব্যবহারকারী বান্ধব এবং ইন্টুইটিভ ডিজাইন গাইডলাইন।
Angular Material Angular অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যেমন বোতাম, টেবিল, ডায়ালগ, স্লাইডার, ডেটা পিকার, টুলটিপ, গ্রিড লিস্ট এবং আরো অনেক কিছু। এর মাধ্যমে ডেভেলপাররা সহজে সুনির্দিষ্ট কম্পোনেন্ট ব্যবহার করতে পারে এবং একটি পেশাদারী UI তৈরি করতে পারে যা ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে সঠিকভাবে কাজ করে।
Angular Material কিছু বিশেষ বৈশিষ্ট্য নিয়ে আসে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সুবিধা প্রদান করে:
Angular Material ব্যবহার শুরু করতে কিছু সাধারণ স্টেপ অনুসরণ করতে হবে।
প্রথমে Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে হবে। এই কমান্ডটি রান করুন:
ng add @angular/material
এটি Angular Material এবং এর ডিপেনডেন্সি ইনস্টল করবে এবং আপনার অ্যাপ্লিকেশন কনফিগারেশন ফাইলে প্রয়োজনীয় পরিবর্তন করবে।
Angular Material এর বিভিন্ন কম্পোনেন্ট ব্যবহার করতে হলে, প্রথমে আপনাকে সেগুলি ইমপোর্ট করতে হবে। উদাহরণস্বরূপ, যদি আপনি Material Button ব্যবহার করতে চান, তবে আপনাকে MatButtonModule মডিউলটি ইমপোর্ট করতে হবে।
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [MatButtonModule],
})
export class AppModule {}
Angular Material এর বিভিন্ন কম্পোনেন্টগুলো স্টাইল করার জন্য থিম কনফিগারেশন প্রয়োজন। এটি Angular Material এর নিজস্ব থিমিং সিস্টেম ব্যবহার করে। থিম সেট করার জন্য @angular/material এর থিম ফাইল ইমপোর্ট করতে হবে।
@import '~@angular/material/theming';
@include mat-core();
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
এখানে $primary, $accent, এবং $warn থিমের কালার স্কিম হিসেবে ব্যবহার করা হবে।
একবার Angular Material ইনস্টল ও কনফিগারেশন সম্পন্ন হলে, এখন আপনি বিভিন্ন কম্পোনেন্ট ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ কম্পোনেন্টের উদাহরণ:
<button mat-button>Click me!</button>
<mat-form-field>
<mat-label>Enter your name</mat-label>
<input matInput>
</mat-form-field>
<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>This is the content of the card.</p>
</mat-card-content>
</mat-card>
MatDialog কম্পোনেন্ট ব্যবহার করে আপনি একটি মডাল ডায়ালগ তৈরি করতে পারেন, যা ইউজারের সাথে যোগাযোগের জন্য ব্যবহৃত হয়।
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-dialog-example',
templateUrl: 'dialog-example.html',
})
export class DialogExampleComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
this.dialog.open(DialogOverviewExampleDialog);
}
}
MatTable কম্পোনেন্ট ব্যবহার করে আপনি সহজে একটি রেসপনসিভ টেবিল তৈরি করতে পারেন।
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
MatSnackBar একটি নোটিফিকেশন বার যা স্বল্প সময়ের জন্য স্ক্রীনে প্রদর্শিত হয়।
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-snackbar',
templateUrl: './snackbar.component.html',
})
export class SnackbarComponent {
constructor(private snackBar: MatSnackBar) {}
openSnackBar() {
this.snackBar.open('Message successfully sent!', 'Close', {
duration: 2000,
});
}
}
Angular Material হল Angular অ্যাপ্লিকেশনে Material Design অনুসরণ করে আধুনিক, প্রতিক্রিয়া-ভিত্তিক ইউজার ইন্টারফেস তৈরির একটি শক্তিশালী লাইব্রেরি। এটি ডেভেলপারদের জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যা মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মে কার্যকরী। এর সহজ ইন্টিগ্রেশন, কাস্টমাইজেশন এবং রেসপনসিভ ডিজাইন ফিচার Angular অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।
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
