Как в сервисе Angular 9 получить данные из Firebase Realtime Database и передать их компоненту?

Изучаю Angular 9 !!!Вопрос в следующем: как в сервисе(Angular) получить данные (как получить данные, в принципе, я знаю) записать их в массив ,ну и соответственно данные отобразить в компоненте! Неделю сижу, получаю в компоненте в методе ngOnInit() пустой массив , перебрал все что знаю на данный момент...Ничего... Ниже код сервиса(он может быть и вовсе неверный ,т.к. только начал изучать данный фреймворк),в компоненте ничего нет,кроме того ,что в методе ngOnInit() в консоль проверяю данные сервиса(console.log(this.AuthInitialization.userInfo) === []):

import { FirebaseServiceService, UserData } from './firebase-service.service';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Router } from '@angular/router';

export interface UserInfo {
  avatar: string,
  name?: string
}

@Injectable({providedIn: 'root'})
export class AuthInitialization {

  private isAuth: boolean
  invalidDataMessage: boolean  = true
  userInfo: UserInfo[] = []
  userData: any = JSON.parse(localStorage.getItem('PostBy'))

  constructor(
    private firebaseService: FirebaseServiceService,
    private router: Router
    ) {
      if(this.userData !== null) {
        this.firebaseService.firebase.database.ref('Users/' + this.userData[0].username).on('value', (resp: any) => {
          this.isAuth = resp.val().access
          this.userInfo = [
            {
              avatar: resp.val().profile,
              name: resp.val().name
            }
          ]
        })
      }
    }

Хотелось бы в компоненте получить эти данные , а так this.userInfo , как ни кручу - пустой массив , хотя если в консоль вывести сам Сервис , то в нем присутствует userInfo с данными ,но извлечь их не могу ,то ошибка ,то undefined...Пожалуйста помогите !!!И еще данные нужно получать не по нажатию на кнопку или еще по каким-нибудь манипуляциям...Загрузка приложения - будет проверка- получить и вывести данные ...