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

Angular Firebase Example 2021 AngularFireDatabase AngularFireList

08.01.2021 (👁12084)

Angular Firebase Example 2021

 

Hier findet man eine komplettes Beispiel mit Angular und dem Zugriff auf Google Firebase Daten.

 

In Angular und Firebase hat sich der Zugriff und die Handhabung seit 2018 drastisch geändert.

Deshalb findet man im Internet kaum gute Beispiele, Tutorials und Code  zum Arbeiten von Angular und Google Firebase.

 

Zeigt:

AngularFireList<any>; AngularFireDatabase

Shows CRUD Create Refresh update Delete as push(), update, set, remove

 

Veraltet, ersetzt !:

AngularFireListObservable, AngularFireObservable

 

 

1) 

App.component.ts

Zeigt:

1a) Import AngularFireDatabase und AngularFireList

import { AngularFireDatabase,AngularFireList }  from 'angularfire2/database';

import { Observable } from 'rxjs';

 

1b) lokale Daten in Angular aus Firebase

 

  notes_Firebase_Data :AngularFireList<any>;

  notes_angular :Observable<any[]>;

 

1c) Verbinden der Daten von Angular im Client mit dem Firebase Server

  constructorprivate afDb:AngularFireDatabase ) {

  }

  ngOnInit()

  {

    //----< ngOnInit() >----

    //* get table in firebase for create read update delete

    this.notes_Firebase_Datathis.afDb.list('Notes');

    //* get android observable ngfor

    this.notes_angular=this.notes_Firebase_Data.valueChanges();

    //----</ ngOnInit() >----

  }

 

 

 

1d) Daten in Firebase ändern: Add/Create/

Push(..)

 

    this.notes_Firebase_Data.push({  

       title:'note added by angular.push()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: new Date().toString()

      

      });

 

 

1e) Daten in Firebase updaten, verändern, Edit,

set, update(..)

this.notes_Firebase_Data.update('2012/02',{  

       title:'this note is set by angularfirelist.update()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: formatDateDate.now(),'yyyy-MM-dd hh:nn','en-US')

      });

 

 

1f) Daten in Firebase löschen

    this.notes_Firebase_Data.remove('2012/02')

    .then(x=>console.log("Success removed"))

    .catch(error =>console.log("Error",error));

 

 

import { ComponentOnInit } from '@angular/core';

import { AngularFireDatabase,AngularFireList }  from 'angularfire2/database';

import { exceptiontime } from 'console';

import { Observable } from 'rxjs';

import {formatDatefrom '@angular/common';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  //--< Daten >--

  title = 'dailycheck';

  notes_Firebase_Data :AngularFireList<any>;

  notes_angular :Observable<any[]>;

  constructorprivate afDb:AngularFireDatabase ) {

  }

  ngOnInit()

  {

    //----< ngOnInit() >----

    //* get table in firebase for create read update delete

    this.notes_Firebase_Datathis.afDb.list('Notes');

    //* get android observable ngfor

    this.notes_angular=this.notes_Firebase_Data.valueChanges();

    //----</ ngOnInit() >----

  }

  add_node_in_firebase()

  {

    //----< add_node_in_firebase() >----

    //*creates a new node with details in firebase

    this.notes_Firebase_Data.push({  

       title:'note added by angular.push()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: new Date().toString()

      

      });

      //----</ add_node_in_firebase() >----

  }

  update_set_firebase()

  {

    //----< update_set_firebase() >----

    //*find and replace a node in Firebase

    //*if no match, then create new

    //*set : replaces complete node

    //*update : replaces only matching key values

    this.notes_Firebase_Data.update('2012/02',{  

       title:'this note is set by angularfirelist.update()',

       details: 'this note ist created with angularfirelist<any>. To list it in ngFor, you need an observable<any[]>',

       datetime: formatDateDate.now(),'yyyy-MM-dd hh:nn','en-US')

      });

      //----</ update_set_firebase() >----

  }

  remove_in_firebase()

  {

    //----< remove_in_firebase() >----

    //*removes node, 

    //*result is promise...

    this.notes_Firebase_Data.remove('2012/02')

    .then(x=>console.log("Success removed"))

    .catch(error =>console.log("Error",error));

    //----</ remove_in_firebase() >----

  }



}

 

 

 

 

2) 

App.component.html

 

Daten in .HTML anzeigen

<ul>

    <li *ngFor="let note of notes_angular | async" style="margin-top: 10px;">

        {{ note.title }}

        <br>

        {{ note.details }}

        <br>

        {{ note.datetime }}

        

    </li>

</ul>

 

 

 

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

<button (click)="add_node_in_firebase()"> Add New Note in Firebase</button>

<button (click)="update_set_firebase()"> Update, Set 'notes/2012/01'</button>

<button (click)="remove_in_firebase()"> Delete 'notes/2012/01'</button>

<ul>

    <li *ngFor="let note of notes_angular | async" style="margin-top: 10px;">

        {{ note.title }}

        <br>

        {{ note.details }}

        <br>

        {{ note.datetime }}

        

    </li>

</ul>



 

 

3) 

App.component.module

 

Firebase in Angular einbinden

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

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

export const firebaseConfig={

  apiKey: "AIzaSyCYCR5pByfE_XzoJSVDc0z_MQiDJVkYZvM",

  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:acff93d09af8338faaaa06",

  measurementId: "G-PB9RFL53XQ" 

}

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AngularFireModule.initializeApp(firebaseConfig), 

    AngularFireDatabaseModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }