How to create web API Backend (Restful) and connect to angular?
Hi Charles,
You can connect the
Angular client app and WebAPI server app by enabling the “CORS” in the server
application and using the server link in the client app. To enable CORS configuration
in your application we suggest you the
cross-origin request in the startup.cs file as mentioned in
the below code example.
|
[startup.cs] public void ConfigureServices(IServiceCollection services) { . . . . services.AddCors(options => { options.AddPolicy("EnableCORS", builder => { builder.AllowAnyOrigin().AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials().Build(); }); });
. . . .. . }
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseCors("EnableCORS"); . . .. . . }); |
Cross configuration for aspnetcore version as 3 : https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1
By default, in ASP.NET Core the JSON results are returned in camelCase format, so the grid field names are also changed in camelCase and the grid will be rendered without data. The mentioned issue is reproduced due to the SerializerSettings. So, we suggest you to add the below code to your startup.cs file to overcome the problem.
|
public void ConfigureServices(IServiceCollection services) { services.AddMvc().AddJsonOptions(x => { x.SerializerSettings.ContractResolver = null; }); . . . . } |
For more information : https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#troubleshoot-grid-render-rows-without-data
In this sample, we have rendered the grid with web API request using below code snippets.
|
<ejs-grid #grid [dataSource]='data' allowPaging="true"> <e-columns> <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column> <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column> </e-columns> </ejs-grid>
|
|
export class AppComponent { public data: any; @ViewChild('grid') public grid: GridComponent; ngOnInit(): void { this.data = new DataManager({ url: 'http://localhost:55055/api/Orders/', // Send hosted link adaptor: new WebApiAdaptor, crossDomain: true });
} |
GitHub sample for more reference : https://github.com/SyncfusionExamples/ASP-.NET-Core-with-Angular-using-EJ2-controls/tree/master/
To run our sample please follow the below steps.
1. Run WebApplciation5 in visual studio and set this hosted link to Webapi Data Manger’s URL like the above code snippet.
2. Run “npm install” command in ClientApp root folder.
3. Run the angular project (ClientApp) using “ng serve” command.
Please get back to us, if you need any further assistance.
Regards,
Pavithra S
