CODEWITHSUNDEEP
javascriptangularangularfire2google-cloud-firestore
Rafael Simões
Rafael Simões

Reputation: 437

Retrive firestore documentId and add to html

I'm building my first Angular app and I'm trying to integrate firestore. So far I was able to retrieve data from firestore and also log the id with snapshot but I'm not being able to bring it all together.

Is there a way to add the id to the client Model?

I was reading the angularfire2 documentation where it says that we can't use the $key property and now we should use snapshot but I can't figure it out.

Thanks

This is my Service

@Injectable()
export class ClientService {
  clientsCollection: AngularFirestoreCollection<Client>;
  clients: Observable<Client[]>;
  snapshot: any;
  constructor(private afs: AngularFirestore) {
    this.clientsCollection = this.afs.collection('clients');
    this.clients = this.clientsCollection.valueChanges();
    // snapshot for id/metadata
    this.snapshot = this.clientsCollection.snapshotChanges()
      .map(arr => {
        console.log(arr);
      });
  }
}

My client.component.ts

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
  clients: Client[];
  snapshots: any[];
  constructor(
  public clientService: ClientService
  ){}

ngOnInit(){
  this.clientService.clients.subscribe(clients => {
    this.clients = clients;
  });
}
}

And my client.component.html

<table *ngIf="clients?.length > 0; else noClients" class="table table-striped">
  <thead class="thead-inverse">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Balance</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let client of clients">
      <td></td>
      <td>{{ client.firstName }} {{ client.lastName }}</td>
      <td>{{ client.email }}</td>
      <td>{{ client.balance }}</td>
      <td><a href="" class="btn btn-secondary btn-sm">Details</a></td>
    </tr>
  </tbody>

</table>

<ng-template #noClients>
  <hr>
  <h5>There are no clients in the system</h5>
</ng-template>

this is what I have so far

Upvotes: 0

Views: 381

Answers (1)

fthkrtl
fthkrtl

Reputation: 37

You can find answer in angularfire2 documents 

    export class AppComponent {
  private shirtCollection: AngularFirestoreCollection<Shirt>;
  shirts: Observable<ShirtId[]>;
  constructor(private readonly afs: AngularFirestore) {
    this.shirtCollection = afs.collection<Shirt>('shirts');
    // .snapshotChanges() returns a DocumentChangeAction[], which contains
    // a lot of information about "what happened" with each change. If you want to
    // get the data and the id use the map operator.
    this.shirts = this.shirtCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Shirt;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }
}

and this template

 <ul>
  <li *ngFor="let shirt of shirts | async">
    {{ shirt.id }} is {{ shirt.price }}
  </li>
</ul>

Upvotes: 1

Related Questions