Sharing information between components in Angular 4 and .NET Core applications

I am new to Angular and .NET Core. I have successfully created a web api using .NET Core, which is called from an Angular 4 application. Currently, everything is working smoothly. However, after submitting a form that inserts records into the database, I would like to be redirected to a different page. When redirecting, I need to pass some data to trigger another service, which will call a different API Controller in .NET Core.

For example, let's say I create a user and then want to be directed to a new page where I can see the user's First Name, Last Name, and City. On this new page, I would also like to display all ZIP codes for the city. This requires calling a different api to retrieve all zip codes for the specific city selected by the user. While typically this functionality would exist on one page with a select list, this example helps illustrate my goal.

angulartypescript.net-core

Answer №1

Upon submitting user data, you will receive a response from the server containing all details about the newly created user. This information can then be used to populate the next step of your application.

To streamline this process, I recommend utilizing routing with parameters. You can learn more about this by visiting this link. In Angular, the internal router is commonly used instead of traditional form submissions and page redirects found in .net web forms. For additional assistance with handling http requests, refer to the http guide.

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

Encountering a Vueify Typescript error in a Vue project

Recently diving into the world of Vue, I was able to successfully create a sample app using gulp, vueify, and TypeScript. To showcase what's happening and shed light on an issue I'm facing, here are snippets of the key code segments: Menu.ts im ...

typescriptvue.jsgulp

Retrieving latitude and longitude from place id in an Angular Google Maps component

Currently utilizing the google-maps component to extract latitude and longitude from Google Maps prediction data. Additionally, I have integrated a search bar using google-maps component. I have successfully implemented a search bar with ngx-google-places ...

angulartypescriptgoogle-mapsgoogle-maps-api-3

Error message in VueJS TypeScript: Implicit declaration of type 'props' as 'any'

Currently, I am working with vue 2.6 and typescript 3.8.3. The issue arises when I attempt to apply a validator to a prop. I am encountering error message TS7006: Parameter 'props' implicitly has an 'any' type. Below is the ...

typescriptvue.js

Issue R10 (Start-up delay) -> Failure of web application to connect to $PORT in the given 60 seconds after being launched (Angular)

I am currently in the process of building an Angular 7 application and attempting to connect it to Heroku (I am fairly new to using Heroku). Upon trying to run the application on Heroku, I encountered the following error: https://i.stack.imgur.com/ySmJw.p ...

angularheroku

What is the process for creating a class in TypeScript?

Here is an example of the object structure I am working with: { "info" : { "title" : '123}, "details": [ {"desc": "d1"}, {"desc": "d2}] } I am currently in the process of defining ...

typescript

Switching between PascalCase and camelCase in TypeScript leads to unexpected behavior

Currently, I am in the process of transitioning a C# desktop application to an Angular/TypeScript web application. In the C# application, all class properties are named using PascalCase. Therefore, I decided to maintain this naming convention in the TypeS ...

arraysangulartypescriptcamelcasingpascalcasing

Create a personalized button | CKEditor Angular 2

I am currently working on customizing the CKEditor by adding a new button using the ng2-ckeditor plugin. The CKEditor is functioning properly, but I have a specific requirement to implement a button that will insert a Rails template tag when clicked. For ...

jqueryangulartypescriptckeditor

What is the reason behind tsc disregarding the include and exclude options in tsconfig.json?

I am facing an issue with my tsconfig.json file: { "compilerOptions": { "target": "ES6", "lib": [ "DOM", "ES6" ] }, "include": [ "src/server/**/*&q ...

typescripttsctsconfig

Issues with Webpack bootstrap-loader: Unable to locate './bootstrap-styles' and Unable to locate './bootstrap-scripts'

I am attempting to integrate bootstrap-loader into my angular 2 project. However, during Webpack compilation, I am encountering errors: ERROR in ./~/bootstrap-webpack/index.js Module not found: Error: Can't resolve './bootstrap-styles' in & ...

angulartwitter-bootstrap-3webpack

What strategy should be employed for creating a database abstraction layer in Angular?

When it comes to Angular, what is the optimal method for implementing a database abstraction layer that functions similarly to a Content Provider in Android? ...

androidangular

Tips for inserting an object into an array

Here's the data I received: { 0:{modifierId: 4, modifierName: 'Garlic', modifierPrice: 60 } 1:{modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60} 2:{modifierId: 3, modifierName: 'Herb ', modifierPrice: 60} item ...

javascriptarraysangulartypescriptobject

Attaching a function to a designated slot attribute

Currently, I am utilizing VUE 2.6.11 along with class components. My current objective involves encapsulating components that can serve as modals inside a separate component responsible for managing the modal state. According to the documentation, it is p ...

typescriptvue.jsvue-class-components

The retrieval of cookies from the Response object is not possible with Typescript

While working on my google chrome extension, I implemented a post call that looks like this: public someapiCall(username: string, password: string) { var url = 'http://test.someTestServer.com/api/user/someApiCall'; let headers = new Hea ...

angulartypescriptcookiesgoogle-chrome-extension

Preflight request response failed access control check due to absence of 'Access-Control-Allow-Origin' header

I encountered an error while attempting to upload a file and store it in a database using Angular4 as the front end. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the ...

angularspring-boot

Dealing with JSON data in the format of `(Object object)` requires a specific approach

I originally encountered object object when attempting to display JSON API data in HTML. I then used keyvalue in *ngFor which allowed me to display the object, but I am wondering how I can access and display the entire JSON data? Here are the relevant cod ...

htmlangulartypescript

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

htmlcssangulartooltip

What is the process for linking read-only methods to Redux object instances?

Let's say I have a "user" object stored in redux, with fields for first name and last name (interface User { firstName : string, lastName : string} if using typescript). After retrieving a user from redux, I want to obtain the full name of the user by ...

javascripttypescriptredux

Angular 2 Error: Unable to access the `subscribe` property of an undefined value

In my Angular 2 project, I have a single form that serves the purpose of adding a new event or editing an existing one. The logic checks the URL parameter to determine whether an ID is present. If an ID is found, it subscribes to the editEvent method from ...

angularobservable

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

I am currently utilizing Material UI with React using Typescript and I am looking to create a test for the autocomplete functionality using Cypress. Here is the approach I have taken: Identifying the Autocomplete component and opening it, Choosing an opti ...

typescriptreact-hooksmaterial-uicypress

Craft a unique typings file tailored to your needs

After recently creating my first published npm package named "Foo", I encountered some difficulties while trying to consume it in a TypeScript project. The tutorials on how to declare modules with custom typings were not clear enough for me. Here are the k ...

node.jstypescript