Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

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

 

Mobile
»
Angular Firebase Beispiel Code 2021 AngularFireList AngularFireDatabase
»
Angular Firebase einzelne Node ausgeben
»
Daten von Firebase anbinden in Angular 2021
»
Angular Firebase Error: permission_denied at Client doesn t have permission to access the desired data.
»
Angular Firebase in 2021
»
Einstellen von Firebase für einfaches Lesen der Daten
»
Firebase: Lesen und Schreiben erlauben
»
Firebase: Daten manuell bearbeiten
»
Wieviel kostet Firebase
»
Firebase als Datenbank

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de