Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

2021 Angular Firebase

 

 

The following settings are required in 2021 for connecting Firebase to Angular

 

Firebase in Angular Component

 

The Google Firebase database can be integrated into Angular as follows.

 

1)   Installing Google Firebase and Angularfire

 

Angularfire and Firebase are installed with @latest

npm install angularfire2@latest firebase –save

 

 

In the package.json under dependencies, the versions of Angularfire version 5 and Firebase version 7 are

 

    "angularfire2""^5.4.2",

    "firebase""^7.24.0",

 

 

 

 

1)   Angular Modules

 

2a) Import:

 

import { AngularFireModule } from '@angular/fire';

import { AngularFireDatabaseModule } from '@angular/fire/database';

 

2b) Config

 

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,               

  ],

 

 

 

 

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

}

 

 

 

 

3)  Display of data in app.component.html    

The display of the data is as angular usual via the *ngFor loop and with data

 

<li *ngFor="let item of aufgaben">

        {{ item }}

    </li>

 

<h1>{{title}}</h1>

<ul>

    <li *ngFor="let item of aufgaben">

        {{ item }}

    </li>

</ul>

 

 

 

4)  In Firebase

Under Project Overview  ->  Develop  ->Realtime Database

https://console.firebase.google.com/u/0/project/dailycheck-d9983/database/dailycheck-d9983-default-rtdb/data

take the name of the first node here

 

dailycheck-d9983-default-rtdb

Aufgaben

1:  "Bestellung eintragen"

2:  "Bestellung füllen"

3:  "Bestellung senden"

4:  "Bestellung bestätigen"

 

 

 

  • View in the browser in Angular

 

dailycheck

1)    Bestellung eintragen

2)    Bestellung füllen

3)    Bestellung senden

4)    Bestellung bestätigen

 

Mobile
»
Angular Firebase Example 2021 AngularFireDatabase
»
Angular Firebase output single node
»
Exampel Code Connect data from Firebase in Angular
»
Angular Firebase Error: permission_denied Client doesn t have permission to access the desired data.
»
Firebase into Angular in 2021
»
Setting Firebase for easy reading of data
»
Firebase: Allow reading and writing
»
Firebase: Edit data manually
»
Install Firebase in Angular Project
»
How much does Firebase cost?

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de