Friday, June 21, 2024
.Net FrameworkAngularAngular 17Asp.NET Core

Working demo for a project that integrates Angular 17 with .NET Core

Working demo for a project that integrates Angular 17 with .NET Core

Finding a working demo for a project that integrates Angular 17 with .NET Core involves looking for sample projects or tutorials that demonstrate how to use these technologies together. Angular is a popular framework for building client-side applications, while .NET Core is a cross-platform framework for server-side development. Integrating them allows for the creation of powerful full-stack web applications.

Here’s a basic outline to create a simple Angular + .NET Core demo application:

1. Prerequisites

  • Install .NET Core SDK
  • Install Node.js and npm (comes with Node.js)
  • Install Angular CLI

2. Create a .NET Core Web API Project

First, create a new .NET Core Web API project. This will serve as the backend.

dotnet new webapi -n AngularDemoAPI
cd AngularDemoAPI
dotnet run

3. Create an Angular Project

Next, create a new Angular project. This will be your client-side application.

ng new AngularDemoApp
cd AngularDemoApp
ng serve

4. Enable CORS in .NET Core

To allow the Angular app to communicate with the .NET Core API, enable CORS (Cross-Origin Resource Sharing) in the .NET Core project.

In the Startup.cs file of your .NET Core project, add the following code to the ConfigureServices method:

services.AddCors(options =>
    options.AddPolicy(name: "AllowOrigin",
        builder =>

And then, in the Configure method, use the CORS policy:


5. Call .NET Core Web API from Angular

Modify the Angular application to call the .NET Core Web API. First, create a service in Angular:

ng generate service DataService

In the data.service.ts file, add a method to call the .NET Core Web API:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

  providedIn: 'root'
export class DataService {
  private baseUrl = 'http://localhost:5000/api'; // Adjust the port if different

  constructor(private http: HttpClient) { }

  public getData(): Observable<any> {
    return this.http.get(`${this.baseUrl}/values`);

Make sure to adjust the baseUrl to match your .NET Core API’s address and port. Then, inject and use this service in one of your Angular components to call the API and display the data.

This basic outline sets up a simple Angular + .NET Core application. For a more comprehensive demo, including database integration, authentication, and deployment, you might want to look at specific tutorials or sample projects. Resources like GitHub repositories, official documentation from Microsoft for .NET Core, and Angular documentation are great places to find detailed examples and guides.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.