06 3

Mostrar registros con Firebase y Angular [06]

En este tutorial vamos a mostrar registros con Firebase y Angular siguiendo estos pasos:

  • Pugin Angular Snippets.
  • Crear una lista de nuestros items.
  • Llamar el id de nuestros documentos.
  • Dividir el área de mostrar documentos y crear documentos.
Mostrar registros con Firebase y Angular

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

src/app/app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <app-lista></app-lista>
    </div>
    <div class="col-md-6">
      <app-agrega></app-agrega>
    </div>
  </div>
  
</div>

src/app/components/lista/lista.component.html

<div class="alert alert-primary" role="alert" *ngFor="let item of items" >
    {{item.name}}---{{item.id}}
</div>

src/app/services/con.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export interface Item { name: string; }
@Injectable({
  providedIn: 'root'
})
export class ConService {
  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;
  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Item;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }
  retornaItems(){
    return this.items;
  }

}

🔗Fontawesome: https://fontawesome.com/v4.7.0/
🔗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

🔗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. :)