Daten von Firebase anbinden in Angular
Beispiel Code zum Anbinden von Firebase Daten in Angular
App.component.ts
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 firebase_Data : Observable<any>; constructor( private afDb:AngularFireDatabase ) { }
ngOnInit() { this.firebase_Data = this.afDb.list('Aufgaben').valueChanges(); } }
|
Und in App.component.html
<h1>{{title}}</h1> <ul> <li *ngFor="let item of firebase_Data | async"> {{ item }} </li> </ul>
|
In app.component.modules
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 { }
|