Sending selected value from Mat-Select to header during API Call: A step-by-step guide

I'm dealing with an API that requires the country code in the header along with an authorization token and Bearer. In my component file, I am able to fetch the value from a mat-select dropdown. However, the setting for the API header and token is done in the service file. Can someone assist me in passing the mat-select value from the component to the service file?

Currently, I have hardcoded the country value as 'au', but I want it to be set dynamically based on the mat-select dropdown value.

Below is the code snippet to fetch the mat-select value in the Component File:

onCountrySelection() {
  console.log(this.countryValue);
  sessionStorage.setItem('countryCode', this.countryValue);
}

Here's how the API is defined in the Service Class File:

uploadConfig(templateName, JsonBody) {
  const header = new HttpHeaders().set(
    'Authorization',
    'Bearer ' + sessionStorage.getItem('token'),
  ).set(
    'country',
    'au'
  );
  return this.httpClient.post(
    this.localUrl + '/pattern/' + templateName + '/flow', JsonBody,
    { headers: header }
  );
}

Answer №1

To enhance the functionality of your API method signature, consider adding an additional parameter:

uploadConfig(templateName, JsonBody, countryCode) {

    const header = new HttpHeaders().set(
      'Authorization', 'Bearer ' + sessionStorage.getItem('token'),
    ).set(
      'country', countryCode
    );
    return this.httpClient.post(
        this.localUrl + '/pattern/' + templateName + '/flow', JsonBody, { headers: header }
        );
}

When calling the service, make sure to include countryValue as a parameter like so:

uploadConfig(,,this.countryValue);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is jQuery still recommended for adding animations in VueJS?

In my component's methods object, I currently have the following code snippet: startImageAnimation() { $('.splash-image').fadeIn(1400, () => { setTimeout(function() { $('.splash-image').fadeOut(1400, () ...

Refreshing the Java Applet upon page reload

Is there a way to automatically refresh a .jar applet on a website without the need to quit and restart the browser? I am constantly making changes to the applet's class files and it's frustrating to have to manually refresh the applet every time ...

Which would be more effective: implementing Spring Security for role-based authorization, using Angular Route Guards, or combining both approaches?

I'm currently working on a project using Spring Boot for the backend and Angular for the front end. I'm wondering if it's best practice to implement both Spring Security role-based authentication and Angular route guards, or if just using Sp ...

Refreshing a division with ajax functionality

I have a piece of code that showcases two rows of colored image input fields. When one of the inputs is clicked, it is highlighted with a shadow effect while removing the shadow from any previously selected input field. You can view this functionality in a ...

Node.js Discord.js SQL leaderboard troubleshooting

I have successfully developed a Discord bot with message listeners that interacts with a MySQL database to store data based on specific events. Below is the code snippet I use to increment the score by +1 when a message is sent in the channel: // If a ...

Creating a dynamic multi-line list in Ionic application is a breeze!

I'm a beginner in Ionic and I am interested in creating a Multi-line List similar to how we generate list-views in Android with custom views and using an Array of custom objects programmatically. Can Multi-line Lists be generated with data from an Ar ...

Utilizing a jQuery plugin called FullCalendar, dynamically create and set events using a

Using the jQuery full calendar, I am looking to dynamically set events. Here are some examples of events I need to set: events: [ { title: 'Long Event', start: '2016-09-07', ...

Instagram API Geography Subscription CORS Problem: A Troubleshooting Guide

I'm encountering an issue while attempting to send a POST request to the Instagram Geography Subscription API endpoint. Similar to others, I am facing the following error: OPTIONS https://api.instagram.com/v1/subscriptions/ XMLHttpRequest c ...

Activate the search feature in select2 to allow multiple selections

I'm looking for a way to incorporate a search box into my multi-select fields using select2. Oddly enough, while the search boxes show up as expected in single-select fields, applying the same select2() function to a multi-select field doesn't s ...

What is the most effective method for locating and updating an object within an array using JavaScript?

I have a list of products structured like this: var itemsList = [ { id: 'as5', name: 'Coca-Cola', price: 17.5, unit: 'Bottles', quantity: 23 }, { id: 'q7s ...

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

Can you explain the purpose of the curly braces found in a function's parameter definition?

I am currently working on an Angular 5 project and came across this intriguing Typescript code snippet. (method) CreateFlightComponent.handleSave({ currentValue, stepIndex }: { currentValue: Partial<Flight>; stepIndex: number; }): void Can ...

How to solve the issue of synchronizing data fetching from a json-server and displaying it in the UI with React?

While working with json-server to retrieve data and display it in the UI, I often face a recurring issue that leaves me puzzled. The process of fetching data is asynchronous, which means that setting the state after fetching the data takes some time. As a ...

Tips for deploying an Angular application with Node.js

Currently, I've set up a nodejs backend by following a tutorial to integrate tweets into the frontend of my application. As I prepare to deploy to a development server, I have successfully built the frontend using ng build --prod. However, I am facin ...

Retrieve the selected value from a radio button

I am attempting to display the chosen value in an input field when a radio button is selected. However, the functionality seems to be broken when I include bootstrap.min.js. You can find the code on JSFiddle. $('input:radio').click(function() ...

What is the best way to create a menu in JavaScript that includes a variable declaration?

Here is the menu I've created: <a id="page1" href="" onclick="var = page1">Home</a> <a id="page2" href="" >About us</a> <a id="page3" href="" >Services</a> <a id="page4" href="" >Partners</a> <a ...

ERROR: Angular 5 encountered an issue in the common.js file at line 263 due to an undefined reference to $ st

After successfully running my Angular 5 project for a while, I suddenly encountered the following error in the console: Angular 5 common.js:263 Uncaught ReferenceError: $ st is not defined Surprisingly, the project continues to function properly despite t ...

Sending auth0 token as a parameter in $http.get request in Angular

I am encountering difficulties when trying to attach the auth0 token to a http.get request for an API that requires the token. The token is generated upon user login and stored in the browser's local storage, which is functioning properly. The challen ...

Refreshing the package using Bower

I'm facing an issue while trying to upgrade angular from version 1.0.5 to 1.0.6 using Yeoman. Despite clearing the cache and checking the Github repository, it still installs version 1.0.5. Is there a workaround to force the update to version 1.0.6? ...

What is the best way to retrieve and modify an AngularJS object within an array using its unique id value?

Let's say we have an array of objects: ctrl.items = [Object, Object, Object] Each object in the array follows this structure: {id:1, item:"item", quantity:2} These objects are displayed in the front-end using the following binding: <div ng-rep ...