04 4

Leer registros de nuestra base de datos Firebase [04]

En este tutorial vamos a leer registros de nuestra base de datos Firebase siguiendo estos pasos:

  • Copiar la configuraci贸n de la documentaci贸n de firebase en nuestro proyecto de angular.
  • Crear una base de datos en la consola de firebase.
  • Agregar registros a nuestra base de datos para leerlas a trav茅s de nuestro proyecto.

Pagina de angularfire: https://github.com/angular/angularfire
Guia rapida: https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

Leer registros de nuestra base de datos Firebase

Codigo en git: https://github.com/programadornovato/ngFirebase/commit/ad84d2697e8459053484b20099a2fd69b8e5302f

src/app/app.component.html

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul>

src/app/app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import 'firebase/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(firestore: AngularFirestore) {
    this.items = firestore.collection('items').valueChanges();
  }
}

src/app/app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyCdDRquh84LInwEQPMUtdIbmYbCoNbW69Y",
    authDomain: "ngfirebaseproy-85222.firebaseapp.com",
    databaseURL: "https://ngfirebaseproy-85222.firebaseio.com",
    projectId: "ngfirebaseproy-85222",
    storageBucket: "ngfirebaseproy-85222.appspot.com",
    messagingSenderId: "615688900568",
    appId: "1:615688900568:web:d0c781cc07276712e3ecad",
    measurementId: "G-BHXLY09DCL"
  }
};

馃敆Puging de angular: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
馃敆 Documentacion de angularfire: https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md
馃帵[Curso] Bootstrap de 0 a 100 馃寛: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT
馃帵[Curso] Firebase馃敟de 0 a 100: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQqPh6eKk7_Q-ugWyhO6SKT
馃帵[Curso] Angular js 馃敽[De 0 a 100]: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRbxrnw-tAq6tG-NIUNu9sG
馃帵[Curso] SASS de 0 a 100 馃寛: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQXywJB8KMN_-GccZuVf9ag
馃帵[Curso] LESS de 0 a 100 馃寛: https://www.youtube.com/playlist?list=PLCTD_CpMeEKT70itw70uVs0vlFbvbCPQN

馃敆 Pagina de angular: https://cli.angular.io/
馃敆 Pagina de nodejs: https://nodejs.org/en/
馃敆 Pagina de typescrip: https://www.typescriptlang.org/
馃敆 Pagina oficial: https://www.programadornovato.com

馃敆 Facebook: https://facebook.com/ProgramadorNovatoOficial
馃敆 Twitter: https://twitter.com/programadornova
馃敆 Linkedin: https://www.linkedin.com/in/programadornovato/
馃敆 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que est谩 utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)