Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Firebase in Angular 2021

07.01.2021 (👁6763)

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 aufgabenObservable<any>[]; 

 

3c) AppComponent->constructor

Hier im constructor AngularFireDatabase als Datenbank übergeben

 

Daten holen: Und im Code holt man die Angular Datenbank mit .list

 

const itemsRefAngularFireList<any> = afDb.list('Aufgaben');

 

Daten an angular Datenmodel übergeben

 

itemsRef.valueChanges().subscribex=>this.aufgaben =  x;}

 

Constructor Code

 

  //--< Daten von Firebase holen >--

  constructor(afDb:AngularFireDatabase) {

    //*works

    const itemsRefAngularFireList<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 aufgabenObservable<any>[]; //works with AngularFireList<any>..subscribe(x=>{ this.aufgaben= x;}

  //--</ Daten >--

  //--< Daten von Firebase holen >--

  constructor(afDb:AngularFireDatabase) {

    //*works

    const itemsRefAngularFireList<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