Learning Angular

Question

I'm trying to learn angular and I'm stuck. I was trying to get data from a HTTPClient service that I've created using Firebase as DB.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  link : string = 'https://corso-angular-2ddd9-default-rtdb.europe-west1.firebasedatabase.app/persone';

  


  constructor(private http:HttpClient) { }

  insertPersona(url :string, body: {}){
    return this.http.post(url+'.json', body);
  }

  getPersone(url :string){
    return this.http.get(`${url}.json`)
  }

  getPersona(url :string, id:string){
    return this.http.get(`${url}/${id}.json`)
  }

  deletePersona(url :string, id:string){
    return this.http.delete(`${url}/${id}.json`)
  }
}

I've injected this service in some components. One is the Homepage Component that contains a ngForm where you can insert data and the data is sent to DB.

Here's the HTML

<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit2()">
  <mat-form-field>
    <mat-label>Cognome</mat-label>
    <input matInput formControlName="cognome">
  </mat-form-field>
  <p *ngIf="!reactiveForm.controls['cognome'].valid && reactiveForm.controls['cognome'].touched">inserisci un cognome</p>
  <mat-form-field>
    <mat-label>Nome</mat-label>
    <input matInput formControlName="nome">
    <p *ngIf="!reactiveForm.get('nome')?.valid">inserisci un nome</p>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Sesso</mat-label>
    <mat-select formControlName="sesso">
      <mat-option value="Maschio">Maschio</mat-option>
      <mat-option value="Femmina">Femmina</mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-raised-button type="submit" [disabled]="!reactiveForm.valid">Invia</button>
</form>

And here's the TS

  onSubmit2() {


    this.firebase
      .insertPersona(
        this.firebase.link,
        {
          cognome: this.reactiveForm.controls['cognome'].value,
          nome: this.reactiveForm.controls['nome'].value,
          sesso: this.reactiveForm.controls['sesso'].value,
        }
      )
      .subscribe((data) => {

      });


  }

This work fine. Then I wanted to show a list of this persons on screen then I've created this component called Contact Component where in the TS file I've used the getPersona() to add the value of the DB datas to a var like this:

export class ContactComponent implements OnInit{

  persone: any;

  constructor(private firebase:FirebaseService){

  }

  ngOnInit(): void {   
    
    this.firebase.getPersone(
      this.firebase.link
      ).subscribe((data:any)=>{

       this.persone=Object.keys(data).map((key)=>{
        data[key]['id'] = key
        return data[key]})
        
      })
      
  }

And this is the HTML file

<div>
  <h2>Lista Contatti</h2>
  <div *ngFor="let persona of persone;">
    <a routerLink="/contact/{{ persona.id }}">
      <p>{{ persona.nome }} {{ persona.cognome}}</p></a
    >
  </div>
  
</div>

<router-outlet></router-outlet>

And even this works!

Now troubles begins!

I'd want to take the value of persona.id and send it to another component that is a child root of the Contact Component

So I've created Contactes component (sry for the similar name) and I want to display in HTML this =

<p>profilo di {{persona.nome}} {{persona.cognome}}</p>

<p>Sesso {{persona.sesso}} </p>

<p>Id {{persona.id}}</p>

But I can't and I don't understand how pass this data to this component.

Answer 1

in Contactes component you have an id in url according to your code. if this is true you can get this id.

id = 0;
constructor(private activatedRoute: ActivatedRoute) {}

ngOninit(): void {
  this.id = +this.activatedRoute.snapshot.paramMap.get('id');
}

parameter id has to be set in route record of Contactes component.