CRUD Operations In Angular 7 Using Web API

In html u passed a argument inside onFormSubmit(*****) where as in methods of .ts file u didn't i am getting that error

Hi, I'm Andre. I just learn about angular but 11 version. Is there any big difference with angular 7 that you use? Thanks

Ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1

His XML file does not appear to have any style information associated with it. The document tree is shown below.

How to run EmployeeAPIController ?

When i run this always going DefaultAPI, I am setting routeconfig also it is not working

plz explain this code. it will help me a lot "WebApiDbEntities objEntity = new WebApiDbEntities();"

Cannot retrieve the values

Hi Mithilesh, I am getting this error : Can't bind to 'formGroup' since it isn't a known property of 'form'.

To Whomever my stumble upon this article - keep in mind that if you are to retrieve data from a web api, that the API changes the case of the property names, so if you have a table with a column name "MyStringColumn" or some such name, that it will be returned by the web API as "myStringColum" in the JSON ,which does not directly get translated by the angular service making the call to retrieve the data. I am sorry for possibly not using the correct technical jargon & correct terminology, but I am glad to have finally figured out why my data would not display. I hope no one has to struggle like I did. This was done in a later version of Angular & the web API was created with .Net core 3.1 for clarity's sake.

Hello Sir, I am not able to download the ZIP File.

Record save by insert method but unable to run get method. error like The requested resource does not support http method 'GET'.

What do I have to do to view a file after uploading it?

I am getting error on ngsubmit although reactivemodules is imported

Hi i am getting http failure error

Hi im getting some errors like ... "index.d.ts' is not a module". and "Cannot find module './app-routing.module' or its corresponding type declarations.ts(2307)" in VS Code Editor can you help me

How would I record the data from two tables and show you in another form only some of the columns of the two tables.Let's say customers (customer_id, customer_name, age, country) sales (id_ven, series, number, id_cli, total sale) summary ven_id, series, number, customer_name, total sale), this in a grid

I asked a stupid question here, as I started with a .Net Core project, and it seems to be a bad idea with this solution.

I faced error in the post method with Empid column when creating new entries, 0 was passed for all the new records which resulted in duplicate record error....I resolved it by adding Identity(1,1) for Empid column, now it is working fine.

Really good .thank for providing

Src/app/employee/employee.component.ts:9:16 9 templateUrl: './employee.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component EmployeeComponent.

I get following error : ERROR in src/app/employee/employee.component.html:11:67 - error TS2554: Expected 0 arguments, but got 1. 11 <form [formGroup]="employeeForm" (ngSubmit)="onFormSubmit(employeeForm.value)">

I have faced the same problem ie coming white blank screen. Even API and Web are working with no error. I am using VS2017.

<Error><Message>No HTTP resource was found that matches the request URI 'http://localhost:57514/Api/Employee'.</Message><MessageDetail>No type was found that matches the controller named 'Employee'.</MessageDetail> </Error> My controller name is EmployeeAPIController.cs

Im getting blank white screen after do all thing as you show in above code.So Please help me sir

My url = http://localhost:65389/Api/Employee. Like I said, it works fine only when VS2019 is open and F5 was use at least once on the project. Any other suggestion? Thank you.

I've done this tutorial and it works fine when using "ng serve -o" and when published in IIS manager, But only if my VS2019 is open. If closed it doesn't pull any data from the SQL server, but display the page properly.

Getting below result when trying to show all records i.e. loadAllEmployees(). { "closed": true, "_parentOrParents": null, "_subscriptions": null, "syncErrorValue": null, "syncErrorThrown": false, "syncErrorThrowable": true, "isStopped": true, "destination": { "closed": true, "_parentOrParents": null, "_subscriptions": null, "syncErrorValue": null, "syncErrorThrown": false, "syncErrorThrowable": false, "isStopped": true, "destination": { "closed": true }, "_parentSubscriber": null, "_context": null } }

Hello Senior I have got your code and everything is fine but i got one simple problem can you please help me ! problem is : Class constructor Platform cannot be invoked without 'new'

Am getting error in app.module.ts @angular/material is not a module.

Am getting error when running webapi code i.e., The program '[12212] iisexpress.exe' has exited with code 0 (0x0).my internet is fine. but Not debugging Program please help on this isue

Am getting error when running webapi code i.e., The program '[12212] iisexpress.exe' has exited with code 0 (0x0).

Thank you very much

This is not run properly there is error in employee.component.ts The error is property name does not exist on type Employee[]....pls give me solution

My application does not have WebApiDbEntities . What should I use ?

Thank you very much for your tutorial. That's nice. Just a question, what is the name from your visual studio code theme?

Its easy step by steps article for beginners

Thanks You!!!!!!!!!!!!!!!!!!!Best code for amateur full stack developers....Keep posting more code...!

M facing this error Access to XMLHttpRequest at 'http://localhost:53113/api/Customer/AddEnquiry/' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:4200', but only one is allowed.

Bro do u have angular authentication with api from asp.net?

Hey bro when i run the app i have white screen

GET request is working as I am able to see records from database but POST and PUT requests (Add/Update new employees) are not working....any idea about this?

Hi, I think my angular project is not connected with the API project....how to check that?

Thanks, MithileshKumar. This is really great article for beginners to learn Angular Js 7 or an upper version with Web API C# Project.

In edit mode radio button value are not selected

Thanks a lot, It was really very helpful to me.....

I was trying to compile... angular is compling and it was displaying the uI page and DB also created but it was not getting linked to db

Can you please update this with Paging, Sorting and nested Grid. Like Details GRid with Paging and sorting in the Child Grid as well.

Really a great Article. I am very new to Angular and surprisingly I could run the whole Project with the code you shared. I really appreciate your efforts and knowledge on Angular and Web Api. I must say most of the material I found on Internet you can't run them by own, you need debug and fix but in your case its just executed for a new starter without any bug. ** I would like to request you to extend this program for Search, Sorting, Paging to complete end to end operation** Many Thanks. God bless you.

It looks like this line of code is failing WebApiDbEntities objEntity = new WebApiDbEntities(); which library contains WebApiDbEntities class.

WebApiDbEntities objEntity = new WebApiDbEntities();

Hi it looks like this line in the code is failing in the code

WebApiDbEntities objEntity = new WebApiDbEntities();

Hi.On localhost angular web api rud working well.But when deploy to firebase not working get/post/delete and other methods.

THanks for article.I get cors block error when put data.But when fetch no error,but when post data get cors blocked error.

Nice explanation for beginners Thanks!...

Nice Article for Beginner, Thank you.

Hi Mithlesh Nice Article.. I am facing some issue on Table, looks like css is not applying on lower table.. it is not looking similar to your detail table rows and buttons .. Can you please tell why its happening??

Hi , if want to debug web api project, how can i do it

Hi this is good example..i tried it am faced some issues in DateOfBirth DATE declaration in employee model class in VC. And also gender values saved in DB with empty space example "0 ". In this case i seen correct values while insert data in SaveChanges method. So kindly do the needful.

Fyi there are a couple of errors you will get if the database table is not setup correctly. System.Data.Entity.Core.OptimisticConcurrencyException and Cannot insert the value NULL into column column does not allow nulls insert failsyou need to create the table using the following script. CREATE TABLE EmployeeDetails ( EmpId INT PRIMARY KEY IDENTITY(1,1), EmpName VARCHAR(50) , DateOfBirth DATE, EmailId VARCHAR(50), Gender NCHAR(10), Address VARCHAR(100), PinCode VARCHAR(50) )

Hi Mithilesh. Great tutorial, Getting a SqlException: Cannot insert the value NULL into column 'EmpId', table 'Test.dbo.EmployeeDetails'; column does not allow nulls. This does not happen on update, only insert. Any ideas? Thank You in Advance!

Nice....thankyou sir..

Good explanation for CRUD.................

Nice explanation. thanks for sharing... IS there any tool to debug the code in angular

How to get value from mat-radio-button tag after clicking getEmployeeById()

Would you happen to know why the imported material theme does not apply to the table?

Import { Lancamento } from './lancamento.model';Export class Employee { EmpId: string; EmpName: string; DateOfBirth: Date; EmailId: string; Gender: string; Address: string; PinCode: string; public lancamentos?: Lancamento[], } what would a combobox look like if it had a relationship?

Nice! but can you provide scrolling functionality to this table.

Please give an example with login functionality also

When developing, what is it called and what is refreshing the page automatically when a component is changed?

After an employee is successfully created, the UI entry fields are red as though there is an error. I see int the CreateEmployee(), that after the creation, you call the this.employeeForm.reset();. Should that not reset them the fields so that they are NOT red? Is seems to think that the fields have been 'touched'.

Note: please mention that you need to run the web api and leave it running. Then take the localhost # and update the URL in the employee.service.ts with the value. url = "http://localhost:56009/Api/Employee"; Then run the Angular app.

Nice article. thanks for sharing

Very cool explanation..