Retrieving image from FireStorage once Signed Up through a service in Angular

Good day Developers i have being doing this app struggling without previous knowledge of Angular, and right now im bit stocked in this problem .Basically i set all logic for once user gets signed , the data referring to his image gets stored in fire/storage . All this was done in the same component referring to sign up, but lets say i want to retrieve any time user signs that image as Avatar for his profile , but i dont know how to solve it.Guess, all the logic should be move to a service class, but cant't find the way. Here part of what i have done :

HTML tag referring to user image selecting for SignUp Component
   <form id='formSignUp' [formGroup]='ngForm' (submit)="signUp()">
          <div>
            <label for="imageUser">Upload image</label>
            <input type="file" class="form-control" id="imageUser"  placeholder="Select image" formControlName="imageUser"
              #imageUpload (change)="selectImg($event) " accept='image/**'>
          </div>
.....more tags of Signup Form

then referring to that method (selectImg($event)) which grabs the event for the selected image , in the SignUp Component, established a condition that according with the data brought with the event might set in the variable imageSelected or not as the following :

SignUp Component

imports....

export class SignupComponent implements OnInit {

  ngForm: FormGroup
  defaultImage: string;
  imgSelected: any;

    constructor(
    private signUserUp: Service,
    private router: Router,
    private imgUploader: AngularFireStorage,
    private createDoc: AngularFirestore,
    private UserAuth: AngularFireAuth,){}

   async selectImg(event: any) {
    if (event.target.files && event.target.files[0]) {
      const imageReader = await new FileReader();
      imageReader.onload =async (imgCharger: any) =>
        (this.defaultImage =await  imgCharger.target.result);
     await  imageReader.readAsDataURL(event.target.files[0]);
      this.imgSelected =await  event.target.files[0];


    } else {
      this.defaultImage =await  '/assets/imgs/defaultUser.png';
      this.imgSelected =await  null;
    }
  }
}

And in the same component inside the function signUp i just evolved all the logic to first store that image selected in fire/sorage and then retrieve it .

SignUp component too

signUp() {

   this.signUserUp.signUpUser(this.ngForm.value as SignUpData)

     ....   some code before.....

    const storagePath = `${
      this.ngForm.value.emailUser
    }/${this.imgSelected.name}`;


    const refStorage = this.imgUploader.ref(storagePath);
   this.imgUploader
      .upload(storagePath, this.imgSelected)
      .snapshotChanges()
      .pipe(
        finalize(() => {
          refStorage.getDownloadURL().subscribe((urlImg) => {
            this.ngForm.value.imageUser = urlImg;
          });
        })
      );
  }

until here process keeps fine but only images gets retrieved on the signup form , cause all the logic is set in its component , but lets say once the image get sored i want to access it from either other components in the app .How could i set this processes of imageSelect()method and the code referring to path and storing of images inside the signUp() method in the service?

Service 

imports

export interface SignUpData {
  nameUser: '';
  emailUser: '';
  passwordUser: '';
  imageUser: '';
}

@Injectable()
export class LoginService {
constructor(
    private userLogin: AngularFireAuth,
    private docCreator: AngularFirestore,
    private router: Router,
    private storage: AngularFireStorage
  ) {}

  ngOnInit(): void {}

   selectImg(event: any) {
    .....some code....
    LOGIC ESTABLISHED IN SIGNUP COMPONENT IN METHOD SELECT IMG() BUT HERE NOW??????
   }

   async signUpUser(signUpData: SignUpData) {
    let { nameUser, emailUser, passwordUser, imageUser } = signUpData;
    .....some code....

     LOGIC ESTABLISHED IN SIGNUP COMPONENT IN METHOD SIGNUP() BUT HERE NOW??????
   }
}

Any advice about how could i improve ?Thanks in advance!!!