How do I pass data from a SELECT field on the page outside of my Angular project?

Question

My page is half Angular 7 and half JSP. When a value is selected on a SELECT field in the JSP portion of the page, which is outside of the Angular application, I want to send that value to my Angular 7 app and trigger it to update with the new value. How do I inject the value into the Angular application, and secondly, how do I trigger the application to update using the new value?

Answer 1

I don't think that there's any mechanism directly supported by Angular for doing this.

There are, however, a couple of possible "hacks".

One is to communicate through either SessionStorage or LocalStorage, as explained in Communication between tabs or windows

Another option might be to run a websocket server as part of your back-end server, and relay messages between the two halves of your app via the websocket server.

Answer 2

Maybe this simple approach could help you.

First perform a redirection from your JSP App with the selected parameter in the URL directly to your Angular app.

http://localhost:4200/capture?item=value

Then your Angular app should have a defined route and a Component to capture & handle this data.

 export class CaptureComponent implements OnInit {

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.captureParams(this.route.queryParams);
    }

    captureParams(params$: Observable<Params>){
      params$.subscribe(params => {
      // do somehting with the params
      console.log(params);
    });
    }
}

Finally, in your routes definition, an entry point to the CaptureComponent:

const routes: Routes = [
  {path: 'capture', component: CaptureComponent},
  ...
]