Programador Novato

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

• Aprenderemos a usar modal de bootstrap.
• Actualizar registros en nuestra base de datos a través de nuestra aplicación.

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

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

<div class="alert alert-primary" role="alert" *ngFor="let item of items" >
    {{item.name}}
    <i class="fa fa-trash float-right text-danger" 
        style="cursor: pointer;" 
        (click)="eliminar(item.id)"
    >
    </i>
    <i class="fa fa-pencil float-right mr-2"
        style="cursor: pointer;"
        (click)="editar(item)"
        data-toggle="modal" data-target="#modelId"
    ></i>

</div>



<!-- Modal -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
            </div>
            <form (ngSubmit)="editarForm()" >
                <div class="modal-body">
                    <div class="form-group">
                    <label for="">Nombre</label>
                    <input type="text" class="form-control" name="name" [(ngModel)]="itemEditar.name" >
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</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;
  itemEditar:any={name:''};
  constructor(private con:ConService) {
    this.con.retornaItems().subscribe(items=>{
      this.items=items;
      console.log(this.items);
    })
  }

  ngOnInit(): void {
  }
  eliminar(id){
    this.con.eliminar(id);
  }
  editar(item){
    console.log(item);
    this.itemEditar=item;
  }
  editarForm(){
    this.con.editar(this.itemEditar);
  }
}

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();
  }
  editar(item){
    this.itemDoc=this.afs.doc<Item>("items/"+item.id);
    this.itemDoc.update(item);
  }
}

🔗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