CODEWITHSUNDEEP
angulartypescriptfirebasegoogle-cloud-firestore
Fernando Aureliano
Fernando Aureliano

Reputation: 914

AngularFire: get infos from specific user passing ID by URL

I'm using Angular 10 and AngularFire to collect data from Firebase. I already have a list of my users on my component users.component.ts and I list them on users.component.html. Them I click on the name of user and I go to user-details.component, where I get the user ID from URL and print this ID on my view.

What I need is to use this snapshotParam to get the data from this specific user from firebase and display it on my view.

something like: const user = firestore.collection('users').doc(this.snapshotParam);

But when I do that on ngOnInit I got the error: Cannot find name 'firestore'.

and if I put it on the constructor, I can not get the snapshotParam, which is declared on ngOnINit.

How the best way I can do that?

Thanks for help!

My Code on user details is:

user-details.component.ts

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private readonly route: ActivatedRoute,
    firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.subscribe(params => {
      this.subscribedParam = params.get("id");
    });


  }

}

I'm already can print the userID on my view

user-details.component.html

<p><strong>USER ID:</strong> {{ snapshotParam }}</p>

Upvotes: 0

Views: 334

Answers (1)

Quentin Fonck
Quentin Fonck

Reputation: 1315

you forgot to add "private" next to "firestore" in your constructor. Then, you can call firestore in the ngOnInit function like this:

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import {Observable} from 'rxjs';
import { ActivatedRoute, Router } from "@angular/router";  
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'ngbd-table-complete',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [NgbModalConfig, NgbModal, CountryService, DecimalPipe]
})
export class UserDetailsComponent implements OnInit {

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor( 
    private route: ActivatedRoute,
    private firestore: AngularFirestore,
    ) {

  }

  ngOnInit(): void {

    this.snapshotParam = this.route.snapshot.paramMap.get("id");

    this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    ).subscribe();


  }

UPDATE Regarding the view
I would define an observable and use the pipe async

Component:

...
    this.user$ = this.route.paramMap.pipe(
        switchMap(params => {
            this.subscribedParam = params.get("id");
            return this.firestore.collection('users').doc(this.snapshotParam).valueChanges();
        })
    )

...

Template:

    <div *ngIf="user$ | async as user">{{user.name}}</div>

Upvotes: 2

Related Questions