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

 

 

Here you will find a complete example with Angular and access to Google Firebase data.

 

In Angular and Firebase, access and handling has changed dramatically since 2018.

That's why you can hardly find good examples, tutorials and code for working angular and Google Firebase on the Internet.

 

Shows:

AngularFireList<any>; AngularFireDatabase

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

 

Obsolete, replaced !:

AngularFireListObservable,  AngularFireObservable

 

 

1)  App.component.ts

Shows:

1a) Import AngularFireDatabase and AngularFireList

 

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

import { Observable } from 'rxjs';

 

1b) Local data in Angular from Firebase

 

  notes_Firebase_Data :AngularFireList<any>;

  notes_angular :Observable<any[]>;

 

1c) Connecting the data from Angular in the client to the 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) Change data to Firebase: 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) Data 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) Delete data in Firebase

 

    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

 

Data in . View HTML

 

<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

 

Include Firebase in Angular

 

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

 

 

 

Mobile

.

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