Angular অ্যাপ্লিকেশন থেকে External API (অর্থাৎ বাইরের ওয়েব সার্ভিস বা ডেটা সোর্স) থেকে ডেটা লোড করা একটি সাধারণ এবং গুরুত্বপূর্ণ কাজ। Angular এর HttpClientModule এর মাধ্যমে আপনি খুব সহজেই HTTP রিকোয়েস্ট পাঠাতে এবং রেসপন্স পেতে পারেন।

এখানে, External API থেকে ডেটা লোড করার পুরো প্রক্রিয়া আলোচনা করা হবে।

1. HttpClientModule ইমপোর্ট করা

External API থেকে ডেটা লোড করার জন্য প্রথমে HttpClientModule ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { HttpClientModule } from '@angular/common/http';

এটি imports অ্যারে তে যোগ করতে হবে:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. HttpClient সার্ভিস ইনজেক্ট করা

এখন আপনি HttpClient সার্ভিসটি আপনার কম্পোনেন্টে ইনজেক্ট করবেন। HttpClient সার্ভিসটি API রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}  // HttpClient ইনজেক্ট করা
}

3. External API রিকোয়েস্ট পাঠানো

External API থেকে ডেটা লোড করার জন্য আপনি HttpClient সার্ভিসের get() মেথড ব্যবহার করতে পারেন। এখানে আমরা GET রিকোয়েস্টের উদাহরণ দেখব, তবে আপনি POST, PUT, বা DELETE রিকোয়েস্টও ব্যবহার করতে পারেন।

export class AppComponent {
  data: any;  // ডেটা রাখার জন্য একটি ভেরিয়েবল

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // External API থেকে ডেটা লোড করা
    this.http.get('https://api.example.com/data').subscribe(
      response => {
        this.data = response;  // API থেকে পাওয়া ডেটা অ্যাসাইন করা
        console.log(this.data);  // কনসোল লোগে ডেটা দেখানো
      },
      error => {
        console.log('Error:', error);  // API রিকোয়েস্টে কোনো সমস্যা হলে এরর দেখানো
      }
    );
  }
}

উপরের কোডে, get() মেথডটি API থেকে ডেটা নিয়ে আসবে এবং subscribe() মেথডের মাধ্যমে আপনি রেসপন্স বা এরর হ্যান্ডল করতে পারেন। ডেটা লোড হওয়ার পর তা this.data ভেরিয়েবলে আসবে এবং আপনি এটি কম্পোনেন্টে ব্যবহার করতে পারবেন।

4. API রেসপন্সে ডেটা প্রদর্শন

এখন, আপনি লোড হওয়া ডেটাকে কম্পোনেন্টের টেমপ্লেটে প্রদর্শন করতে পারেন। উদাহরণস্বরূপ, নিচে HTML টেমপ্লেট দেওয়া হলো:

<div *ngIf="data">
  <h2>API থেকে প্রাপ্ত ডেটা:</h2>
  <pre>{{ data | json }}</pre>
</div>

<div *ngIf="!data">
  <p>ডেটা লোড হচ্ছে...</p>
</div>

এখানে, *ngIf ডিরেকটিভটি ডেটা লোড হওয়ার পর কনটেন্ট দেখাবে এবং যদি ডেটা লোড না হয় তবে একটি লোডিং মেসেজ দেখাবে।

5. প্যারামিটার সহ GET রিকোয়েস্ট পাঠানো

কিছু API প্যারামিটার সহ GET রিকোয়েস্ট গ্রহণ করে। আপনি HttpParams ব্যবহার করে প্যারামিটার পাঠাতে পারেন:

import { HttpParams } from '@angular/common/http';

export class AppComponent {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    const params = new HttpParams().set('id', '123');  // প্যারামিটার সেট করা
    this.http.get('https://api.example.com/data', { params }).subscribe(
      response => {
        console.log(response);
      },
      error => {
        console.log('Error:', error);
      }
    );
  }
}

এখানে, HttpParams দিয়ে id প্যারামিটারটি API রিকোয়েস্টের সাথে পাঠানো হচ্ছে।

6. Error Handling (এরর হ্যান্ডলিং)

API রিকোয়েস্টের সময় যদি কোনো সমস্যা হয়, যেমন নেটওয়ার্ক সমস্যা বা সার্ভার সমস্যা, তাহলে আপনাকে তা সঠিকভাবে হ্যান্ডল করতে হবে। Angular HttpErrorResponse ব্যবহার করে এরর হ্যান্ডল করতে সাহায্য করে।

import { HttpErrorResponse } from '@angular/common/http';

export class AppComponent {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/data').subscribe(
      response => {
        console.log(response);
      },
      (error: HttpErrorResponse) => {
        console.error('API রিকোয়েস্টে সমস্যা:', error.message);
      }
    );
  }
}

এখানে, HttpErrorResponse দিয়ে আমরা API রিকোয়েস্টের ত্রুটি ট্র্যাক করছি এবং সেই ত্রুটির বার্তা কনসোলে দেখাচ্ছি।

7. POST রিকোয়েস্ট পাঠানো

যদি আপনি API এ ডেটা পাঠাতে চান, তবে post() মেথড ব্যবহার করবেন:

export class AppComponent {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    const requestBody = { name: 'John', age: 30 };
    this.http.post('https://api.example.com/data', requestBody).subscribe(
      response => {
        console.log('Data posted successfully:', response);
      },
      (error: HttpErrorResponse) => {
        console.error('Error:', error.message);
      }
    );
  }
}

এখানে, post() মেথডের মাধ্যমে আমরা requestBody পাঠাচ্ছি এবং API রেসপন্স পাচ্ছি।

সারাংশ

Angular এ External API থেকে ডেটা লোড করার জন্য HttpClientModule ব্যবহার করা হয়। আপনি GET, POST, PUT, বা DELETE রিকোয়েস্ট পাঠিয়ে API থেকে ডেটা লোড করতে পারেন এবং subscribe() মেথডের মাধ্যমে সেই ডেটা অ্যাক্সেস করতে পারেন। এর সাথে আপনি API রেসপন্স এবং এরর হ্যান্ডলিংয়ের মাধ্যমে আরও উন্নত ফিচার যুক্ত করতে পারেন। HttpParams দিয়ে প্যারামিটার পাঠানো, এবং HttpErrorResponse দিয়ে ত্রুটি হ্যান্ডলিং Angular এ API ইন্টিগ্রেশনকে আরও সহজ করে তোলে।