Angular-এ Observables এবং RxJS (Reactive Extensions for JavaScript) ব্যবহৃত হয় অ্যাসিঙ্ক্রোনাস ডেটা হ্যান্ডলিং এবং ইভেন্ট ড্রিভেন প্রোগ্রামিংয়ের জন্য। Angular অ্যাপ্লিকেশনে বিভিন্ন ধরনের অ্যাসিঙ্ক্রোনাস কাজ যেমন HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, ইভেন্ট এবং টাইমার ম্যানেজমেন্টে Observables ব্যবহার করা হয়।

Observables কী?

Observables হলো একটি অপ্রচলিত প্যাটার্ন যা ডেটার স্ট্রিম ম্যানেজ করতে সাহায্য করে। এটি Publisher-Subscriber প্যাটার্ন অনুসরণ করে, যেখানে এক বা একাধিক Observer ডেটা সংগ্রহ করতে পারে একটি Observable থেকে। এটি অ্যাসিঙ্ক্রোনাস ডেটা স্ট্রিমের উপরে কাজ করে এবং অনেক ইভেন্টের মধ্যে ডেটা হ্যান্ডলিং করতে সহায়তা করে।

Observables এর মৌলিক বৈশিষ্ট্য:

• Push-based: ডেটা পাঠানো হয় সাবস্ক্রাইবারদের কাছে যখন এটি প্রস্তুত হয়, অর্থাৎ এটি পুশ-বেসড।
• Lazy Evaluation: Observable কেবল তখনই কার্যকরী হয়, যখন একজন সাবস্ক্রাইবার যুক্ত হয়।
• Multi-cast: একাধিক সাবস্ক্রাইবার একই Observable থেকে ডেটা পেতে পারে।

RxJS কী?

RxJS হলো একটি লাইব্রেরি যা JavaScript এ Reactive Programming কনসেপ্ট বাস্তবায়ন করে। এটি Observables এবং তাদের সঙ্গে কাজ করার জন্য অনেক অপারেটর প্রদান করে। RxJS এর সাহায্যে আপনি অনেক ধরনের অ্যাসিঙ্ক্রোনাস কাজ যেমন HTTP রিকোয়েস্ট, ইভেন্ট ম্যানেজমেন্ট, টাইমার, এবং ইউজার ইন্টারঅ্যাকশন সহজে ম্যানেজ করতে পারেন।

RxJS-এর কিছু গুরুত্বপূর্ণ অপারেটর:

• map: ডেটাকে ট্রান্সফর্ম করে।
• filter: ডেটাকে ফিল্টার করে।
• mergeMap: একাধিক Observable মেশানো যায়।
• catchError: এরর হ্যান্ডলিং।
• debounceTime: টাইম ডিলে যুক্ত করা।

Angular-এ Observables ব্যবহার করা

Angular অ্যাপ্লিকেশনগুলোতে HttpClient সার্ভিস, Forms, Routing এবং Event handling ইত্যাদির জন্য Observables ব্যবহার করা হয়। উদাহরণস্বরূপ, HTTP রিকোয়েস্টের জন্য Observables ব্যবহৃত হয়।

HTTP রিকোয়েস্টে Observable ব্যবহার

Angular-এ HttpClient সার্ভিসের মাধ্যমে HTTP রিকোয়েস্ট করতে Observables ব্যবহার করা হয়। উদাহরণস্বরূপ:

1. HttpClient Service ইনজেকশন

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

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

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

2. কম্পোনেন্টে HTTP Observable সাবস্ক্রাইব করা

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {

  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.getUsers().subscribe(
      (data) => {
        this.users = data;
      },
      (error) => {
        console.error('Error fetching users:', error);
      }
    );
  }
}

এখানে, getUsers() মেথডটি একটি Observable ফেরত দেয়, যা HTTP GET রিকোয়েস্টের মাধ্যমে ডেটা পাবে। কম্পোনেন্টে, .subscribe() মেথড ব্যবহার করে আমরা ঐ Observable থেকে ডেটা গ্রহণ করি এবং UI তে সেটি ডিসপ্লে করি।

RxJS অপারেটর ব্যবহার

RxJS আপনাকে অনেক শক্তিশালী অপারেটর দেয়, যেগুলি আপনাকে Observable-এর উপর বিভিন্ন প্রকার অপারেশন (যেমন ট্রান্সফর্মেশন, ফিল্টারিং, কম্বাইনিং ইত্যাদি) করতে সাহায্য করে। নিচে কিছু জনপ্রিয় RxJS অপারেটর দেখানো হল:

map অপারেটর

map অপারেটরটি Observable থেকে প্রাপ্ত ডেটাকে ট্রান্সফর্ম করার জন্য ব্যবহৃত হয়।

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

numbers.pipe(
  map(value => value * 2)  // প্রতিটি সংখ্যাকে 2 দিয়ে গুণ করা
).subscribe(value => console.log(value));
// আউটপুট: 2, 4, 6

filter অপারেটর

filter অপারেটরটি একটি নির্দিষ্ট শর্তের ভিত্তিতে ডেটা ফিল্টার করতে ব্যবহৃত হয়।

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

numbers.pipe(
  filter(value => value % 2 === 0)  // শুধুমাত্র ইভেন সংখ্যা ফিল্টার করা
).subscribe(value => console.log(value));
// আউটপুট: 2

debounceTime অপারেটর

debounceTime অপারেটরটি টাইপিং বা ইউজার ইনপুটে বিলম্ব (delay) যোগ করতে ব্যবহৃত হয়। এটি সাধারণত search input বা auto-complete ফিচারের জন্য ব্যবহৃত হয়।

import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

const searchBox = document.getElementById('searchBox') as HTMLInputElement;

fromEvent(searchBox, 'keyup').pipe(
  map((event: any) => event.target.value),
  debounceTime(300)  // 300 মিলিসেকেন্ড বিলম্ব
).subscribe(value => {
  console.log(value); // ইউজারের ইনপুট 300 মিলিসেকেন্ড পর পর প্রিন্ট হবে
});

Angular-এ Observables এবং RxJS এর ব্যবহার

Angular অ্যাপ্লিকেশনগুলোতে RxJS এবং Observables একটি অত্যন্ত শক্তিশালী টুল যা অ্যাসিঙ্ক্রোনাস ডেটা এবং ইভেন্ট ড্রিভেন প্রোগ্রামিংকে সহজ করে তোলে। HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, ফর্ম ভ্যালিডেশন, টাইমার ইত্যাদি পরিচালনার জন্য RxJS-এর অপারেটরগুলো ব্যবহার করা হয়, যা অ্যাপ্লিকেশনগুলোকে আরও ইন্টারেক্টিভ এবং কার্যকরী করে তোলে।