Angular Firebase Beispiel Code 2021 AngularFireList AngularFireDatabase

import { AngularFireDatabase,AngularFireList }  from 'angularfire2/database';

import { Observable } from 'rxjs';

  notes_Firebase_Data :AngularFireList<any>;

  notes_angular :Observable<any[]>;

  constructor( private afDb:AngularFireDatabase ) {

  }

  ngOnInit()

  {

    //----< ngOnInit() >----

    //* get table in firebase for create read update delete

    this.notes_Firebase_Data= this.afDb.list('Notes');

    //* get android observable ngfor

    this.notes_angular=this.notes_Firebase_Data.valueChanges();

    //----</ ngOnInit() >----

  }

    this.notes_Firebase_Data.push({  

       title:'note added by angular.push()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: new Date().toString()

      });

this.notes_Firebase_Data.update('2012/02',{  

       title:'this note is set by angularfirelist.update()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: formatDate( Date.now(),'yyyy-MM-dd hh:nn','en-US')

      });

    this.notes_Firebase_Data.remove('2012/02')

    .then(x=>console.log("Success removed"))

    .catch(error =>console.log("Error",error));

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

import { AngularFireDatabase,AngularFireList }  from 'angularfire2/database';

import { exception, time } from 'console';

import { Observable } from 'rxjs';

import {formatDate} from '@angular/common';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  //--< Daten >--

  title = 'dailycheck';

  notes_Firebase_Data :AngularFireList<any>;

  notes_angular :Observable<any[]>;

  constructor( private afDb:AngularFireDatabase ) {

  }

  ngOnInit()

  {

    //----< ngOnInit() >----

    //* get table in firebase for create read update delete

    this.notes_Firebase_Data= this.afDb.list('Notes');

    //* get android observable ngfor

    this.notes_angular=this.notes_Firebase_Data.valueChanges();

    //----</ ngOnInit() >----

  }

  add_node_in_firebase()

  {

    //----< add_node_in_firebase() >----

    //*creates a new node with details in firebase

    this.notes_Firebase_Data.push({  

       title:'note added by angular.push()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: new Date().toString()

      });

      //----</ add_node_in_firebase() >----

  }

  update_set_firebase()

  {

    //----< update_set_firebase() >----

    //*find and replace a node in Firebase

    //*if no match, then create new

    //*set : replaces complete node

    //*update : replaces only matching key values

    this.notes_Firebase_Data.update('2012/02',{  

       title:'this note is set by angularfirelist.update()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: formatDate( Date.now(),'yyyy-MM-dd hh:nn','en-US')

      });

      //----</ update_set_firebase() >----

  }

  remove_in_firebase()

  {

    //----< remove_in_firebase() >----

    //*removes node, 

    //*result is promise...

    this.notes_Firebase_Data.remove('2012/02')

    .then(x=>console.log("Success removed"))

    .catch(error =>console.log("Error",error));

    //----</ remove_in_firebase() >----

  }

}

<ul>

    <li *ngFor="let note of notes_angular | async" style="margin-top: 10px;">

        {{ note.title }}

        <br>

        {{ note.details }}

        <br>

        {{ note.datetime }}

    </li>

</ul>

<h1>{{title}}</h1>

<button (click)="add_node_in_firebase()"> Add New Note in Firebase</button>

<button (click)="update_set_firebase()"> Update, Set 'notes/2012/01'</button>

<button (click)="remove_in_firebase()"> Delete 'notes/2012/01'</button>

<ul>

    <li *ngFor="let note of notes_angular | async" style="margin-top: 10px;">

        {{ note.title }}

        <br>

        {{ note.details }}

        <br>

        {{ note.datetime }}

    </li>

</ul>

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';

import { AngularFireDatabaseModule } from '@angular/fire/database';

export const firebaseConfig={

  apiKey: "AIzaSyCYCR5pByfE_XzoJSVDc0z_MQiDJVkYZvM",

  authDomain: "dailycheck-d9983.firebaseapp.com",

  databaseURL: "https://dailycheck-d9983-default-rtdb.europe-west1.firebasedatabase.app",

  projectId: "dailycheck-d9983",

  storageBucket: "dailycheck-d9983.appspot.com",

  messagingSenderId: "594584322163",

  appId: "1:594584322163:web:acff93d09af8338faaaa06",

  measurementId: "G-PB9RFL53XQ" 

}

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AngularFireModule.initializeApp(firebaseConfig), 

    AngularFireDatabaseModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }