Send data from one application to another in Angular.

Aplication data transfer.

Big companies probably have at least a couple applications. Sometimes you may need to send some data from one application to another. How can we do that? We can add data as query parameters or if applications have the same domain address we can use cookies.

Query parameters

Let’s create a query parameter service. This service will have two methods, one to add query parameters in the URL and change the URL. Another method will get a query parameter from the URL. In this example method, ‘addQueryParameter’ will go to the same URL address with query parameters.

We could create an ‘addQueryParameter’ that accepts an object. We just need to convert an object to a string. Do not forget about query parameter limitations. If you want to send data by query parameters I suggest sending a small amount of data.

Query parameters in JS

We can add and get query parameters from the URL using the JS.

Cookies

If applications are running in the same domain we can store data in cookies or session storage. Because your application has the same domain they also are using the same cookies.

To use cookies in our angular application we need to install the ngx-cookie-service package. For that we need to use the next command:

npm install -save ngx-cookie-service

After installing the package we must add a CookieService in our module in the provider section.

We can use a CookieService from ngx-cookie-service package directly in components or we can create a wrapper. In this example, I decided to make a wrapper. Our wrapper wraps a couple methods of CookieService like get(key), set(key,value), check(key), delete(key). The only difference is our wrapper stores a key as private property. In this case, we are always sure that we use the same key.

Now we have everything that we need to save information in cookies. The plan is simple: we save information in one application in cookies then another application gets information from cookies. Of course, we need to use the same key.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on April 16, 2022.