{"id":321,"date":"2017-07-20T03:41:49","date_gmt":"2017-07-20T01:41:49","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=321"},"modified":"2020-05-30T04:02:46","modified_gmt":"2020-05-30T02:02:46","slug":"introduction-to-angular-httpclient-library","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/introduction-to-angular-httpclient-library\/","title":{"rendered":"Introduction to Angular HttpClient Library"},"content":{"rendered":"\n<p>Angular 4.3\u00a0introduces\u00a0a new easier way to handle HTTP requests with the\u00a0HttpClient\u00a0library. It\u2019s available under a new name to avoid causing breaking changes with the current Http library.\u00a0<\/p>\n\n\n\n<p><strong><strong>HttpClient<\/strong><\/strong> basically performs HTTP requests and also gives us advanced functionality like the ability to listen for progress events and interceptors to monitor or modify requests or responses.<\/p>\n\n\n\n<p> This service is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of\u00a0<code>observe<\/code>\u00a0and\u00a0<code>responseType<\/code>). \u00a0<\/p>\n\n\n\n<p>It comes with all HTTP methods required. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#request\">request()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#delete\">delete()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#get\">get()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#head\">head()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#jsonp\">jsonp()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#options\">options()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#patch\">patch()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#post\">post()<\/a><\/li><li><a href=\"https:\/\/angular.io\/api\/common\/http\/HttpClient#put\">put()<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Sample Angular <strong><strong>HttpClient<\/strong><\/strong> Usage;<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;application\/typescript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;TypeScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;typescript&quot;}\">import { Injectable } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\n\nimport { environment as env } from '@env';\nimport { Observable } from 'rxjs';\n\n@Injectable()\nexport class ApiClient {\n\n  baseUrl = env.api.url;\n\n  constructor(public http: HttpClient) {}\n\n  get&lt;T&gt;(path: string, params?: any): Observable&lt;T&gt; {\n    return this.http.get&lt;T&gt;(`${this.baseUrl}\/${path}`, {\n      params: params\n    });\n  }\n\n  post&lt;T&gt;(path: string, params?: any): Observable&lt;T&gt; {\n    return this.http.post&lt;T&gt;(`${this.baseUrl}\/${path}`, params, {\n    });\n  }\n\n  put&lt;T&gt;(path: string, params?: any): Observable&lt;T&gt; {\n    return this.http.put&lt;T&gt;(`${this.baseUrl}\/${path}`, params, {\n    });\n  }\n\n  delete&lt;T&gt;(path: string, params?: any): Observable&lt;T&gt; {\n    return this.http.delete&lt;T&gt;(`${this.baseUrl}\/${path}`, {\n      params: params\n    });\n  }\n\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Angular 4.3\u00a0introduces\u00a0a new easier way to handle HTTP requests with the\u00a0HttpClient\u00a0library. It\u2019s available under a new name to avoid causing breaking changes with the current Http library.\u00a0 HttpClient basically performs HTTP requests and also gives us advanced functionality like the ability to listen for progress events and interceptors to monitor or modify requests or responses. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[22,4,51,46],"class_list":["post-321","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-angular","tag-javascript","tag-rxjs","tag-typescript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":1,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"predecessor-version":[{"id":322,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions\/322"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}