Angular Firebase 2021
Folgende Einstellungen benötigt man in 2021 für das Anbinden von Firebase in Angular
Firebase in Angular Component anbinden
Die Google Firebase Datenbank kann man wie hier folgt in Angular einbinden.
1) Installation Google Firebase und Angularfire
Angularfire und Firebase sind installiert mit @latest
npm install angularfire2@latest firebase –save
In der package.json unter dependencies sind die Versionen von Angularfire Version 5 und Firebase Version 7
"angularfire2": "^5.4.2", "firebase": "^7.24.0", |
2) Angular Module
2a) Import:
import { AngularFireModule } from '@angular/fire'; import { AngularFireDatabaseModule } from '@angular/fire/database'; |
2b) Config einbinden
export const firebaseConfig={ apiKey: "AIzaSyCYCR5pByfE_XzoJSVDc0z_MQiDxxx", 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:acff93d09af8338faxxx", measurementId: "G-PB9RFxxx" } |
2c) Import
imports: [ BrowserModule, AngularFireModule.initializeApp(firebaseConfig) , AngularFireDatabaseModule, ],
|
3) Firebase in app.component.ts
In der Codebehind app.component.ts bindet man Firebase wie folgt ein:
3a) Import
import { AngularFireDatabase,AngularFireList } from 'angularfire2/database'; import { Observable } from 'rxjs'; |
3b) AppComponent
export class AppComponent { public aufgaben: Observable<any>[];
|
3c) AppComponent->constructor
Hier im constructor AngularFireDatabase als Datenbank übergeben
Daten holen: Und im Code holt man die Angular Datenbank mit .list
const itemsRef: AngularFireList<any> = afDb.list('Aufgaben'); |
Daten an angular Datenmodel übergeben
itemsRef.valueChanges().subscribe( x=>{ this.aufgaben = x;} |
Constructor Code
//--< Daten von Firebase holen >-- constructor(afDb:AngularFireDatabase) { //*works const itemsRef: AngularFireList<any> = afDb.list('Aufgaben'); itemsRef.valueChanges().subscribe( x=>{ this.aufgaben = x;} );
|
import { Component } from '@angular/core'; import { AngularFireDatabase,AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { //--< Daten >-- title = 'dailycheck'; public aufgaben: Observable<any>[]; //works with AngularFireList<any>..subscribe(x=>{ this.aufgaben= x;} //--</ Daten >--
//--< Daten von Firebase holen >-- constructor(afDb:AngularFireDatabase) { //*works const itemsRef: AngularFireList<any> = afDb.list('Aufgaben'); itemsRef.valueChanges().subscribe( x=>{ this.aufgaben = x;} ); } //--</ Daten von Firebase holen >-- }
|
4) Anzeige der Daten in app.component.html
Die Anzeige der Daten ist wie angular üblich über die *ngFor schleife und mit {{ daten }}
<li *ngFor="let item of aufgaben"> {{ item }} </li>
|
<h1>{{title}}</h1> <ul> <li *ngFor="let item of aufgaben"> {{ item }} </li> </ul>
|
5) In Firebase
Unter Projektübersicht -> Entwickeln ->Realtime Database
hier die Bezeichnung des ersten Knotens nehmen
dailycheck-d9983-default-rtdb Aufgaben 1: "Bestellung eintragen" 2: "Bestellung füllen" 3: "Bestellung senden" 4: "Bestellung bestätigen" |
6) Ansicht im Browser in Angular