Firebase in Angular in 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
https://console.firebase.google.com/u/0/project/dailycheck-d9983/database/dailycheck-d9983-default-rtdb/data
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
dailycheck
- Bestellung
eintragen
- Bestellung
füllen
- Bestellung
senden
- Bestellung
bestätigen