How to get the value outside the subscription?

I want to get the previous route and print it's value in the HTML file. But nothing is getting printed. The value is still null outside the subscription.

This is my code snippet:

TS file:

@Component({
selector: 'app-transaction-details-payments',
templateUrl: './transaction-details.component.html',
styleUrls: ['./transaction-details.component.css']
})
previousUrl: any = null;

ngOnInit(){
this.router.events.pipe(
filter((event) => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
this.urlService.setPreviousUrl(this.previousUrl);

this.getPrevUrl();
});
}

getPrevUrl(){
console.log(this.previousUrl) //getting the correct value but this value is not getting printed in HTML.
}


HTML code:

<p>{{previousUrl}}</p>

Continue reading...