06.- Proyecto con Firebase y Angular [Mostrar registros]馃敟

En este tutorial vamos a hacer los siguientes puntos:

  • Pugin Angular Snippets.
  • Crear una lista de nuestros items.
  • Llamar el id de nuestros documentos.
  • Dividir el 谩rea de mostrar documentos y crear documentos.

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/

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *