Angular Material ইন্সটল করা খুবই সহজ এবং এটি অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য ম্যাটেরিয়াল ডিজাইনের কম্পোনেন্ট যোগ করার প্রক্রিয়া। নিচে Angular Material ইন্সটল করার ধাপগুলো বর্ণনা করা হলো।
Angular Material ইন্সটল করার আগে নিশ্চিত করুন যে:
Angular CLI ইন্সটল করতে নিচের কমান্ড ব্যবহার করুন:
npm install -g @angular/cli
অ্যাপ্লিকেশন তৈরি করতে:
ng new my-angular-app
cd my-angular-app
Angular Material ইন্সটল করতে নিচের কমান্ডটি রান করুন:
ng add @angular/material
BrowserAnimationsModule
ইনস্টল করতে এটি নির্বাচন করুন।Angular Material এর অ্যানিমেশন ফিচার কাজ করার জন্য BrowserAnimationsModule
ইমপোর্ট করতে হবে। এটি app.module.ts
ফাইলে যোগ করুন:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
আপনার অ্যাপ্লিকেশনে ব্যবহৃত কম্পোনেন্টের জন্য সংশ্লিষ্ট Material Module ইমপোর্ট করতে হবে। উদাহরণ:
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [
MatButtonModule,
MatInputModule
]
})
export class AppModule { }
Angular Material থিম ফাইলটি স্বয়ংক্রিয়ভাবে আপনার প্রজেক্টে যোগ হয়ে যাবে। এটি angular.json
ফাইলে styles
সেকশনে দেখা যাবে:
"styles": [
"src/styles.css",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]
Angular Material ইন্সটল এবং সেটআপ করার পরে আপনি এটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি Button এবং Input Field যোগ করতে পারেন:
<button mat-raised-button color="primary">Click Me</button>
<mat-form-field>
<mat-label>Enter your name</mat-label>
<input matInput>
</mat-form-field>
প্রয়োজনে আপনার styles.css
ফাইলে কাস্টম স্টাইল যোগ করতে পারেন।
Angular Material ইন্সটল ও সেটআপ করার পরে আপনি আপনার অ্যাপ্লিকেশনে ম্যাটেরিয়াল ডিজাইন কম্পোনেন্ট ব্যবহার করতে পারবেন। এটি দ্রুত এবং সহজেই একটি আধুনিক ও আকর্ষণীয় UI তৈরি করতে সহায়ক।
Read more