Show data using Web API and Service in Angular 2

Before moving ahead, you need to configure your Angular 2 application. Follow these articles first:

Getting Started

• Start Visual Studio.
• Create a new website.
• Provide the name and the location of website.
• Click "Next".

Here is my cricketer Web API.

Let’s add a model component, provide an appropriate name, and add reference of model class and other important assemblies.

export class Cricketer {
constructor(
ID: number,
Name: string,
ODI: number,
Test: number
) { }
}

Now, let’s add a new service component and provide name.

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Cricketer } from './Cricketer';
import { Observable, Subject } from 'rxjs/Rx';
import 'rxjs/Rx'; //get everything from Rx
import 'rxjs/add/operator/toPromise';
@Injectable()
export class CricketerService {
apiUrl: string = "http://localhost:51453/api/Cricketers";// Web API URL
constructor(private _http: Http) { }
private RegenerateData = new Subject<number>();
RegenerateData$ = this.RegenerateData.asObservable();
AnnounceChange(mission: number) {
this.RegenerateData.next(mission);
}
// //
// getCricketers() {
// return this._http.get(this.apiUrl)
// .map((response) => response.json());
//}
getCricketers(): Observable<Cricketer[]> {
return this._http.get(this.apiUrl)
.map((res: Response) => res.json())
.catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}
}

Now, let’s add a cricketer component and give reference of service and model class.

import { Component } from '@angular/core';
import { CricketerService } from './shared/cricketerservice';
import { Cricketer } from './shared/Cricketer';
import { Observable } from 'rxjs/Rx';
@Component({
moduleId: module.id,
selector: 'cricketer-component',
templateUrl: 'cricketercomponent.html',
providers: [CricketerService]
})
export class CricketerComponent {
cricketers: Observable<any[]>;
constructor(private _cricketerService: CricketerService) {
}
ngOnInit() {
this.getCricketers();
}
//
getCricketers() {
debugger
thisthis.cricketers = this._cricketerService.getCricketers();
}
}

This is my cricketer component html.

<div class="row">
<div class="table-responsive">
<table class="table ">
<thead class="thead-default">
<th>ID</th>
<th>Player</th>
<th>Total ODI</th>
<th>Total Test</th>
<th></th>
</thead>
<tbody>
<tr *ngFor="let cric of cricketers | async" scope="row">
<td>{{cric.ID}}</td>
<td>{{cric.Name}}</td>
<td>{{cric.ODI}}</td>
<td>{{cric.Test}}</td>
<td>
<button type="button" value="Update" class="btn btn-default" (click)='editCricketer(cric.ID, cric)'>Update</button>
<button type="button" value="Delete" class="btn btn-danger" (click)='deleteCricketer(cric.ID)'>Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-offset-3 col-md-3">
<a routerLink="/addcricketercomponent" class="btn btn-warning">Add Player</a>
</div>
</div>

Now, add the references of component and service in app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CricketerComponent } from './cricketercomponent';
import { CricketerService } from './shared/cricketerservice';
import { app_routing } from './app.routing';
import { AddCricketerComponent } from './addcricketercomponent';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule, app_routing],
declarations: [CricketerComponent, AddCricketerComponent],
providers: [CricketerService],
bootstrap: [CricketerComponent, AddCricketerComponent]
})
export class AppModule { };

Now, create a new index html page and add component name and other important files.

<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/">
<meta charset="utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="app/css/styles.css" rel="stylesheet" />
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(
function (err)
{ console.error(err); });
</script>
</head>
<body>
<header class="navbar navbar-inner navbar-fixed-top">
<nav class="container">
<div class="navbar-header">
<span class="app-title">CRUD Operations in Angular 2 using Web API</span>
</div>
</nav>
</header>
<section class="container">
<cricketer-component>Loading...</cricketer-component>
</section>
<footer class="footer">
<div class="container">
</div>
</footer>
</body>
</html>

Now, it is time to run the application and see the output.

Conclusion

In this article, we have learnt how to get data from Web API and display using Observable in Angular 2. If you have any question or comment, drop me a line in C# Corner comments section.

8 Comments

Join the conversation! Your thoughts help the community grow.

Kamlesh Kumar7y ago
What the hell is done incomplete article
- Raj Kumar7y ago
  look at the title...
Ketan Shinde8y ago
This is not helpfull .....
DotNet Techy9y ago
Video Tutorial for consuming web api in angular 2 or 4.
Pankaja Shankar9y ago
What do I have to do to use relative url for the http request instead of giving localhost.../api/... it was easier with angularjs to hook up to webapi.
- Sagar Prakash8y ago
  Did you got the solution for above .
Anil Kumar9y ago
Thank you for valuable article
Madhanmohan Devarajan9y ago
Very nicely described for easy understanding.