Display Values from an ASP.NET Core API in your Angular Components

Instructor: [00:02] If you want to consume a backend server maybe running on localhost port 5000, you can easily start with a new Angular CLI project. We can open up the app folder and add a new file, which is called data.service.ts.

[00:20] Let's create a new data service. The first thing we do is we are exporting a class called data service. We are adding a constructor. Here, we want to inject the http client, so we have to import it first.

[00:39] We say, "Import from angular/common/http," and we import the http client here. Then we inject it to our service. We say, "Private http client is of type http client." Then we can define a method which is called getData. Inside this method, we can type this.httpclient.get. We're using the http GET method right now.

[01:12] Because we know our web api is running on port 5000 on localhost, we can type the address here. We type http localhost port 5,000. We know the route, which is api/value, so we can concat that string here.

[01:29] Of course, we will return the whole result of this method. In the new http client, we can make the return type generic. Here, we will add just a T, which stands for the type. We have to decorate the method with that generic type two. We have not to forget the injectable decorator from Angular. Import that from Angular core, that's it.

[02:03] We are heading over to our app module. The first thing we do is we provide our data service, copy it inside the brackets. We provide this data service to a whole application. Because we are using the http client inside that service, we have to import the http client module as well.

[02:25] Import http client module from angular/common/http. Let's head over to our app.component.ts, because we want to use the service there. The first thing is we are adding a constructor here, and we are injecting our new data service. Private data service is of type data service, and it gets imported automatically from Visual Studio code.

[03:00] Then, we will declare an OnInit method. Implement OnInit. In the ngOnInit method, we call this data service, and we're calling getData. Because we made the method getData generic, we can now give the concrete type -- which is a string array -- and execute that method.

[03:29] Next, we will add a property which is called values. Because it is an observable, we will add the dollar sign in the end. The type is observable of a string array. The result of the getData method equals this new introduced values property.

[03:52] We can head over to our app.component.html, and we can bind to that property we just introduced. Let's do an unordered list, and some list items, add a *ngFor directive. Say, "Let item of values."

[04:14] Because it is an observable, we have to add the async pipe, which will automatically subscribe to the outcome. We then will bind to the new introduced variable item. Let's start the client-side server. We cd into it, then type .netrun. A backend is running now.

[04:42] Let's open up another terminal where we head into our client folder. There, we can type npm start. What we're doing now is, we started our backend. Our backend server is running now on localhost. We're starting our frontend server, which is also running on localhost but on different ports.

[05:06] We configured our backend to accept requests from localhost 4,200. If we open up a browser now, you can see that the values value one and value two, which get returned from the api, are displayed on the screen.

[05:24] We can now shut down the backend server, and we can access our values controller again. Instead of only returning value one and value two, we can also return value three, just for an example.

[05:39] We can start up the terminal again, start the backend again with .netrun, listens to localhost 5000. If we refresh the browser again, you can see value one, value two and value three are displayed on the screen.