Angular Firebase Example 2021
Hier findet man eine komplettes Beispiel mit Angular und dem Zugriff auf Google Firebase Daten.
In Angular und Firebase hat sich der Zugriff und die Handhabung seit 2018 drastisch geändert.
Deshalb findet man im Internet kaum gute Beispiele, Tutorials und Code zum Arbeiten von Angular und Google Firebase.
Zeigt:
AngularFireList<any>; AngularFireDatabase
Shows CRUD Create Refresh update Delete as push(), update, set, remove
Veraltet, ersetzt !:
AngularFireListObservable, AngularFireObservable
1)
App.component.ts
Zeigt:
1a) Import AngularFireDatabase und AngularFireList
import { AngularFireDatabase,AngularFireList } from 'angularfire2/database'; import { Observable } from 'rxjs'; |
1b) lokale Daten in Angular aus Firebase
notes_Firebase_Data :AngularFireList<any>; notes_angular :Observable<any[]>; |
1c) Verbinden der Daten von Angular im Client mit dem Firebase Server
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() >---- }
|
1d) Daten in Firebase ändern: Add/Create/
Push(..)
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()
});
|
1e) Daten in Firebase updaten, verändern, Edit,
set, update(..)
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') });
|
1f) Daten in Firebase löschen
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() >---- }
}
|
2)
App.component.html
Daten in .HTML anzeigen
<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>
|
3)
App.component.module
Firebase in Angular einbinden
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 { }
|