Combining URLs in Angular 6 - A Step-by-Step Guide

How can I concatenate the commonUrl from CommonClass in Angular 6 for category.service.ts?

common-class.ts

export class CommonClass {
  constructor(public commonUrl : string = 'http://localhost:3000'){};
}

category.service.ts

import { CommonClass } from '../classes/common-class';
commonUrlObj : CommonClass = new CommonClass();

saveNewCategory(formData){
  return this.http.post('this.commonUrlObj.commonUrl'+''+'/saveNewCategory',formData).map((res: any) => res.json());
}

getCategoryDetails(param){
  return this.http.post('this.commonUrlObj.commonUrl'+''+'getCategoryDetails',param).map((res: any) => res.json());
}

Answer №1

If you're looking for a suggestion, my recommendation would be to opt for a string literal. By using backticks ` instead of single quotes ', you can easily construct the URL like this: `${this.commonUrlObj.commonUrl}/saveNewCategory`

Answer №2

eliminate apostrophes in the string this.commonUrlObj.commonUrl

addCategory(formData){
  return this.http.post(this.commonUrlObj.commonUrl+'/addCategory',formData).map((response: any) => response.json());
}

Answer №3

Make sure to exclude the apostrophes and it will function correctly.

execute this.http.post(this.commonUrlObj.commonUrl+'/addNewCategory',formData).map((res: any) => res.json());

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

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Utilizing the Router from the package next/router allows for a dynamic URL and loading of different content on the page: Router.push('/contract', `/contract/${id}`); An issue arises where the back button does not function as expected after runni ...

Developing with Phonegap Build: A Guided Process

With all the conflicting information available, I am seeking clarity on this topic. Objective: To create and enhance a Phonegap app using Phonegap Build. 1) My preference is to utilize Phonegap Build without needing to install Android and iOS SDKs. 2) I ...

What is the reason behind my difficulty in opening my dialog box modally using JavaScript?

I am looking to keep a dialog open while data is being fetched from the server. Here is the code I have written: (async()=>{ document.getElementById("dialog").showModal(); if(condition1 is true){ await server_call1(); } ...

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

ReactJS instance.render function error: How to solve it?

I encountered a strange error message while working with reactjs, which states that instance.render is not a function in reactjs. Despite my efforts, I have been unable to identify the source of this error. Below are the contents of index.js and search_bar ...

What are the benefits of keeping synchronous state in the Redux store?

Is it necessary to store non-async state in the Redux store? For instance, when dealing with a modal that simply shows or hides, is it worth the extra work to toggle it within the store? Wouldn't it be simpler to just keep it as local state in the Rea ...

Performing API requests in NextJS using Prisma on a client-side page

Currently, I am faced with a challenge in fetching data from my database on a NextJS page designated as a client page using "use client" as required by the theme I am working with. At the moment, I have a page that fetches data from the database and redire ...

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

Having issues with Phonegap's getPhoto functionality

Even though the documentation here seems to be effective, I encountered an issue when implementing the code into my application. The getPhoto function returns 'content://media/external/images/media/16053' without loading the image into the img el ...

Despite the onsubmit returning false, the submit operation still goes through

I seem to have hit a roadblock yet again. My registration form incorporates three JavaScript functions which display the desired output when triggered by an onchange event within my HTML form. These functions generate a Bootstrap alert while the user is co ...

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

I'm seeking assistance in understanding the malfunction of this particular function

I am struggling to create a basic function that is supposed to check whether a value is a number and not greater than 100. I'm confused as to why it's not working. Can someone explain if mixing jQuery and JavaScript is causing the issue? $(' ...

What are the steps to create a unique popup div effect with jQuery?

Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this? ...

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

Currently waiting for the $resolved property of the AngularJs service

Here's a straightforward issue with what I hope is an equally simple solution. I've set up multiple services for handling CRUD operations with tags. myApp.factory('GetTags', ['$resource', function ($resource) { return $re ...

Changing a password on Firebase using Angular 5

I am in the process of developing a settings feature for user accounts on an application I've been working on. One key functionality I want to include is the ability for users to update their password directly from the account settings page. To enable ...

Can you explain how JSON and AJAX are different when used in conjunction with jQuery?

Is it true that JSON serializes all data, preventing problems with client-side issues like cross-browser support? I've found using AJAX with jQuery to be straightforward, but I'm still unclear about the differences. I have also come across anot ...

What causes JavaScript parseFloat to add additional value in a for loop implementation?

I am facing a challenge where I need to convert an array of strings into an array of decimal numbers. The original array of strings is structured like this: var array = [" 169.70", " 161.84", " 162.16", " 176.06", " 169.72", " 170.77", " 172.74", " ...

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...