Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা Material Design প্রিন্সিপল অনুসরণ করে তৈরি, এবং এটি ডেভেলপারদের জন্য আধুনিক, ব্যবহারকারী-বান্ধব ইনপুট ফিল্ডসহ অনেক প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। Material Input Field Angular Material এর অন্যতম একটি গুরুত্বপূর্ণ কম্পোনেন্ট যা সহজে কাস্টমাইজ করা যায় এবং বিভিন্ন ফর্মে ব্যবহার করা যায়।
Material Input ফিল্ড ব্যবহার করতে, আপনাকে Angular Material এর MatInputModule ইমপোর্ট করতে হবে এবং তারপর HTML ফাইলে matInput ডিরেকটিভ ব্যবহার করতে হবে।
প্রথমে Angular Material ইন্সটল করতে হবে:
ng add @angular/material
এটি ইনস্টল করার পরে, আপনার অ্যাপ্লিকেশনের app.module.ts ফাইলে MatInputModule ইমপোর্ট করুন:
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [
MatInputModule,
MatFormFieldModule
]
})
export class AppModule { }
MatFormFieldModule ব্যবহার করা হয় যাতে ইনপুট ফিল্ডগুলোকে Material Design স্টাইল অনুসারে প্রদর্শন করা যায়।
এখন, HTML ফাইলে Material Input ফিল্ড ব্যবহার করতে পারেন। নিচে এর উদাহরণ দেওয়া হলো:
<mat-form-field appearance="fill">
<mat-label>First Name</mat-label>
<input matInput placeholder="Enter your first name" [(ngModel)]="firstName">
</mat-form-field>
এখানে:
mat-form-field: Material Design এর ফর্ম ফিল্ড ব্যবহার করার জন্য।mat-label: ইনপুট ফিল্ডের লেবেল।matInput: ইনপুট ফিল্ডে Material Input ডিরেকটিভ ব্যবহার করা।placeholder: ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট।এছাড়া, appearance="fill" ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়।
Material Input Field সহজেই ভ্যালিডেশন সাপোর্ট করে। আপনি required, minlength, maxlength, এবং pattern এট্রিবিউট ব্যবহার করতে পারেন।
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input matInput placeholder="Enter your email" [(ngModel)]="email" required email>
<mat-error *ngIf="email.invalid && email.touched">
You must enter a valid email.
</mat-error>
</mat-form-field>
এখানে:
required: ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।email: ইনপুট ফিল্ডটি ইমেল ফরম্যাটে হওয়া প্রয়োজন।mat-error: এটি একটি এরর মেসেজ প্রদর্শন করবে যখন ইনপুট ভ্যালিডেশন ব্যর্থ হয়।Angular Material ইনপুট ফিল্ডের জন্য বিভিন্ন স্টাইলিং পছন্দ সরবরাহ করে, যেমন appearance, floatLabel, এবং color।
<mat-form-field appearance="outline">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter username" [(ngModel)]="username">
</mat-form-field>
এখানে, appearance="outline" দ্বারা ইনপুট ফিল্ডের চারপাশে আউটলাইন তৈরি করা হয়েছে।
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input matInput placeholder="Enter your password" type="password" [(ngModel)]="password">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Search</mat-label>
<input matInput placeholder="Search" autocomplete="on">
</mat-form-field>
Angular Material এর Material Input Field ব্যবহার করার মাধ্যমে আপনি একটি আধুনিক, ব্যবহারকারীবান্ধব এবং অ্যাক্সেসিবল ইনপুট ফিল্ড তৈরি করতে পারেন। এটি বিভিন্ন ভ্যালিডেশন, টাইপোগ্রাফি এবং স্টাইলিং সাপোর্ট করে, যা ডেভেলপারদের জন্য কাজটি সহজ করে তোলে। Angular Material এর ইনপুট ফিল্ড গুলো একটি একক, সমন্বিত ডিজাইন সিস্টেমে কাজ করে এবং Material Design গাইডলাইন অনুযায়ী সঠিকভাবে উপস্থাপিত হয়।
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
