Sharing the value of a Mat select component from a component file to a service file in an Angular application

I need assistance with passing the value of a mat-select dropdown from the component file to the service file in my API setup. Currently, I have the country code hardcoded as 'au', but I would like it to be set dynamically based on the selected value from the mat-select dropdown.

Here is the code snippet for fetching the mat-select value in the Component File:

onCountrySelection() {
console.log(this.countryValue);
}

This is how the API is implemented 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 }); 
}

I am looking for a way to pass the console.log value from the Component to the Service file. Can anyone provide guidance on how to achieve this?

Answer №1

Here's a different approach for you to consider:

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

}

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

Working with JSON data and extracting specific information within the grades

Here is a JSON data structure that contains information about a student named Alice and her grades in various courses: { "student": [{ "cert_id": "59826ffeaa6-b986fc04d9de", "batch_id": "b3d68a-402a-b205-6888934d9", "name": "Alice", "pro ...

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

tips for accessing data attributes in ajax request

I am struggling to retrieve data-id from an anchor tag when clicked using AJAX, but it keeps returning undefined. Below is my code: $image_html .= '<a class="float-left " onclick="modal()" data-toggle="modal" data-targ ...

Retrieve the second occurrence of a regular expression match

I'm currently working on extracting the second occurrence in a regular expression string. Let's consider a domain name: https://regexrocks.com/my/socks/off We want to replace everything after .com $this.val($this.val().replace(/(([^.]*.)[^]?. ...

Unveiling the Mystery of Undefined Returns in Angular/Karma Component Testing

I'm currently facing an issue while writing an angular test for a small reusable component. The objective is to emit an event when the component is clicked, simulating a button click on the DOM. However, I am encountering an "undefined" error with the ...

"Learn the process of distinguishing between a drop-down value and a selected value within a drop-down menu using angular2-multiselect

I need assistance with a requirement involving a multi-select drop-down menu where the values are in the format of "Code - Name". When an option is selected from the drop-down, only the "Code" should be displayed. I am currently using angular2-multiselec ...

Is it possible to use multiple routes in the same page with Vue-router?

In the process of developing a Vue-based web application that utilizes vue-router in history mode, everything was functioning smoothly for navigating between various pages. However, a new request has been made to open certain pages within a virtual dialogu ...

Do you know if there is a specific way to insert conditional template values?

Within my angular template (version 2.4.9), there is a specific element that I need to modify based on certain conditions: <div *ngIf="a || b || c || d || e">Remaining</div> Now, I am tasked with changing the static "Remaining" text in respon ...

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

Working with intricately structured objects using TypeScript

Trying to utilize VS Code for assistance when typing an object with predefined types. An example of a dish object could be: { "id": "dish01", "title": "SALMON CRUNCH", "price": 120, ...

The functionality of findDOMNode is no longer supported

My website, built using React, features a calendar that allows users to select a date and time range with the help of the react-advanced-datetimerange-picker library. However, I encounter some warnings in my index.js file due to the use of <React.Stric ...

What steps can I take to stop Google Maps from resetting after a geocode search?

As a beginner working with the Google Maps Javascript API v.3, I have written some code to initialize a map, perform an address lookup using the geocoder, re-center the map based on the obtained lat long coordinates, and place a marker. However, I am facin ...

Filtering an array dynamically in Typescript depending on the entered value

My task involves filtering arrays of objects based on input field values. Data data: [{ taskname: 'Test1', taskId: '1', status: 'Submitted' }, { taskname: 'Test2', taskId: '2', status: 'Re ...

Display the map using the fancybox feature

I have added fancybox to my view. When I try to open it, I want to display a map on it. Below is the div for fancybox: <div id="markers_map" style="display:none"> <div id="map_screen"> <div class="clear"></div> </div&g ...

Assigning index values to child rows in AngularJS: a step by step guide

One of my requirements involves assigning index values to child rows. The structure includes group rows with child rows underneath. Currently, I am using ng-repeat along with $index for the children as shown below: HTML code: <table ng-repeat="nod ...

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

I recently developed a Meteor project using ReactJS. I have a Create/Edit page where I use the same input field for various form elements. Here is an example of code snippet that I currently have: <FormGroup> <ControlLabel>Province</Control ...

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...

Combine two observables that are nested inside each other into a single observable

Combining two nested observables into one is my goal. The first observable listens for valueChanges on an input, while the second queries the database. I expect to have a single observable that I can utilize with an async pipe in my Angular template. In t ...

Incorporating Anchor Text as the Title in Real-Time

As of now, I have this snippet of HTML code <a href="http://www.google.com">Google Website</a><br /> <a href="http://www.yahoo.com">Yahoo Website</a><br /> <a href="http://www.bing.com">Bing Website</a& ...

The undefined value of a Checkbox Change Event in Angular 8

I'm attempting to run a function when a checkbox is checked/unchecked, but I couldn't access the checkbox.checked property as it's showing as undefined. Here is the HTML: <input type="checkbox" (change)="eventCheck($event)" /> And h ...