Angular 12 front end returning encoded get request

I'm using mysql for my db, spring for my backend and angular for my frontend. my frontend is throwing this weird bug when its routed proper: click here to see it

as you can see, the path at the end is %7Bid%7D (looks like {id} from the backend)
the http error code is always one of 3: 400,400 or 500
the backend looks okay and I've only really ever gotten this error code:

2022-02-04 15:30:31.465  WARN 15200 --- [nio-8081-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "{id}"] 

here is the controller in question(a get request):

@CrossOrigin
@RestController
@RequestMapping(path = "/api/patient")
public class PatientPortalController {
    @Autowired
    private PatientPortalRepo patientPortalRepo;

    @PostMapping("/patientportal")
    public PatientPortal createPatientPortal(@RequestBody PatientPortal patientportal) {
        return patientPortalRepo.save(patientportal);
    }
    
    
    @GetMapping("/patientportal/{id}")
    public ResponseEntity<PatientPortal> getpatientPortal(@PathVariable Long id){
        PatientPortal patientportal = patientPortalRepo.findByPatientPortalId(id);
        if(patientportal.getId()>0 && patientportal!=null)
            return new ResponseEntity<PatientPortal>(patientportal, HttpStatus.OK);
        return new ResponseEntity<PatientPortal>(patientportal, HttpStatus.BAD_REQUEST);
    }}

Some things worth of note that I've tried with the backend
Tried changing response entity to of type long and returning id, tried refactoring the controller numerous times, tried changing decorators/paths around, 20x checked the types are correct, checked if any types other than the id are throwing it, checked if I had any security implemented that was denying access, checked if adding a onetoone would get it to pop up on the front end. It works fine on the backend(returns a list of what I'd assume is patientportal object) but I am either routing incorrectly, there is some security I'm missing, there is some type error, or there is some logic errors. I think however the issue lies in the front end.
here's the code where I call the front end method hard coded a value to test:

this.patientloginservice.loginPatient(this.patient).subscribe(data=>(this.route.navigate(['api/patient/patientportal/1'])),error=>console.log('error'));

and here is where that code is serviced:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
import { PatientPortal } from './patientportal';

@Injectable({
  providedIn: 'root'
})
export class PatientService {

  private baseURL = "http://localhost:8081/api/patient/patientportal";

  constructor(private httpClient: HttpClient) { }

  getPatientPortalList(): Observable<PatientPortal[]> {
    return this.httpClient.get<PatientPortal[]>(`${this.baseURL}`);
  }

  createPatientPortal(patientportal: PatientPortal): Observable<Object>{
    return this.httpClient.post<Object>(`${this.baseURL}`, patientportal);
  }

  getPatientPortalById(id: number): Observable<PatientPortal>{
    return this.httpClient.get<PatientPortal>(`${this.baseURL}/{id}`);
  }

  updatePatientPortal(id: number, patientportal: PatientPortal): Observable<Object>{
    return this.httpClient.put(`${this.baseURL}/{id}`, patientportal);
  }

  deletePatientPortal(id: number): Observable<Object>{
    return this.httpClient.delete(`${this.baseURL}/{id}`);
  }
}

any help will be much appreciated, thank you. again like I said the route routes correctly as far as I can tell, but the rendered table does not fill data and it throws that error. I am using a login that is to redirect/route to a patient's details.

You're using Template literals incorrectly.

Instead of just {id} it should be ${id} just like what you did with ${this.baseUrl}

Hope that solves your issue.