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/

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

Ejercicio.- Adivinar un numero random en kotlin (Curso de Kotlin desde cero [34])

En este tutorial vamos a hacer un programa que: Generamos un número aleatorio entre 1…

5 meses hace

Probar nuestra app web desde nuestra maquina local con ngrok en ubuntu 16.04 ☁️

Alguna vez has querido mostrar tu aplicación web en un dominio/subdominio o compartir un archivo,esto…

3 años hace

Mi primer app de shopify ?

RequerimientosRubyRubyGemsBundlerDescarga la aplicación de ejemplo1.- Ya que debemos correr la aplicación en una url con…

3 años hace

Instalar un entorno gráfico (xfce) en un servidor ubuntu 16.04 ?

En ocasiones tenemos la necesidad de tener un entorno grafico en un servidor por diferentes…

3 años hace

Certbot error certificer “Client with the currently selected authenticator does not support any combination…”

Ultimamnte me di cuenta que al intentar certificar mis dominios certbot envia este error:Client with…

3 años hace
hackear wifi con kali linux ?

hackear wifi con kali linux ?

Hoy en día tenemos la fortuna de tener muchas redes a nuestro alrededor, no necesariamente…

3 años hace