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?

What do you mean by JSP portion? an iframe? If not, have you tried using a listener to that `select` by accessing to it by its `id`? — Chris Tapay, Feb 18 '19 at 05:21
Do you have a dom elemenent that could be accessed by both JSP and Angular? If so, you could use that to pass information back and forwards. — AndrewP, Feb 18 '19 at 05:25
hey what do u mean by part jsp? can you explain or give sample code — Shashan Sooriyahetti, Feb 23 '19 at 14:38
You may create an observable in Window scope and subscribe an Angular service to it. While updating its value in other part of your app. — Sergey, Feb 24 '19 at 21:34
Hi @coder we are eager to help you, but we still need some clarification from your side :) On the other hand, if any of the here presented approaches solves your issue, please consider to select the correct solution. — WSD, Feb 25 '19 at 10:53

score 4 · Answer 1 · answered Feb 16 '19 at 03:56

4

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.

answered Feb 16 '19 at 03:56

GreyBeardedGeek

29,460
2
47
67

Thanks, I tried the localStorage suggestion, but was not successful because the storage event is only triggered when the data is added to localStorage from another tab or window. the Angular app and the SELECT are on the same page. I'm still researching the websocket server suggestion. – coder Feb 17 '19 at 21:22
@coder try router snapshot, you can modify the route url and subscribe the snapshot in angularapp – Maclean Pinto Feb 18 '19 at 05:24

score 3 · Answer 2 · answered Feb 21 '19 at 16:33

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},
  ...
]

Also, you can access directly (without subscribing) to the URL params just by calling: this.route.snapshot.queryParams — WSD, Feb 21 '19 at 16:36
https://angular.io/api/router/ActivatedRoute#snapshot https://angular.io/api/router/ActivatedRouteSnapshot — JGFMK, Feb 23 '19 at 08:05

score 0 · Answer 3 · answered Feb 21 '19 at 10:23

0

Maybe it could be a option to work with custom browser events that you listen with your angular application.

E.g.: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

answered Feb 21 '19 at 10:23

DPawar

21
2

Irshad Ali · Answer 4 · 2019-03-05T05:59:14.197

Can't you use localStorage that is read by your angular component at regular interval and act if current value differ from previous value. You just require a suitable interval that does not hamper your page responsiveness.

pseudo idea

// JSP Portion Set value in localStorage

// Angular Portion

onInit(){

setInterval( function(){

// read from localStorage this.value compare with localStorage value if diiference found

// do something

}, interval }

you could also use global variable instead of localstorage.

score 0 · Answer 5 · answered Feb 25 '19 at 02:56

0

Did you try NgZone ? It is An injectable service for executing work inside or outside of the Angular zone.

answered Feb 25 '19 at 02:56

Vu Luu

792
5
16

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

5 Answers5