Get data from firestore database in ionic angular

I want to get the data from my "Reservas" collection to show it in my profile page but I dont know how to do that, and can I get the email from the collection "User" and save it in the collection "Reservas", here is my reservas code:

reservas.service.ts

``` import { inject, Injectable } from "@angular/core";
import { addDoc, collection, Firestore } from "@angular/fire/firestore";

@Injectable({
providedIn: 'root',
})
export class ReservasService {
private firestore = inject(Firestore);
constructor( ) { }

async guardarReserva(fechaInicio: any, lugares: any, puertoSalida: any, noches: any, huespedes: any, nombreCamarote: any, numeroCamarotes: any, nombreCrucero: any) {
const obj ={
"fechaInicio" : fechaInicio,
"lugares" : lugares,
"puertoSalida" : puertoSalida,
"noches" : noches,
"huespedes" : huespedes,
"nombreCamarote" : nombreCamarote,
"numeroCamarotes" : numeroCamarotes,
"nombreCrucero" : nombreCrucero
};

const Ref = collection(this.firestore, 'Reservas');

await addDoc(Ref, obj);
}
} ```


reservar.page.ts

``` import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterLink } from '@angular/router';
import { MenuController } from '@ionic/angular';
import { ReservasService } from '../reservas.service';
import { AlertController } from '@ionic/angular';

@Component({
selector: 'app-reservar',
templateUrl: './reservar.page.html',
styleUrls: ['./reservar.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, RouterLink, IonicModule, ReactiveFormsModule ]
})
export class ReservarPage implements OnInit {

today: any;

ngOnInit(){
this.getDate();

}

getDate() { const date = new Date(); this.today = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2); console.log(this.today); }

cruceros=[

]

lugares = [

]

puertos = [

]

camarotes = [

]

onCruceroChange() {

}

onLugarChange() {

}

compareFn(o1, o2) {
return o1 && o2 ? o1.id === o2.id : o1 === o2;
}

calcularCamarotes() {
const huespedes = this.reservaForm.value.huespedes || 0;
const numeroCamarotes = Math.ceil(Number(huespedes) / 4).toString();
this.reservaForm.patchValue({ numeroCamarotes });
}

reservaForm = new FormGroup({
fechaInicio: new FormControl("", Validators.required),
lugares: new FormControl(null, [Validators.required]),
puertoSalida: new FormControl("", [Validators.required]),
noches: new FormControl("", [Validators.required]),
huespedes: new FormControl("", [Validators.required]),
nombreCamarote: new FormControl("", [Validators.required]),
numeroCamarotes: new FormControl("1", [Validators.required]),
nombreCrucero: new FormControl(null, [Validators.required])
})

async onSubmit(){
await this.reservasService.guardarReserva(
this.reservaForm.value.fechaInicio,
this.reservaForm.value.lugares,
this.reservaForm.value.puertoSalida,
this.reservaForm.value.noches,
this.reservaForm.value.huespedes,
this.reservaForm.value.nombreCamarote,
this.reservaForm.value.numeroCamarotes,
this.reservaForm.value.nombreCrucero)
}

async alertaReserva() {
const alert = await this.alertController.create({
header: '¡Crucero Reservado Con Éxito!',
message: 'Si quieres ver o cancelar tus reservas, lo puedes hacer desde tu perfil',
buttons: ['Action'],
});

await alert.present();
}

constructor(public menu: MenuController, public reservasService: ReservasService, private alertController: AlertController) {
this.menuActive();
this.lugares = this.lugares;
this.puertos = this.puertos;
}

menuActive(){
this.menu.enable(true, 'menu');
}

} ```


reservar.page.html

´´´ <ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Reservar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="reservaForm" (ngSubmit)="onSubmit()">
<ion-item class="titulo" color="primary">
<ion-title>Nuestra Flota</ion-title>
</ion-item>
<ion-item>
<ion-select label="Crucero:" placeholder="Escoge un crucero" name="nombreCrucero" formControlName="nombreCrucero" [compareWith]="compareFn" (ionChange)="onCruceroChange()">
<ion-select-option *ngFor="let crucero of cruceros" [value]="crucero" type="text">{{ crucero.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Lugares para visitar</ion-title>
</ion-item>
<ion-item>
<ion-select label="Lugares para visitar:" placeholder="Que lugares quieres visitar" name="lugares" formControlName="lugares" [compareWith]="compareFn" (ionChange)="onLugarChange()">
<ion-select-option *ngFor="let lugar of lugares" [value]="lugar" type="text">{{ lugar.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Escoge el puerto de salida</ion-title>
</ion-item>
<ion-item>
<ion-select label="Puerto de Salida:" placeholder="Escoge el puerto de salida" name="puertoSalida" formControlName="puertoSalida" [compareWith]="compareFn">
<ion-select-option *ngFor="let puerto of puertos" [value]="puerto" type="text">{{ puerto.name }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de noches</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de noches:" placeholder="Escoge el número de noches" name="noches" formControlName="noches" type="number"></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Cantidad de huéspedes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de huéspedes:" placeholder="Escoge el número de huéspedes" name="huespedes" formControlName="huespedes" type="number" (ionInput)="calcularCamarotes()"></ion-input>
</ion-item>
<div style="text-align: center">Cada 5 huéspedes se te añade otro camarote</div>
<ion-item class="titulo" color="primary">
<ion-title>Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-select label="Camarote:" placeholder="Escoge un camarote" name="nombreCamarote" formControlName="nombreCamarote" [compareWith]="compareFn">
<ion-select-option *ngFor="let camarote of camarotes" [value]="camarote" type="text">{{ camarote.name }}</ion-select-option>
</ion-select>
</ion-item>
<div style="text-align: center">Puedes ver todos los camarotes en la sección "Camarotes" dentro de cada crucero</div>
<ion-item class="titulo" color="primary">
<ion-title>Número de Camarotes</ion-title>
</ion-item>
<ion-item>
<ion-input label="Número de camarotes:" placeholder="Escoge el número de camarotes" name="numeroCamarotes" formControlName="numeroCamarotes" [value]="reservaForm.value.numeroCamarotes" readonly></ion-input>
</ion-item>
<ion-item class="titulo" color="primary">
<ion-title>Fecha de Inicio del Crucero</ion-title>
</ion-item>
<ion-datetime [min]="today" class="fecha" presentation="date" name="fechaInicio" formControlName="fechaInicio"></ion-datetime>
<div class="boton">
<ion-button type="submit" (click)="alertaReserva()" [disabled]="reservaForm.invalid">Reservar</ion-button>
</div>
</form>
</ion-content> ´´´


I had to delete some code because it was a lot of unnecesary characters for this question

Continue reading...