Using Angular HttpClient - Revision history

PeterHarding: /* Notes */

2019-10-24T02:32:42Z

Notes

← Older revision		Revision as of 12:32, 24 October 2019
Line 130:		Line 130:
	=Notes=		=Notes=

	To add multiples params or headers you can do the following:		To add multiples params or headers you can do something like the following:

	<pre>		<pre>
Line 137:		Line 137:
	const url = `${environment.BaseUrl}/api/route`;		const url = `${environment.BaseUrl}/api/route`;

	let httpHeaders = new HttpHeaders().set('one', one);		let httpHeaders = new HttpHeaders().set('one', one);

	httpHeaders = httpHeaders .append('two', two);		httpHeaders = httpHeaders .append('two', two);
	httpHeaders = httpHeaders .append('three', three);		httpHeaders = httpHeaders .append('three', three);

	let urlParams = new HttpParams().set('one', one);		let urlParams = new HttpParams().set('one', one);

	urlParams = urlParams .append('two', two);		urlParams = urlParams .append('two', two);
	urlParams = urlParams .append('param3', value3);		urlParams = urlParams .append('param3', value3);

	return this.httpClient.get<any[]>(url, { headers: httpHeaders, params: urlParams })		return this.httpClient.get<any[]>(url, { headers: httpHeaders, params: urlParams })

	</pre>		</pre>

	[[Category:Angular]]		[[Category:Angular]]

PeterHarding at 02:31, 24 October 2019

2019-10-24T02:31:59Z

← Older revision		Revision as of 12:31, 24 October 2019
Line 128:		Line 128:
	</pre>		</pre>

			=Notes=

			To add multiples params or headers you can do the following:

			<pre>
			constructor(private httpClient: HttpClient) {}

			const url = `${environment.BaseUrl}/api/route`;

			let httpHeaders = new HttpHeaders().set('one', one);
			httpHeaders = httpHeaders .append('two', two);
			httpHeaders = httpHeaders .append('three', three);

			let urlParams = new HttpParams().set('one', one);
			urlParams = urlParams .append('two', two);
			urlParams = urlParams .append('param3', value3);

			return this.httpClient.get<any[]>(url, { headers: httpHeaders, params: urlParams })

			</pre>

	[[Category:Angular]]		[[Category:Angular]]

PeterHarding at 23:54, 23 October 2019

2019-10-23T23:54:51Z

@@ Line 105: / Line 105: @@
    } // update
 </pre>
 [[Category:Angular]]

PeterHarding at 23:52, 23 October 2019

2019-10-23T23:52:54Z

← Older revision		Revision as of 09:52, 24 October 2019
Line 8:		Line 8:

	==GET==		==GET==

			In the .ts

			<pre>
			import { HttpClient } from '@angular/common/http';
			</pre>

	<pre>		<pre>

PeterHarding: /* POST */

2019-10-23T23:51:33Z

POST

← Older revision		Revision as of 09:51, 24 October 2019
Line 68:		Line 68:
	data => {		data => {
	console.log('[addUser] POST Request is successful \|' + data + '\|');		console.log('[addUser] POST Request is successful \|' + data + '\|');
	~~return data;~~
	},		},
	error => {		error => {
	console.log('[addUser] Error \|' + error + '\|');		console.log('[addUser] Error \|' + error + '\|');
	~~return error;~~
	});		});

PeterHarding: /* POST */

2019-10-23T23:50:26Z

POST

← Older revision		Revision as of 09:50, 24 October 2019
Line 55:		Line 55:

	<pre>		<pre>
			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 + '\|');
			return data;
			},
			error => {
			console.log('[addUser] Error \|' + error + '\|');
			return error;
			});

			} // addUser
	</pre>		</pre>

PeterHarding: /* GET */

2019-10-23T23:47:30Z

GET

← Older revision		Revision as of 09:47, 24 October 2019
Line 26:		Line 26:
	</pre>		</pre>

			Get a list of markers - this.markers:

			<pre>

			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
			</pre>

	==POST==		==POST==

PeterHarding at 23:44, 23 October 2019

2019-10-23T23:44:30Z

← Older revision		Revision as of 09:44, 24 October 2019
Line 34:		Line 34:

	</pre>		</pre>

			=PATCH=

			<pre>
			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
			</pre>


	[[Category:Angular]]		[[Category:Angular]]

PeterHarding: Created page with "=Links= * * =Examples= Some examples. ==GET==

   getUsers() {     this.httpClient.get(this.url').subscribe((res: any[]) => {         console.log(res);         this...."

2019-10-23T23:35:48Z

Created page with "=Links= * * =Examples= Some examples. ==GET== <pre> getUsers() { this.httpClient.get(this.url').subscribe((res: any[]) => { console.log(res); this...."

New page

=Links=

*
*

=Examples=
Some examples.

==GET==

<pre>
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
</pre>

==POST==

<pre>

</pre>

[[Category:Angular]]