Consuming ASP.NET Web API In Angular - Part Four

In this article, we will learn how to consume/use or fetch data with help of Asp.Net Web API in Angular. To achieve this task  we will follow some easy steps.

You can see our previous series of articles,

• ASP.NET Web API creation
• Consuming ASP.NET Web API  in ASP.NET MVC
• ASP.NET Web API consume in jQuery
• Consuming Asp.Net Web API in Angular - Part 4

Step by Step Implementation

Create a new Angular project with CLI command.

Command

ng new ConsumeAspNetWebAPI

Following screenshot confirms the project was created successfully,

Now start and switch to Visual Studio Code.

Click on File ---> Open Folder or Press ( CTRL + K CTRL + O)

After clicking on SELECT FOLDER button your project will open in Visual Studio code like this,

As you know SRC folder is a source folder where we write our code to fetch data from Asp.Net Web API.

Click on SRC folder to view the default internal content SRC folder.

Create a folder named MODEL before we create our model class.

Right click on SRC folder and select NEW FOLDER,

Switch to command window again to create a model (class) file called membermodel,

Command

ng g class model/membermodel <press enter>

Our Asp.Net Web API pass data ike,

• MemberID
• MemberName
• PhoneNumber
  
  

To implement this, we need to create a class as per the above format.

Now, this is the time to create a SERVICE folder where we keep our service.

Right click on SRC folder.

Switch to command window again to create a service file called Member

You can see the above console screenshot SERVICE has been created successfully.

Now update/import link in the app.module.ts file of SERVICE

Insert the following line at the top of app.module.ts file.

import { MemberService } from './services/member.service';

Update the following line under @NgModule directive section of providers.

providers: [MemberService],

Now, to switch to component called app.component.ts file, update the following things:

Write import statement for MemberService:

import {MemberService} from './services/member.service';

Write dependency injection statement for MemberService.

constructor(private memberserv : MemberService){
}

Now, switch to MemberService.ts file to update code for testing.

Create a constructor inside MemberService.ts file.

constructor() {
   console.log('Hello from service')
 }

Now, it's time to check if our service working or not.

Execute the project by the following command,

 In the above screen you can see our project is executed on localhost with port number http://localhost::4200

OUTPUT

The message in the above console shows our all settings for the service are perfect. Now we code further.

Now switch back to app.module.ts for import HTTP module at the top.

import {HttpModule} from '@angular/http';

Now add HTTPMODULE in imports

imports: [
    BrowserModule,
    HttpModule
  ],

Now switch to MemberService file to update the following codes:

import {Http} from '@angular/http';

Import Map setting just below the above code:

import 'rxjs/add/operator/map';

Now we add a method called GETALLMEMBERS

GetAllMembers(){
  return this.http.get('http://localhost:52044/api/member').map(res =>res.json());
}

Now switch back to app.component and add the following code inside the constructor:

constructor(private memberserv : MemberService){
this.memberserv.GetAllMembers().subscribe((members) => {
  this.members = members;
});
}

Now switch to app.component.html to print data on UI.

<h1>Member Detail</h1>
  <ul>
    <li *ngFor = "let member of members">
        {{member.MemberName}} ----- {{member.PhoneNumber}}
    </li>
  </ul>

OUTPUT

While implementing Asp.Net Web API in Angular we interacted with the  following files,

SR. NO.	FILE NAME	FILE PATH	DESCRIPTION
1	app.component.html	src\app\app.component.html	Default main component html file.
2	app.component.ts	src\app\app.component.ts	Default main component class file
3	app.module.ts	src\app\app.module.ts	Heart of application all things should register with module.ts.
4	membermodel.ts	src\app\model\membermodel.ts	Model file which helps to generate view and port data to UI.
5	member.service.ts	src\app\service\membe.service.ts	Service class file which helps to fetch data from Web API. Fetches the data with HTTP module.

Full Source code of above main files,

Code of app.component.html

<h1>Member Detail</h1>
  <ul>
    <li *ngFor = "let member of members">
        {{member.MemberName}} ----- {{member.PhoneNumber}}
    </li>
  </ul>

Code of app.component.ts

import { Component } from '@angular/core';
import { Membermodel } from './model/membermodel';
import {MemberService} from './services/member.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  members : Membermodel[];
  constructor(private memberserv : MemberService){
  this.memberserv.GetAllMembers().subscribe((members) => {
     this.members = members
    });
  }
}

Code of app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MemberService } from './services/member.service';
import {HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [MemberService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Code of membermodel.ts

export class Membermodel {
    memberid : number;
    membername : string;
    phonenumber : string;
}

Code of member.service.ts

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class MemberService {
  constructor(public http : Http) {
  }
GetAllMembers(){
  return this.http.get('http://localhost:52044/api/member').map(res =>res.json());
}
}

Happy Coding…