How to integrate Angular to your .NET core project

I created BookInfo.API with .net core that returns, creates, updates and deletes books data from database.

Everything on the backend is ready, so we can start moving that data from database to the client side where user can do all those CRUD operation. Let's start 👨🏼‍💻

First we need to add Angular to our existing project.

We are going to create ClientApp in BookInnfo.API project using Angular ng new ClientApp. After execution of this command, ClientApp folder is shown in the Solution Explorer.

Navigate to our newly created folder and open it in visual studio code (from command line) with handy command in cmd - code .

Let's first create services folder in src with mkdir services and create service with Angular CLI command ng g service book-info. In book-info.service.ts we need to import HttpClient and inject it through our constructor. Also before we start creating methods in service, it's necessary to import HttClient in app.module.ts and added it to imports array in @NgModule . Next, create method that will return Observable of any type (later we can change it to the Book[]). We will use RxJS pipe() function to map and catch error of our Observable collection that we get as a result. Our service class will look like this

Now we need to create book-info component in which our results are rendered. Our component should contain function that subscribes to an Observable from service. Let's create our component with ng g c book-info and implement getBooks() function that will subscribe to an Observable. After creating books property and injecting our Service in constructor, BookInfoComponent class looks like this

Before we test our app we will modify app.component.html to navigate to page where our result will be shown.

Also we need to change app.module - add route to BookInfoComponent and HttpClientModule in import array and add base url, which is set in enviroment.ts, to providers array.

Before we run our app we need to make changes in BookInfo.API project. So, we will add CORS middleware in our startup.cs file in Configure method to allow cross domain requests.

Now we can run app with ng serve --open and navigate to the books we can see result in console.

We are having our books data back, so let's show books on page. I will use mat table to display books. After editing book-info.component.ts and book-info.component.html, page looks as shown below

Next step is to create method in service, to get one book by id.

Also let's create book.details.ts component and subcribe to an Observable from service

We need to add route to the in book-info.component.html which will redirect user. So, if user click on the book title, details page for that book will be shown.

Let's now create add-book component for adding new book. After implementing addBook method in our service

and creating add-book.component.ts ⬇️

we can test it with click on Add Book button and fill in data for new book

After click on save button, we can see our changes.

Next let's create edit-book component and add method for updating book in service

So, after i click on Edit in Menu bar, i can change book info and see changes immediately

What is left is to add delete book functionality. First we will add deleteBook metod in service

and change our view in html component

so when we click on delete, selected book will be removed

Code: Github