what is efficient way to post data from external application to Angular App and show the result in external application as a pop up?

Question

I have a requirement where, when user click on a link in external application (.net framework web app) then i need to post some data to angular application.

Then that angular app will give web-api call and display the result as a pop a up int external application browser.

I know angular is for client side and it can not accept post request.

If i call api directly from external app then api will return the data but how should i bind the data to angular component so that it could be displayed as a pop up in external app.?

Answer 1

Oh my, this one is interesting. Depends on what you want to do.

Redirect with parameters

• Start the .net application
• Post from the .net application
• Redirect to your angular application with some get parameters, telling to show what it wants

Communicate via local storage (option if you have the angular tab already open. Make the app listen to local storage changes, and update storage from the .net application.

Simple example of listening

// Listen to storage, this way
window.addEventListener("storage", this.storageEventListener.bind(this));


private storageEventListener(event: StorageEvent) {
 if (event.storageArea == localStorage) {
      // Read some value
      // do something with the value
 }
}

Use some server push technology. This one would be your best bet if you open the application in several, different browsers (thus they don't have access to the same local storage).

For some examples on signalR - check this.

Answer 2

However it's a better practice to have a separate service file and a component file but simply do something like this in your component:

import { Component, OnInit } from '@angular/core';
import { HttpClient} from '@angular/common/http';


@Component({
  selector: 'app-example',
  templateUrl: './app-example.component.html',
  styleUrls: ['./app-example.component.scss']
})
export class AppExampleComponent implements OnInit { 

   public dataSource: any;

   constructor(private _http: HttpClient){}

   ngOnInit() {
    this._http.get("your WebApi link here").subscribe( (data) => {
       this.dataSource = data.data; 
    });
   }

}

By this method you can retrieve the data from webApi that provide a GET API. and in dataSource variable is your data that can render it in the HTML file.

Answer 3

Bind the external link to a route of your angular app. By clicking the link angular app will initiated and in the required component, in the ngOnInit() method of the component make an http request to retrieve the data and the displaying.

Hope this can help you and let me know if there is any other question.