Ionic এবং Angular এর মধ্যে সম্পর্ক

Ionic এবং Angular দুটি আলাদা টেকনোলজি, তবে তারা একে অপরের সাথে গভীরভাবে সম্পর্কিত। Ionic হল একটি ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্ক যা মোবাইল, ওয়েব এবং ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়, আর Angular হল একটি জনপ্রিয় ফ্রেমওয়ার্ক যা ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Ionic সাধারণত Angular এর উপর ভিত্তি করে তৈরি, তবে এটি React এবং Vue.js এর সাথে কাজ করতে পারে।

এখানে Ionic এবং Angular এর মধ্যে সম্পর্ক বিশদভাবে আলোচনা করা হলো:

১. Ionic Framework এবং Angular Integration

Ionic ফ্রেমওয়ার্কটি মূলত Angular এর উপর ভিত্তি করে তৈরি, যার ফলে Angular এর শক্তিশালী ফিচারগুলো Ionic অ্যাপ্লিকেশনের জন্য ব্যবহার করা যেতে পারে। Ionic 2 এবং এর পরবর্তী ভার্সনগুলি Angular ফ্রেমওয়ার্কের উপর নির্মিত। এটি Angular এর এক্সটেনশন হিসেবে কাজ করে, যেখানে Angular এর উপাদানগুলির (components, directives, services, etc.) সাথে Ionic এর মোবাইল-ফার্স্ট UI কম্পোনেন্ট এবং লেআউট ফিচারগুলো একত্রিত করা হয়।

১.১ Routing and Navigation

Angular এর Routing সিস্টেম Ionic এর সাথে ব্যবহৃত হয়। আপনি Ionic অ্যাপ্লিকেশনে Angular এর Router ব্যবহার করে বিভিন্ন পেজে নেভিগেট করতে পারেন। Ionic এর ion-nav এবং ion-router-outlet কম্পোনেন্ট Angular এর রাউটিং সিস্টেমকে ইন্টিগ্রেট করে।

Angular Router উদাহরণ:

const routes: Routes = [
  { path: '', component: HomePage },
  { path: 'details', component: DetailsPage }
];

<ion-router-outlet></ion-router-outlet>

১.২ Data Binding

Angular এর two-way data binding ফিচার Ionic অ্যাপ্লিকেশনে ব্যবহার করা যায়। এটি আপনাকে UI এবং ডাটা মডেলের মধ্যে সিঙ্ক রাখতে সাহায্য করে। Angular এর ngModel এবং অন্যান্য ডাটা বাইন্ডিং মেকানিজম Ionic এ এক্সটেনশন আকারে ব্যবহার করা যেতে পারে।

<ion-input [(ngModel)]="userName"></ion-input>

১.৩ Services and Dependency Injection

Angular এর Dependency Injection ব্যবস্থার মাধ্যমে আপনি Ionic অ্যাপ্লিকেশনেও বিভিন্ন সার্ভিসগুলো ইঞ্জেক্ট করতে পারেন। এটি অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে ডাটা শেয়ার করতে সাহায্য করে। উদাহরণস্বরূপ, একটি সার্ভিস তৈরি করে বিভিন্ন পেজে ডাটা পরিচালনা করা যেতে পারে।

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private user: any;
  
  constructor() {}

  setUser(userData: any) {
    this.user = userData;
  }

  getUser() {
    return this.user;
  }
}

২. Ionic এর Angular কম্পোনেন্ট এবং UI

Ionic ফ্রেমওয়ার্ক Angular এর সাথে সম্পূর্ণভাবে একত্রিত হয়ে মোবাইল-ফার্স্ট UI উপাদানগুলো প্রদান করে। Ionic এর UI components Angular এর directives এবং bindings এর সাথে কাজ করে, যা একটি সুন্দর, ইন্টারঅ্যাকটিভ এবং প্রতিক্রিয়া ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

২.১ Ionic UI কম্পোনেন্ট

Ionic এর UI কম্পোনেন্ট যেমন ion-header, ion-footer, ion-button, ion-card, ion-list ইত্যাদি, Angular এর সাথে খুব সহজে ইন্টিগ্রেট করা যায়। এগুলো Angular এর ngFor, ngIf, [(ngModel)] এর মতো ডিরেকটিভের সাথে কাজ করতে পারে।

<ion-card *ngFor="let item of items">
  <ion-card-header>
    <ion-card-title>{{ item.title }}</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    {{ item.description }}
  </ion-card-content>
</ion-card>

২.২ Ionic Modules and Angular Modules

Ionic ফ্রেমওয়ার্ক Angular এর NgModules এর সাথে কাজ করে। এটি Angular এর imports এ Ionic মডিউলগুলো যোগ করার মাধ্যমে কাজ করে। উদাহরণস্বরূপ, IonicModule এবং অন্যান্য Ionic কম্পোনেন্টের মডিউলগুলি অ্যাপ্লিকেশনের মডিউলে যোগ করতে হয়।

import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule
  ]
})
export class MyPageModule {}

৩. Ionic CLI এবং Angular CLI এর সম্পর্ক

Ionic অ্যাপ্লিকেশন তৈরি করতে Ionic CLI ব্যবহার করা হয়, যা Angular CLI এর সাথে পুরোপুরি সংহত। Ionic CLI আপনার অ্যাপের Angular অ্যাপ্লিকেশনের সাথে কাজ করে, এবং Ionic এর প্রজেক্টে Angular কম্পোনেন্ট এবং সার্ভিস ব্যবহার করার সুবিধা দেয়। আপনি ng এবং ionic কমান্ড উভয়ই ব্যবহার করতে পারেন।

Ionic CLI এবং Angular CLI এর কিছু সাধারণ কমান্ড:

• Ionic প্রজেক্ট তৈরি করা:

  ionic start myApp tabs
  

• Angular সার্ভিস তৈরি করা:

  ng generate service user
  

• Ionic অ্যাপ রান করা:

  ionic serve
  

• Angular অ্যাপ রান করা:

  ng serve
  

৪. Ionic, Angular এবং Capacitor

Angular এবং Ionic একত্রিত হয়ে Capacitor ফ্রেমওয়ার্ক ব্যবহার করে মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারে। Capacitor হল Ionic ফ্রেমওয়ার্কের একটি অংশ, যা মোবাইল ডিভাইসের native ফিচারের অ্যাক্সেস দেয় এবং অ্যাপগুলোকে প্ল্যাটফর্মে ডেপ্লয় করতে সাহায্য করে।

Capacitor উদাহরণ:

ionic build
ionic cap add android
ionic cap open android

সারাংশ

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

Angular একটি জনপ্রিয় JavaScript framework যা web applications তৈরি করার জন্য ব্যবহৃত হয়। এটি TypeScript ব্যবহার করে এবং MVC (Model-View-Controller) অথবা MVVM (Model-View-ViewModel) আর্কিটেকচারে কাজ করে। Angular অ্যাপ্লিকেশন গঠন করতে তিনটি প্রধান কনসেপ্ট রয়েছে: Modules, Components, এবং Services।

১. Modules

Angular অ্যাপ্লিকেশন একটি Module দিয়ে শুরু হয় এবং সবকিছু একটি নির্দিষ্ট মডিউলেই থাকে। মডিউল হলো অ্যাপ্লিকেশনের একক ইউনিট, যেখানে অ্যাপ্লিকেশনের সব কনফিগারেশন, কম্পোনেন্ট, সার্ভিস, পাইপ ইত্যাদি ম্যানেজ করা হয়।

Module এর কনসেপ্ট

• @NgModule: এটি একটি ডেকোরেটর, যা Angular মডিউলকে সনাক্ত করে এবং মডিউলের কনফিগারেশন প্রদান করে। একটি মডিউল অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেকটিভ এবং পাইপগুলিকে একটি সংগঠিত ভাবে গ্রুপ করে।
• imports: অন্য মডিউলগুলোকে আমদানি করা হয়।
• declarations: অ্যাপ্লিকেশনের কম্পোনেন্ট, ডিরেকটিভ এবং পাইপ এই স্থানে ডেক্লেয়ার করা হয়।
• providers: সার্ভিস এবং অন্যান্য প্রোভাইডার এখানে দেয়া হয়।
• bootstrap: অ্যাপ্লিকেশনের মূল কম্পোনেন্ট (অথবা রুট কম্পোনেন্ট) এখানে নির্ধারণ করা হয়।

Module Example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent], // কম্পোনেন্টগুলো ডেক্লেয়ার করা
  imports: [BrowserModule], // আমদানি করা মডিউল
  providers: [], // সার্ভিস বা অন্যান্য প্রোভাইডার
  bootstrap: [AppComponent] // রুট কম্পোনেন্ট
})
export class AppModule { }

এখানে, AppModule হলো অ্যাপ্লিকেশনের মূল মডিউল।

২. Components

Angular অ্যাপ্লিকেশনের সকল UI কম্পোনেন্ট দ্বারা গঠিত হয়। একটি Component হলো একটি ক্লাস যা HTML টেমপ্লেট এবং CSS এর মাধ্যমে ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে।

Component এর কনসেপ্ট

• @Component: এটি একটি ডেকোরেটর যা Angular কম্পোনেন্টকে সনাক্ত করে এবং তার সাথে টেমপ্লেট, স্টাইল এবং কনফিগারেশন সংযুক্ত করে।
• selector: এটি কম্পোনেন্টের নাম, যা HTML টেমপ্লেটে ব্যবহার করা হয়।
• templateUrl: এটি HTML টেমপ্লেটের রেফারেন্স দেয়।
• styleUrls: এটি CSS ফাইলের রেফারেন্স দেয়।

Component Example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular App';
}

এখানে, AppComponent একটি কম্পোনেন্ট যা app.component.html টেমপ্লেট এবং app.component.css স্টাইল ব্যবহার করে।

৩. Services

Angular এ Services হলো এমন ক্লাস যা নির্দিষ্ট ফাংশনালিটি বা ব্যবসায়িক লজিক প্রদান করে, যেমন ডেটাবেসে ডেটা সংরক্ষণ বা API থেকে ডেটা আনা। সার্ভিসগুলো সাধারণত dependency injection (DI) এর মাধ্যমে কম্পোনেন্টে ইনজেক্ট করা হয়।

Service এর কনসেপ্ট

• @Injectable: সার্ভিস ক্লাসে এই ডেকোরেটর ব্যবহার করা হয়, যা সার্ভিসকে ইনজেক্ট করতে সক্ষম করে।
• providers: মডিউল বা কম্পোনেন্টের মাধ্যমে সার্ভিস প্রোভাইড করা হয়।

Service Example:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root', // সার্ভিসকে রুট লেভেলে প্রোভাইড করা
})
export class DataService {
  getData() {
    return ['Item 1', 'Item 2', 'Item 3'];
  }
}

এখানে, DataService একটি সার্ভিস ক্লাস যা ডেটা প্রদান করে। providedIn: 'root' দিয়ে সার্ভিসটি অ্যাপ্লিকেশনের রুট লেভেলে ইনজেক্ট করা হয়।

Service ব্যবহার:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ data }}</h1>`
})
export class AppComponent {
  data: string[];

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}

এখানে, DataService কম্পোনেন্টে dependency injection এর মাধ্যমে ইনজেক্ট করা হয়েছে এবং কম্পোনেন্টে getData() ফাংশন ব্যবহার করে ডেটা পাওয়া যাচ্ছে।

সারাংশ

• Modules: Angular অ্যাপ্লিকেশনের কনফিগারেশন, কম্পোনেন্ট এবং অন্যান্য গুরুত্বপূর্ণ অংশগুলির সংকলন। এটি অ্যাপ্লিকেশনকে সংগঠিত রাখে।
• Components: Angular অ্যাপ্লিকেশনের UI অংশ। এটি HTML টেমপ্লেট, CSS স্টাইল এবং TypeScript ক্লাস দ্বারা গঠিত।
• Services: অ্যাপ্লিকেশনের মধ্যে ডেটা এবং লজিক শেয়ার করার জন্য ব্যবহৃত ক্লাস। সার্ভিসগুলো সাধারণত ডেটাবেস বা API কলের মতো কাজ পরিচালনা করে।

Angular অ্যাপ্লিকেশনের জন্য Modules, Components, এবং Services এই তিনটি প্রধান উপাদান একে অপরের সাথে কাজ করে এবং অ্যাপ্লিকেশনকে কার্যকরভাবে গঠন করে।

Ionic ফ্রেমওয়ার্কটি মূলত Angular এর সাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে। Ionic এবং Angular একসাথে ব্যবহার করলে, আপনি রেসপনসিভ এবং ইন্টারঅ্যাকটিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারেন। Angular এর সাথে Ionic ইন্টিগ্রেশন সাধারণত Angular অ্যাপ্লিকেশন স্ট্রাকচারের ওপর ভিত্তি করে কাজ করে এবং এটি Angular এর সমস্ত সুবিধা যেমন Routing, Data Binding, Directives, Services ইত্যাদি Ionic অ্যাপে ব্যবহার করতে দেয়।

এখানে Ionic এর সাথে Angular ইন্টিগ্রেট করার জন্য ধাপে ধাপে নির্দেশনা দেওয়া হলো।

১. Ionic এবং Angular সেটআপ

Ionic এবং Angular একসাথে ব্যবহার করতে হলে প্রথমে Ionic CLI (Command Line Interface) ইনস্টল করতে হবে।

১.১ Ionic CLI ইনস্টল করা

Ionic CLI ইনস্টল করতে টার্মিনাল বা কমান্ড প্রম্পটে এই কমান্ডটি ব্যবহার করুন:

npm install -g @ionic/cli

১.২ নতুন Ionic অ্যাপ তৈরি করা

Ionic CLI দিয়ে একটি নতুন Ionic অ্যাপ তৈরি করুন। Ionic Angular প্রকল্পের জন্য angular টেমপ্লেট নির্বাচন করুন।

ionic start myApp blank --type=angular

এখানে:

• myApp: আপনার অ্যাপের নাম।
• blank: এটি একটি সিম্পল টেমপ্লেট। আপনি চাইলে tabs, sidemenu অথবা অন্যান্য টেমপ্লেটও ব্যবহার করতে পারেন।
• --type=angular: Angular ফ্রেমওয়ার্ক ব্যবহার করার জন্য এটি নিশ্চিত করবে।

১.৩ প্রজেক্ট ফোল্ডারে যান

cd myApp

২. Ionic এবং Angular এর সাথে Routing কনফিগারেশন

Ionic অ্যাপ্লিকেশনটি সাধারণত Angular Routing ব্যবহার করে এক পেজ থেকে অন্য পেজে নেভিগেট করতে। Ionic এ ion-router-outlet কম্পোনেন্টটি Angular এর RouterOutlet এর মতো কাজ করে।

২.১ App Routing Module কনফিগারেশন

Ionic প্রজেক্টে app-routing.module.ts ফাইলে রাউটিং কনফিগারেশন থাকে। এখানে আপনি রাউটগুলি ডিফাইন করতে পারেন।

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

২.২ IonRouterOutlet এর ব্যবহার

এটি মূল রাউটিং পয়েন্ট, যেখানে অ্যাপের পেজ রেন্ডার হয়।

<ion-router-outlet></ion-router-outlet>

এই কম্পোনেন্টটি app.component.html ফাইলে থাকে এবং রাউটিং ব্যবহার করতে আপনাকে এই কম্পোনেন্টের সাহায্য নিতে হবে।

৩. Angular Services এবং Dependency Injection

Angular এর services এবং dependency injection Ionic অ্যাপ্লিকেশনেও কাজ করে। আপনি Ionic অ্যাপে সার্ভিস ব্যবহার করে ডেটা ম্যানেজমেন্ট, HTTP কলস এবং অন্যান্য ফাংশনালিটি যুক্ত করতে পারেন।

৩.১ Service তৈরি করা

এখানে একটি উদাহরণ হিসেবে একটি সার্ভিস তৈরি করা হলো যা HTTP কল করার জন্য ব্যবহৃত হবে।

ionic generate service api

এরপর api.service.ts ফাইলে HTTP কল করার কোড লিখুন:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

৩.২ Service ব্যবহার করা

সার্ভিসটি অ্যাপের অন্যান্য অংশে ব্যবহার করতে, প্রথমে এটি ইনজেক্ট করতে হবে:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  data: any;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

৪. Ionic Components এবং Angular Directives

Ionic ফ্রেমওয়ার্কে অনেক প্রি-বিল্ট UI কম্পোনেন্ট থাকে যেমন ion-header, ion-footer, ion-content, ion-card ইত্যাদি, যা আপনি Angular Directives এর সাথে ব্যবহার করতে পারেন।

৪.১ Ionic Components ব্যবহার

<ion-header>
  <ion-toolbar>
    <ion-title>Home Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      This is an example card.
    </ion-card-content>
  </ion-card>
</ion-content>

এখানে ion-header, ion-toolbar, এবং ion-card কম্পোনেন্ট ব্যবহৃত হয়েছে, যা UI উপাদান হিসেবে দেখাবে।

৫. Ionic CLI এবং Angular CLI এর ইন্টিগ্রেশন

Ionic CLI এবং Angular CLI একসাথে কাজ করে। আপনি Ionic প্রজেক্টের মধ্যে Angular CLI কমান্ড ব্যবহার করতে পারবেন।

৫.১ App চালানো

Angular এর সাথে ইন্টিগ্রেটেড Ionic অ্যাপ চালানোর জন্য এই কমান্ড ব্যবহার করুন:

ionic serve

এটি আপনার Ionic অ্যাপ্লিকেশনকে লোকাল সার্ভারে চালাবে এবং আপনি ব্রাউজারে দেখতে পারবেন।

সারাংশ

Ionic এবং Angular একসাথে কাজ করলে, আপনি একটি শক্তিশালী এবং রেসপনসিভ মোবাইল অ্যাপ্লিকেশন তৈরি করতে পারবেন। Angular এর সাথে Ionic Integration এর মাধ্যমে আপনি সহজে রাউটিং, সার্ভিস, ডেটা ম্যানেজমেন্ট এবং UI কম্পোনেন্ট ব্যবহার করতে পারবেন। Ionic এবং Angular এর কম্বিনেশন আপনাকে একসাথে মোবাইল অ্যাপ ডেভেলপমেন্টের সমস্ত সুবিধা প্রদান করে।

Angular হলো একটি শক্তিশালী ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য অনেক শক্তিশালী ফিচার প্রদান করে। এর মধ্যে Directives এবং Pipes দুটি অত্যন্ত গুরুত্বপূর্ণ ফিচার, যা UI কন্ট্রোল, ডেটা প্রদর্শন এবং লজিকাল পরিবর্তন করার জন্য ব্যবহৃত হয়।

১. Angular Directives

Angular এর Directives ব্যবহার করে HTML ট্যাগগুলোর behavior পরিবর্তন করা যায়। ডিরেকটিভগুলি কাস্টম লজিক অ্যাড করতে এবং DOM-এ পরিবর্তন করতে ব্যবহৃত হয়। Angular-এ তিন প্রকারের ডিরেকটিভ রয়েছে:

১.১ ১. Structural Directives

এগুলি HTML এর DOM-এ উপাদানগুলির structure পরিবর্তন করতে ব্যবহৃত হয় (যেমন: *ngIf, *ngFor ইত্যাদি)।

উদাহরণ:

• ngIf: কোন উপাদানকে শো বা হাইড করতে ব্যবহৃত হয়।

<div *ngIf="isVisible">This will be displayed if 'isVisible' is true.</div>

এখানে, *ngIf="isVisible" যখন isVisible এর মান true হয় তখন উপাদানটি প্রদর্শিত হবে, আর যখন false হবে তখন এটি লুকানো থাকবে।

• ngFor: লুপের মাধ্যমে এলিমেন্টগুলো প্রদর্শন করতে ব্যবহৃত হয়।

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

এখানে, *ngFor="let item of items" একটি লিস্টের মাধ্যমে আইটেমগুলো রেন্ডার করবে।

১.২ ২. Attribute Directives

এগুলি কোনো HTML উপাদানের আচরণ পরিবর্তন করতে ব্যবহৃত হয়, কিন্তু DOM স্ট্রাকচার পরিবর্তন করে না। কিছু পরিচিত অ্যাট্রিবিউট ডিরেকটিভ হলো ngClass, ngStyle ইত্যাদি।

উদাহরণ:

• ngClass: ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়।

<div [ngClass]="{'highlight': isHighlighted}">This div will have the 'highlight' class if 'isHighlighted' is true.</div>

এখানে, isHighlighted যদি true হয়, তাহলে highlight ক্লাস অ্যাপ্লাই হবে।

• ngStyle: স্টাইল প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়।

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">This text's style will change based on 'textColor' and 'fontSize' values.</div>

এখানে, textColor এবং fontSize ডাইনামিকভাবে স্টাইল প্রপার্টি পরিবর্তন করবে।

১.৩ ৩. Custom Directives

এটি কাস্টম ডিরেকটিভ তৈরি করার পদ্ধতি, যা আপনি নিজে লিখে DOM-এ বিশেষ ধরনের behavior অ্যাড করতে পারেন।

Custom Directive Example:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

এখানে, appHighlight নামে একটি কাস্টম ডিরেকটিভ তৈরি করা হয়েছে যা কোনো উপাদানে ব্যাকগ্রাউন্ড রঙ yellow অ্যাড করবে।

২. Angular Pipes

Pipes হলো এমন একটি ফিচার যা ডেটা রূপান্তরের জন্য ব্যবহৃত হয়। এটি ডেটাকে ভ্যালুতে রূপান্তর করে এবং ডিসপ্লে করা হয়। Angular-এ ডিফল্ট অনেক পাইপস রয়েছে, যেমন DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe ইত্যাদি। এছাড়া, আপনি কাস্টম পাইপও তৈরি করতে পারেন।

২.১ ডিফল্ট Pipes ব্যবহার

• DatePipe: ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়।

<p>{{ currentDate | date:'short' }}</p>

এখানে, currentDate হলো বর্তমান তারিখ এবং সময়, যা short ফর্ম্যাটে প্রদর্শিত হবে।

• UpperCasePipe: টেক্সটকে বড় হাতের অক্ষরে রূপান্তরিত করে।

<p>{{ text | uppercase }}</p>

• CurrencyPipe: মুদ্রার আকারে ডেটা প্রদর্শন করে।

<p>{{ amount | currency:'USD' }}</p>

২.২ Custom Pipes

কাস্টম পাইপ তৈরি করতে হলে আপনাকে একটি Pipe ক্লাস তৈরি করতে হবে, এবং @Pipe ডেকোরেটরের সাহায্যে এটিকে ব্যবহারযোগ্য করতে হবে।

Custom Pipe Example:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

এখানে, reverseString নামে একটি কাস্টম পাইপ তৈরি করা হয়েছে, যা একটি স্ট্রিং রিভার্স করবে।

HTML তে ব্যবহার:

<p>{{ 'hello' | reverseString }}</p>

এটি আউটপুট হিসেবে olleh দেখাবে।

সারাংশ

• Directives: Angular এর ডিরেকটিভগুলি DOM এর behavior পরিবর্তন করতে ব্যবহৃত হয়। এগুলির মধ্যে Structural Directives (যেমন *ngIf, *ngFor) এবং Attribute Directives (যেমন ngClass, ngStyle) প্রধান।
• Pipes: Angular-এ পাইপস ডেটা রূপান্তরের জন্য ব্যবহৃত হয়। Angular ডিফল্ট অনেক পাইপ যেমন DatePipe, CurrencyPipe, UpperCasePipe প্রদান করে। আপনি কাস্টম পাইপ তৈরি করে ডেটা কাস্টম রূপান্তরও করতে পারেন।

এগুলো Angular এর সবচেয়ে মৌলিক ফিচার, যা ডেভেলপারদেরকে ইউজার ইন্টারফেস এবং ডেটা ম্যানিপুলেশন খুব সহজভাবে পরিচালনা করতে সাহায্য করে।

Angular এ ফর্ম এবং ইনপুট হ্যান্ডলিং অত্যন্ত গুরুত্বপূর্ণ এবং শক্তিশালী ফিচার। এটি ব্যবহারকারীর ইনপুট সংগ্রহ, যাচাই (validation), এবং ডেটা ম্যানিপুলেশন করার জন্য ব্যবহৃত হয়। Angular ফর্ম দুটি প্রধান ধরনের হতে পারে: Template-driven Forms এবং Reactive Forms। এই দুই ধরনের ফর্মই Angular অ্যাপ্লিকেশনগুলোতে ইনপুট হ্যান্ডলিংকে সহজ এবং কার্যকর করে তোলে।

১. Template-driven Forms

Template-driven forms একটি সহজ এবং declarative ফর্ম সমাধান, যেখানে ফর্ম এবং ইনপুট উপাদানগুলি HTML টেমপ্লেটে সংজ্ঞায়িত হয়। এই ফর্মগুলিতে Angular এর NgModel ডিরেকটিভ ব্যবহার করা হয় ইনপুট ফিল্ডের জন্য।

১.১ Template-driven Form Example

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" name="name" ngModel required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" name="email" ngModel required></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>

• #form="ngForm": ফর্ম রেফারেন্স তৈরির জন্য।
• ngModel: ফর্ম ইনপুটের জন্য দুটি-way ডাটা বাইন্ডিং পরিচালনা করে।
• required: ইনপুটের জন্য ওয়ালিডেশন, যা ইনপুট ফিল্ডটি পূর্ণ হওয়া প্রয়োজন।
• (ngSubmit)="onSubmit(form)": ফর্ম সাবমিট হওয়ার পর onSubmit() মেথড কল হবে।

১.২ কম্পোনেন্ট কোড

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.page.html',
  styleUrls: ['./form.page.scss'],
})
export class FormPage {
  onSubmit(form: any) {
    console.log(form.value); // Form data
  }
}

২. Reactive Forms

Reactive Forms হল একটি আরো শক্তিশালী এবং স্কেলেবল ফর্ম সমাধান, যেখানে ফর্ম মডেলটি কম্পোনেন্ট কোডে সংজ্ঞায়িত হয় এবং টেমপ্লেটটি কেবল ভিউ হিসেবে কাজ করে।

২.১ Reactive Form Example

প্রথমে ReactiveFormsModule ইম্পোর্ট করতে হয়:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.page.html',
  styleUrls: ['./reactive-form.page.scss'],
})
export class ReactiveFormPage {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  onSubmit() {
    console.log(this.form.value); // Form data
  }
}

২.২ টেমপ্লেট (HTML)

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" formControlName="name"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" formControlName="email"></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>

• [formGroup]="form": এই ডিরেকটিভটি ফর্মকে কম্পোনেন্টের FormGroup এর সাথে যুক্ত করে।
• formControlName="name": ফর্ম কন্ট্রোলের জন্য নাম এবং মান।

৩. Form Validation

Angular এ ফর্ম যাচাই খুবই সহজ। আপনি প্রকারভেদে ইনপুট ফিল্ডে বিভিন্ন ধরণের যাচাই সেট করতে পারেন।

৩.১ Template-driven Form Validation

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" name="name" ngModel required></ion-input>
  </ion-item>
  <ion-item *ngIf="form.submitted && !form.controls.name?.valid">
    <ion-text color="danger">Name is required</ion-text>
  </ion-item>

  <ion-button expand="full" type="submit">Submit</ion-button>
</form>

• *ngIf="form.submitted && !form.controls.name?.valid": ফর্ম সাবমিট হলে এবং ইনপুট না পূর্ণ হলে একটি বার্তা দেখাবে।

৩.২ Reactive Form Validation

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" formControlName="name"></ion-input>
  </ion-item>
  <ion-item *ngIf="form.controls.name.invalid && form.controls.name.touched">
    <ion-text color="danger">Name is required</ion-text>
  </ion-item>

  <ion-button expand="full" type="submit" [disabled]="!form.valid">Submit</ion-button>
</form>

• form.controls.name.invalid && form.controls.name.touched: ফর্ম কন্ট্রোল যদি অকার্যকর হয় এবং ব্যবহারকারী সেটি টাচ করেছে, তখন একটি ত্রুটি বার্তা দেখানো হয়।

৪. Input Handling in Forms

Angular ফর্মের ইনপুট হ্যান্ডলিং খুব সহজ। আপনি ফর্মের ইনপুটের মান বা পরিবর্তন সহজেই ট্র্যাক করতে পারেন।

৪.১ Template-driven Forms - NgModel

<ion-item>
  <ion-label position="floating">Name</ion-label>
  <ion-input type="text" name="name" [(ngModel)]="name" required></ion-input>
</ion-item>

<p>Your name is: {{ name }}</p>

• [(ngModel)]="name": এইভাবে ইনপুট মান two-way binding এর মাধ্যমে সংযুক্ত হয়। ইনপুটে পরিবর্তন করলে তা name ভ্যারিয়েবলে সেভ হয়ে যায়।

৪.২ Reactive Forms - FormControl

<ion-item>
  <ion-label position="floating">Name</ion-label>
  <ion-input type="text" formControlName="name"></ion-input>
</ion-item>

<p>Your name is: {{ form.controls.name.value }}</p>

• form.controls.name.value: এইভাবে আপনি formControlName দিয়ে ইনপুটের মান ট্র্যাক করতে পারেন।

Angular Forms এবং Input Handling এর মাধ্যমে আপনি খুব সহজেই ফর্ম তৈরী, ইনপুট সংগ্রহ এবং যাচাই করতে পারেন। Template-driven ফর্ম সাধারণত সহজ এবং ছোট ফর্মের জন্য ব্যবহার করা হয়, তবে Reactive ফর্মে ডাটা ম্যানেজমেন্ট আরও শক্তিশালী এবং স্কেলেবল। Angular এ ফর্মের মাধ্যমে ডাটা সংগ্রহ ও যাচাই করার সুবিধা থাকায় আপনি ফর্মের সাথে কাজ করতে অনেক সহজ হবে।