How to create a data source

Question

With the help of code can you tell me How to create a data source?

Answer 1

In Angular, a data source is commonly created using RxJS Observables or by extending DataSource from Angular Material for tables.

Using RxJS Observable as a Data Source

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

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

import { Observable } from 'rxjs';

@Injectable({

  providedIn: 'root'

})

export class DataService {

  private apiUrl = 'https://api.example.com/data'; // Replace with actual API

  constructor(private http: HttpClient) {}

  getData(): Observable<any[]> {

    return this.http.get<any[]>(this.apiUrl);

  }

}

Usage in Component:

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

import { DataService } from './data.service';

@Component({

  selector: 'app-data',

  template: `<ul><li *ngFor="let item of data">{{ item.name }}</li></ul>`

})

export class DataComponent implements OnInit {

  data: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {

    this.dataService.getData().subscribe(response => this.data = response);

  }

}