How to Integrate Angular with a .NET Core Project

Create a new ASP.NET Core Web Application:

Select Angular and Click on OK.

Create a API Controller and get action which will act as endpoint for the class.

Add below code in API.

 // GET api/values
        [HttpGet]
        public ActionResult<IEnumerable<string>> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public ActionResult<string> Get(int id)
        {
            return "value";
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody] string value)
        {
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody] string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
 

Run the code and change the URL https://localhost:port/api/Product. you can see below code

Go to Clientapp and modify your app.component.html

<div class="container">
  <div class="content">
    <h1 class="headerText">Welcome to Your first .Net Core with Angular</h1>
    <p>
      <span>Click this button to see the list:</span>
      <button type="button" name="show" (click)="getData()">Show Data</button>
    </p>
  </div>
</div>

Using Services and HttpClientModule

Modify the service

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

@Injectable()
export class HttpService {

  constructor(private httpService: HttpClient) { }

  public getData = (route: string) => {
    return this.httpService.get(route);
  }

}

Modify app.component.ts

import { Component } from '@angular/core';
import { HttpService } from './services/http.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private httpService: HttpService) { }
  public populate: string[];
  public getData = () => {
    let route: string = 'https://localhost:44322/api/product';
    this.httpService.getData(route)
      .subscribe((result) => {
        alert(result);
        this.populate = result as string[];
      },
        (error) => {
          console.error(error);
        });
  }
}

Modify app.component.html

<div class="container">
  <div class="content">
    <h1 class="headerText">Welcome to Your first .Net Core with Angular</h1>
    <p>
      <span>Click this button to see the list:</span>
      <button type="button" name="show" (click)="getData()">Show Data</button>
    </p>
  </div>
</div>

<div *ngIf="populate" class="table-center">  
      <div *ngFor='let val of populate'>
        <div>{{val}}</div>        
      </div>    
</div>

Now if we start our application again and click on the Show Data button, we will see this result: