Change subscribe to get new data from database ionic angular

In an Ionic and Angular application, you can use the Subscription class from the RxJS library to get new data from a database when it changes. Here's an example of how you can do this:

Step 1: Create a service to interact with the database

Create a new service, e.g. database.service.ts, that will interact with your database. For example, if you're using Firebase Realtime Database, you can use the angularfire2 library:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

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

  private db: AngularFireDatabase;

  constructor(private afDatabase: AngularFireDatabase) {
    this.db = afDatabase;
  }

  getItems() {
    return this.db.list('items');
  }

  getItem(id: string) {
    return this.db.object(`items/${id}`);
  }

  addItem(item: any) {
    this.db.list('items').push(item);
  }

  updateItem(id: string, item: any) {
    this.db.object(`items/${id}`).update(item);
  }

  deleteItem(id: string) {
    this.db.object(`items/${id}`).remove();
  }

}

Step 2: Create a component to subscribe to the database

Create a new component, e.g. items.component.ts, that will subscribe to the database and display the data:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { DatabaseService } from './database.service';

@Component({
  selector: 'app-items',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item.name }}</li>
    </ul>
  `
})
export class ItemsComponent implements OnInit, OnDestroy {

  items: any[];
  subscription: Subscription;

  constructor(private databaseService: DatabaseService) { }

  ngOnInit(): void {
    this.subscription = this.databaseService.getItems().subscribe(items => {
      this.items = items;
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

}

In this example, we're using the getItems() method from the DatabaseService to retrieve a list of items from the database. We're then subscribing to the observable returned by this method using the subscribe() method. When new data is received from the database, the items array will be updated.

Step 3: Use the component in your app

Finally, add the ItemsComponent to your app module and use it in your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppComponent } from './app.component';
import { ItemsComponent } from './items/items.component';
import { DatabaseService } from './database.service';

@NgModule({
  declarations: [AppComponent, ItemsComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot()],
  providers: [DatabaseService],
  bootstrap: [AppComponent]
})
export class AppModule {}

That's it! When you run your app, it should display the items from the database and update in real-time when new data is added or changed.

Note that in this example, we're using the subscribe() method to receive updates from the database. This means that our component will receive a new set of data every time the database changes. If you want to receive updates in real-time, you can use the async pipe in your template to display the data:

<ul>
  <li *ngFor="let item of items | async">{{ item.name }}</li>
</ul>

This will display the latest data from the database without requiring a full page reload.