it looks like you’re trying to print the previous URL, but it’s still coming up as null outside the subscription. I think the problem might be that the console.log statement is running before the subscription has a chance to update the previousUrl value.

Maybe try moving the console.log inside the subscription? Here’s a quick tweak to your code:

previousUrl: any = null;

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);
console.log(this.previousUrl);  // should print the previous URL now
});

Your subscription callback is executed asynchronously, but the rendering of the template access the value before that happens.

One approach would be to use a observable eg:

Component:

 @Component({
  selector: 'app-transaction-details-payments',
  templateUrl: './transaction-details.component.html',
  styleUrls: ['./transaction-details.component.css']
})
 previousUrl$ = new BehaviorSubject<string | null>(null);

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

    async getPrevUrl(){
        return firstValueFrom(this.previousUrl$);
    }
}

Template:

<p>{{previousUrl$ | async}}</p>

Every time when the previousUrl$ observable emits a new value, every subscriber get’s notified about the change.

I’ve tried creating a service and moved my code to the service and used it inside my component and it worked.

Here is my code:

Service:

 @Injectable({
      providedIn: 'root'
    })
export class UrlService {
  private previousUrlUpdated: string;
  private currentUrl: string;

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log(event)
        this.previousUrlUpdated = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl() {
    return this.previousUrlUpdated;
  }
}

ts:

this.previousUrl = this.urlService.getPreviousUrl();

As per me Subscribe is an async process so your HTML is loading before your subscribe =>get completed.
hence it is not printing in HTML but getting printed in console because its executing once the subscribe is completed

TRY This :
TS file :
previousUrl: any; // remove null
HTML code:

<p *ngIf="previousUrl">{{previousUrl}}</p>

or <div *ngIf="previousUrl"><p>{{previousUrl}}</p></div>