Impossible to display username

Ionic Framework Ionic Angular
1

Hi, i got a problem that i can’t solve. I would like to display the current username in profile page but i can’t.
Here are my codes.

register.page.html

                <ion-item>
                    <ion-input type="text" placeholder="Nom utilisateur" [(ngModel)]="dataNewUser.username"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-input type="email" placeholder="Email" [(ngModel)]="dataNewUser.email"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-input type="password" placeholder="Mot de passe" [(ngModel)]="dataNewUser.password"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-input type="password" placeholder="Confirmer mot de passe" [(ngModel)]="dataNewUser.cpassword"></ion-input>
                </ion-item>

register.page.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { ToastController, NavController, ModalController, PopoverController } from '@ionic/angular';
import { auth } from 'firebase';
import  * as firebase from 'firebase'; 
import { AngularFirestore } from '@angular/fire/firestore';
import { UserService } from '../user.service'
import { from } from 'rxjs';
import { AngularFireStorage } from "@angular/fire/storage";
import { url } from 'inspector';
import { Router, NavigationExtras } from '@angular/router';
import { DataApiService } from '../services/data-api.service';

@Component({
  selector: 'app-creer-compte',
  templateUrl: './creer-compte.page.html',
  styleUrls: ['./creer-compte.page.scss'],
})
export class CreerComptePage implements OnInit {

  dataNewUser={
    email:'',
    username:'',
    password: '',
    cpassword: '',
  }
  constructor(
    public afAuth: AngularFireAuth,
    public toastController: ToastController,
    public firestore: AngularFirestore,
    public storage: AngularFireStorage,
    public nav: NavController,
    private popoverController: PopoverController,
    private router: Router, 
      ) { }

  ngOnInit() {
  }

  async signUp(){
    const res=  (this.dataNewUser.username, this.dataNewUser.email, this.dataNewUser.password, this.dataNewUser.cpassword)
    if(this.dataNewUser.password!==this.dataNewUser.cpassword){
      this.toast_mdp_differents();
      return console.error("Les mots de passe ne sont pas identiques")
    }
    if(String(this.dataNewUser.password).length<6){
      this.mdp_min_6_caracteres();
    }
    
      try{
        const res = await this.afAuth.createUserWithEmailAndPassword(this.dataNewUser.email,this.dataNewUser.password)
        console.log(res)
        this.firestore.collection("Utilisateurs").add({
          username: this.dataNewUser.username,
          email: this.dataNewUser.email ,
        });
        }catch(error){
      console.dir(error)
      this.toast_mail_deja_existant();
    }
  }

profile.page.html

<ion-item >
        <ion-label >  //USERNAME SLOT  </ion-label>  
      </ion-item>

profile.page.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from "@angular/fire/firestore";
import { Observable} from 'rxjs';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  
  
  userId: string;
  mail: string;
  username: any;
  items: Observable<any[]>;
  

  
  
  constructor(
    public afAuth: AngularFireAuth,
    public firestore: AngularFirestore,
  ) 
  {
   this.items = this.firestore.collection('Utilisateurs').valueChanges();
   this.afAuth.authState.subscribe(auth => {
      if (!auth) {
        console.log('non connecté');
      } else {
        console.log('connecté: ' + auth.email + auth.uid);
        this.userId = auth.uid;
        this.mail = auth.email;
        }
    });
   }
}

I really need help :sob:
thanks.

2

A couple of organizational things that will hopefully design away your immediate problem:

Don’t reinvent form validation. Use reactive forms instead.

Abstract everything involving data acquisition and propagation (including everything Firebase-related) into a service. Get all mention of AngularFire out of all pages. Pages shouldn’t know or care where their data is actually gotten or stored.