Return value from Angular function

Question

I am trying to make the connection to the backend in my application but I want to show a snackbar with the response I receive, but when I call the endpoint in charge of the action I can't get a response if it was correct or not, from the back if I get it and in the endpoint if I have the response but in my function where I call it I don't get it.

I have the function as follows and it is called by a button

button function

sendData(data:any, endPoint:any){
console.log(this.dataService.postForm(data,endPoint))
** I want to get the response here, but i got "undefined" 

}

Endpoint:

postForm(dataPost:any, endPointValue:any){
    this.http.post<any>(`${this.BASE_URL}${endPointValue}/`, dataPost).subscribe((response) => {
        console.log(response)
        this.router.navigate(['main']);
    }, err => {
        alert("404")
        this.router.navigate(['main']);
    });
}

This is something that i want to do

postForm(dataPost:any, endPointValue:any){
    this.http.post<any>(`${this.BASE_URL}${endPointValue}/`, dataPost).subscribe((response) => {
        console.log(response)
        this.router.navigate(['main']); *This is not working too
        return response ** I want to catch this response
    }, err => {
        alert("404")
        this.router.navigate(['main']); *This is working
    });
}

Answer 1

postForm(dataPost:any, endPointValue:any){
this.http.post<any>(`${this.BASE_URL}${endPointValue}/`,    dataPost).subscribe((response) => {
    console.log(response)
    this.router.navigate(['main']).then(()=>{
      return response;
     });
    
}, err => {
    alert("404")
    this.router.navigate(['main']);
});

}