Borrar registros con Firebase y Angular [08]
En este tutorial vamos a borrar registros con Firebase y Angular siguiendo estos pasos:
- Aprenderemos a usar las librerías de font-awesome.
- Eliminar registros en nuestra base de datos a través de nuestra aplicación.
Codigo en git: https://github.com/programadornovato/ngFirebase/commit/fe9a8c5032e4885664a0aa31f8dc85a1691604bb
src/app/app.component.html
<div class="container mt-4">
<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}}
<i class="fa fa-trash float-right text-danger" style="cursor: pointer;" (click)="eliminar(item.id)"></i>
</div>
src/app/components/lista/lista.component.ts
import { Component, OnInit } from '@angular/core';
import {ConService} from '../../services/con.service'
@Component({
selector: 'app-lista',
templateUrl: './lista.component.html',
styleUrls: ['./lista.component.css']
})
export class ListaComponent implements OnInit {
items:any;
constructor(private con:ConService) {
this.con.retornaItems().subscribe(items=>{
this.items=items;
console.log(this.items);
})
}
ngOnInit(): void {
}
eliminar(id){
this.con.eliminar(id);
}
}
src/app/services/con.service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection,AngularFirestoreDocument } 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>;
private itemDoc:AngularFirestoreDocument<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;
}
addItem(item: Item) {
this.itemsCollection.add(item);
}
eliminar(id){
this.itemDoc=this.afs.doc<Item>("items/"+id);
this.itemDoc.delete();
}
}
src/index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>NgFirebase</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </head> <body> <app-root></app-root> </body> </html>
🔗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 >>
