Difference between revisions of "Using Angular HttpClient"
Jump to navigation
Jump to search
PeterHarding (talk | contribs) (→POST) |
PeterHarding (talk | contribs) |
||
Line 8: | Line 8: | ||
==GET== | ==GET== | ||
In the .ts | |||
<pre> | |||
import { HttpClient } from '@angular/common/http'; | |||
</pre> | |||
<pre> | <pre> |
Revision as of 10:52, 24 October 2019
Links
Examples
Some examples.
GET
In the .ts
import { HttpClient } from '@angular/common/http';
getUsers() { this.httpClient.get(this.url').subscribe((res: any[]) => { console.log(res); this.users = res; }, error => { this.errorMessage = error as any; }, () => { // Complete - update a datatable this.changeDetectorRef.detectChanges(); const table: any = $('#UsersTable'); this.dataTable = table.DataTable(this.dtOptions); }); } // getUsers
Get a list of markers - this.markers:
getMarkers() { const url = this.baseUrl + '/v1/xxx/xxxx/markers'; // console.log('[getMarkers] url |' + url + '|'); this.httpClient.get(url).subscribe((markers: Marker[]) => { // console.log('[getMarkers] markers |'); // console.log(markers); this.markers = markers; }, error => { this.errorMessage = error as any; }, () => { // console.log('[getMarkers] COMPLETED => markers |' + this.markers + '|'); // Complete }); } // getMarkers
POST
addUser(user: User) { console.log('[addUser] GUID |', this.user.Id); this.httpClient.post(this.baseUrl + '/v1/xxx/users', { email: user.email, lastName: user.lastName, firstName: user.firstName }) .subscribe( data => { console.log('[addUser] POST Request is successful |' + data + '|'); }, error => { console.log('[addUser] Error |' + error + '|'); }); } // addUser
PATCH
update(xxx: Xxx) { this.httpClient.patch(this.baseUrl + '/v1/xxx/xxxx-xxxx/' + this.id, { Id : xxx.Id, Status: xxx.Status, XxxId: xxx.XxxId, NoXxx: xxx.NoXxx }) .subscribe( data => { console.log('[update] PATCH Request is successful |' + data + '|'); return data; }, error => { console.log('[update] Error |' + error + '|'); return error; }); } // update