Angular - Navigating to route with result of observable

Question

I have an interesting issue that I can't seem to figure out.

I am making a HTTP request which is returning an Observable. I am subscribing to the observable and using the value as a parameter to my route when calling router.navigate. The navigation works correctly but when I land on the new route I can't click anything, the page is completely locked. As soon as I refresh the page everything works as expected.

Code snippet below for reference.

createTemplate() {
    this.templateService.create(this.templateModel)
        .subscribe(template => {
          this.router.navigate(['/admin/templates/builder', template.id]);
      });
    }

Answer 1

What this.templateService.create method does? What kind of Observable returns?

Maybe you have to close the subscription?

createTemplate() {
    this.templateService.create(this.templateModel)
        .pipe(first())
        .subscribe(template => {
          this.router.navigate(['/admin/templates/builder', template.id]);
      });
    }