Present loading bar while hhtp post request is being handled

Hi i have the following method running in my Ionic 4
register.page.ts file

 register(form) {
this.authService.register(form.value).subscribe(
  result => { // your result from observer.next() in auth.service
    // success
    this.router.navigateByUrl('login');
  },
  error => { // your error from observer.error() in auth.servi
    // no success
    alert('Error detected.');
  }
);
}

And the following in my
authService.ts file

register(postData: User): Observable<any> {
return new Observable(observer => {
  this.http.post(`https://fb47b1a2.ngrok.io/register`, postData)
    .pipe(
      catchError(error => {
        return throwError(error); // if you catch any errors, pass them (rethrow) to the error block
      })
     )
     .subscribe(
       result => {
         observer.next(result); // if you receive a result, pass to register function in register.page.ts
         observer.complete(); // close the observable
       },
       error => {
         observer.error(error); // if you receive an error, pass error to register function
         observer.complete(); // close the observable
        }
      );
    });
}

These methods work perfectly but i would like to have a loading bar that appears while the HTTP request is happening and then disappear once the HTTP has succeeded or when an error is returned. I have never worked with ionic and have no idea where to put the loading bar component and how to structure it. Any help would be appreciated.

Source: New feed
Source Url Present loading bar while hhtp post request is being handled