Angular HTTP GET Example using httpclient

8 Comments / May 16, 2021 / 9 minutes of reading

This guide explains how to make HTTP GET requests using the HttpClient module in Angular. The Angular introduced the HttpClient Module in Angular 4.3. It is part of the package @angular/common/http . In this tutorial, let us build an HTTP GET example app, which sends the HTTP Get request to GitHub repository using the GitHub API .

Table of Contents

HTTP Get Example
HTTP Get in Action
Get Syntax
observe
- Complete Response
- events
Response Type
- Strongly typed response
- String as Response Type
Catching Errors
Transform the Response
URL Parameters
HTTP Headers
Send Cookies
Summary

HTTP Get Example

Create a new Angular App.

ng new httpGet

Import HttpClientModule

To make HTTP Get request, we need to make use of the HttpClientModule , which is part of the package @angular/common/http . Open the app.module.ts and import it. Also, import the FormsModule

You must also include it in the the imports array as shown below.

import { BrowserModule } from '@angular/platform-browser' ;

import { NgModule } from '@angular/core' ;

import { HttpClientModule } from '@angular/common/http' ;

import { FormsModule } from '@angular/forms'

import { AppRoutingModule } from './app-routing.module' ;

import { AppComponent } from './app.component' ;

import { GitHubService } from './github.service' ;

@ NgModule ( {

declarations : [

AppComponent

] ,

imports : [

BrowserModule ,

AppRoutingModule ,

HttpClientModule ,

FormsModule

] ,

providers : [ GitHubService ] ,

bootstrap : [ AppComponent ]

} )

export class AppModule { }

Model

Create repos.ts file and add the following code. This is a simplified model for the GitHub repository.

export class repos {

id : string ;

name : string ;

html_url : string ;

description : string ;

}

HTTP GET Service

Let us create a service to handle the HTTP Request. Create a new file github.service.ts and copy the following code.

import { Injectable } from '@angular/core' ;

import { HttpClient , HttpParams , HttpHeaders } from '@angular/common/http' ;

import { Observable , throwError } from 'rxjs' ;

import { map , catchError } from 'rxjs/operators' ;

import { repos } from './repos' ;

@ Injectable ( )

export class GitHubService {

baseURL : string = "https://api.github.com/" ;

constructor ( private http : HttpClient ) {

}

getRepos ( userName : string ) : Observable < any > {

return this . http . get ( this . baseURL + 'users/' + userName + '/repos' )

}

First, we import the required libraries. The HttpClient is the main service, which Performs the HTTP requests like GET , PUT , POST , etc. We need to inject this into our GitHubService . Also, import HttpParams which helps us to add Query Parameters in an HTTP Request . Import HTTP Headers using the HttpHeaders which allows us to add HTTP Headers to the request.

import { HttpClient , HttpParams , HttpHeaders } from '@angular/common/http' ;

The HttpClient service makes use of RxJs observable , Hene we import Observable , throwError & RxJs Operators like map & catchError

import { Observable , throwError } from 'rxjs' ;

import { map , catchError } from 'rxjs/operators' ;

The URL endpoint is hardcoded in our example, But you can make use of a config file to store the value and read it using the APP_INITIALIZER token

baseURL : string = "https://api.github.com/" ;

We inject the HttpClient using the Dependency Injection

constructor ( private http : HttpClient ) {

}

Finally, we use the get method of the httpclient to make an HTTP Get request to GitHub.

The https://api.github.com/users/<username>?repos endpoint returns the list of Repositories belonging to the user <userName>

//Any Data Type

getRepos ( userName : string ) : Observable < any > {

return this . http . get ( this . baseURL + 'users/' + userName + '/repos' )

}

Note that httpclient.get method returns the observable . Hence we need to subscribe to it to get the data.

Component

The following is the code from app.component.ts

import { Component } from '@angular/core' ;

import { GitHubService } from './github.service' ;

import { repos } from './repos' ;

@ Component ( {

selector : 'app-root' ,

templateUrl : './app.component.html' ,

} )

export class AppComponent {

userName : string = "tektutorialshub"

repos : repos [ ] ;

loading : boolean = false ;

errorMessage ;

constructor ( private githubService : GitHubService ) {

}

public getRepos ( ) {

this . loading = true ;

this . errorMessage = "" ;

this . githubService . getRepos ( this . userName )

. subscribe (

( response ) = > { //next() callback

console . log ( 'response received' )

this . repos = response ;

} ,

( error ) = > { //error() callback

console . error ( 'Request failed with error' )

this . errorMessage = error ;

this . loading = false ;

} ,

( ) = > { //complete() callback

console . error ( 'Request completed' ) //This is actually not needed

this . loading = false ;

} )

}

We subscribe to the getRepos() method in our component class. Only when we subscribe to the observable, the HTTP GET request is sent to the back end server.

this . githubService . getRepos ( this . userName )

. subscribe ( ) ;

When we subscribe to any observable, we optionally pass the three callbacks. next() , error() & complete() .

Next() callback is where we get the result of the observable . In this example the list of repositories for the given user.

( response ) = > { //next() callback

console . log ( 'response received' )

this . repos = response ;

}

The observable can also result in an error. It will invoke the error() callback and pass the error object. The observables stop after emitting the error signal.

( error ) = > { //error() callback

console . error ( 'Request failed with error' )

this . errorMessage = error ;

this . loading = false ;

} ,

When the observable completes, it will call the complete() callback. There is no need for this call back as the subscription completes when the data is received.

( ) = > { //complete() callback

console . log ( 'Request completed' )

this . loading = false ;

} )

Best Angular Books
The Top 8 Best Angular Books , which helps you to get started with Angular

Loading Indicator

We create a variable loading=true just before subscribing to the GET request. When the observable completes or an error occurs, we make it false . This helps us to show some kind of loading indicator to users, while we wait for the response.

Template

< h1 class = "heading" > < strong > HTTP < / strong > Demo < / h1 >

< div class = "form-group" >

< label for = "userName" > GitHub User Name < / label >

< input type = "text" class = "form-control" name = "userName" [ ( ngModel ) ] = "userName" >

< / div >

< div class = "form-group" >

< button type = "button" ( click ) = "getRepos()" > Get Repos < / button >

< / div >

< div * ngIf = "loading" > loading . . . < / div >

< div * ngIf = "errorMessage" class = "alert alert-warning" >

< strong > Warning ! < / strong > { { errorMessage | json } }

< / div >

< table class = 'table' >

< thead >

< tr >

< th > ID < / th >

< th > Name < / th >

< th > HTML Url < / th >

< th > description < / th >

< / tr >

< / thead >

< tbody >

< tr * ngFor = "let repo of repos;" >

< td > { { repo . id } } < / td >

< td > { { repo . name } } < / td >

< td > { { repo . html_url } } < / td >

< td > { { repo . description } } < / td >

< / tr >

< / tbody >

< / table >

< pre > { { repos | json } } < / pre >

The template is very simple

We first ask for the userName . We use the two-way data binding to sync userName [(ngModel)]="userName" with the userName property in the component class.

< div class = "form-group" >

< label for = "userName" > GitHub User Name < / label >

< input type = "text" class = "form-control" name = "userName" [ ( ngModel ) ] = "userName" >

< / div >

getRepos() method subscribes to the HTTP get method.

< div class = "form-group" >

< button type = "button" ( click ) = "getRepos()" > Get Repos < / button >

< / div >

We show a loading message until the observable returns response or an error.

< div * ngIf = "loading" > loading . . . < / div >

Show the error message.

< div * ngIf = "errorMessage" class = "alert alert-warning" >

< strong > Warning ! < / strong > { { errorMessage | json } }

< / div >

The last line shows the response as it is received.

< pre > { { repos | json } } < / pre >

HTTP Get in Action

Now, run the app, you should able to make a successful GET Request.

Get Syntax

The above code is a very simple example of the HTTP get() method. The complete syntax of the get() method is as shown below. It has second argument options , where we can pass the HTTP headers, parameters, and other options to control how the get() method behaves.

get ( url : string ,

options : {

headers ? : HttpHeaders | { [ header : string ] : string | string [ ] ; } ;

params ? : HttpParams | { [ param : string ] : string | string [ ] ; } ;

observe ? : "body|events|response|" ;

responseType : "arraybuffer|json|blob|text" ;

reportProgress ? : boolean ;

withCredentials ? : boolean ; }

) : Observable < >

headers : use this to send the HTTP Headers along with the request
params: set query strings / URL parameters
observe: This option determines the return type.
responseType: The value of responseType determines how the response is parsed.
reportProgress: Whether this request should be made in a way that exposes progress events .
withCredentials: Whether this request should be sent with outgoing credentials (cookies).

observe

The GET method returns one of the following

Complete response
body of the response
events .

By default, it returns the body as shown in our example app.

Complete Response

The following code will return the complete response and not just the body

getReposRawResponse ( userName : string ) : Observable < any > {

return this . http . get ( this . baseURL + 'users/' + userName + '/repos' , { observe : 'response' } )

}

The complete response is as follows.

{

"headers" : {

"normalizedNames" : { } ,

"lazyUpdate" : null

} ,

"status" : 200 ,

"statusText" : "OK" ,

"url" : "https://api.github.com/users/tektutorialshub/repos" ,

"ok" : true ,

"type" : 4 ,

"body" : [

{

"id" : 102269857 ,

****************** Removed for clarity *****

}

]

}

events

You can also listen to progress events by using the { observe: 'events', reportProgress: true } . You can read about observe the response

getReposRawResponse ( userName : string ) : Observable < any > {

return this . http . get ( this . baseURL + 'users/' + userName + '/repos' , { observe : 'events' , reportProgress : true } )

}

Response Type

The responseType determines how the response is parsed. it can be one of the arraybuffer , json blob or text . The default behavior is to parse the response as JSON.

Strongly typed response

Instead of any , we can also use a type as shown below

getReposTypedResponse ( userName : string ) : Observable < repos [ ] > {

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' )

}

String as Response Type

The API may return a simple text rather than a JSON. Use responsetype: 'text' to ensure that the response is parsed as a string.

getReposTypedResponse ( userName : string ) : Observable < repos [ ] > {

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' , { responsetype : 'text' } )

}

Catching Errors

The API might fail with an error. You can catch those errors using catchError . You either handle the error or throw it back to the component using the throw err

getReposCatchError ( userName : string ) : Observable < repos [ ] > {

return this . http . get < repos [ ] > ( this . baseURL + 'usersY/' + userName + '/repos' )

. pipe (

catchError ( ( err ) = > {

console . error ( err ) ;

throw err ;

}

)

}

Read more about error handling from Angular HTTP interceptor error handling

Transform the Response

You can make use of the map , filter RxJs Operators to manipulate or transform the response before sending it to the component.

getReposMap ( userName : string ) : Observable < repos [ ] > {

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' )

. pipe (

map ( ( data ) = > {

//You can perform some transformation here

return data ;

} ) ,

catchError ( ( err , caught ) = > {

console . error ( err ) ;

throw err ;

}

)

}

URL Parameters

The URL Parameters or Query strings can be added to the request easily using the HttpParams option. All you need to do is to create a new HttpParams class and add the parameters as shown below.

//URL Parameter

getReposUrlParameter ( userName : string ) : Observable < repos [ ] > {

const params = new HttpParams ( )

. set ( 'sort' , "description" )

. set ( 'page' , "2" ) ;

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' , { 'params' : params } )

. pipe (

map ( ( response ) = > {

return response ;

} ) ,

catchError ( ( err , caught ) = > {

console . error ( err ) ;

throw err ;

}

)

}

The above code sends the GET request to the URL https://api.github.com/users/tektutorialshub/repos?sort=description&page=2

The following code also works.

getReposUrlParameter ( userName : string ) : Observable < repos [ ] > {

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos?sort=description&page=2' )

. pipe (

map ( ( response ) = > {

return response ;

} ) ,

catchError ( ( err , caught ) = > {

console . error ( err ) ;

throw err ;

}

)

}

HTTP Headers

You can also add HTTP Headers using the HttpHeaders option as shown below. You can make use of the Http Interceptor to set the common headers .

//HTTP Headers

getReposHeaders ( userName : string ) : Observable < repos [ ] > {

const params = new HttpParams ( )

. set ( 'sort' , "description" )

. set ( 'page' , "2" ) ;

const headers = new HttpHeaders ( )

. set ( 'Content-Type' , 'application/json' )

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' , { 'params' : params , 'headers' : headers } )

. pipe (

map ( ( response ) = > {

return response ;

} ) ,

catchError ( ( err , caught ) = > {

console . error ( err ) ;

throw err ;

}

)

}

Send Cookies

You can send cookies with every request using the withCredentials=true as shown below. You can make use of the Http Interceptor to set the withCredentials=true for all requests.

//With Credentials

getReposWithCookies ( userName : string ) : Observable < repos [ ] > {

const params = new HttpParams ( )

. set ( 'sort' , "description" )

. set ( 'page' , "2" ) ;

const headers = new HttpHeaders ( )

. set ( 'Content-Type' , 'application/json' )

return this . http . get < repos [ ] > ( this . baseURL + 'users/' + userName + '/repos' , { 'params' : params , 'headers' : headers , withCredentials : true } )

. pipe (

map ( ( response ) = > {

return response ;

} ) ,

catchError ( ( err , caught ) = > {

console . error ( err ) ;

throw err ;

}

)

}

Summary

This guide explains how to make use of HTTP get in Angular using an example app. In the next tutorial, we will look at the HTTP post method.

HTTP Client Tutorial

Http Post Example

8 thoughts on “Angular HTTP GET Example using httpclient”

Adrian

December 8, 2022 at 11:14 am

Great explanation … thanks

Reply
Somayeh

December 3, 2022 at 12:40 am

Great job , thank you so much fram France.

Reply
SWipra

April 26, 2022 at 12:05 pm

I’m facing issues in downloading files as Zip using angular 13.
It downloads as zip but looks like zip file gets corrupted.

But the zip file has size. Any help is much appreciated.

Reply
Anonymous

September 3, 2021 at 2:26 pm

explained well in every part of angular

Reply
George Kibira

April 28, 2021 at 7:11 pm

This tutorial is nothing but excellent. Thanks for the good work!
For those who have not gone through the introduction to HttpModule your application might throw an error because the missing providers [] declaration in either the component or the ngModule class

Reply
arun prasad

April 18, 2021 at 10:55 pm

Great use case. Well working example. This saved me. Thanks a lot.

Reply
Anonymous

February 11, 2021 at 9:10 am

Great use case example. Thks

Reply
pdaus

February 10, 2021 at 9:45 am

very well explained

Reply

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

</div></fieldset></div><div class="ast-comment-formwrap ast-row"><p class="comment-form-author ast-col-xs-12 ast-col-sm-12 ast-col-md-4 ast-col-lg-4"><label for="author" class="screen-reader-text">Name*</label><input id="author" name="author" type="text" value="" placeholder="Name*" size="30"/></p><p class="comment-form-email ast-col-xs-12 ast-col-sm-12 ast-col-md-4 ast-col-lg-4"><label for="email" class="screen-reader-text">Email*</label><input id="email" name="email" type="text" value="" placeholder="Email*" size="30"/></p><p class="comment-form-url ast-col-xs-12 ast-col-sm-12 ast-col-md-4 ast-col-lg-4"><label for="url"><label for="url" class="screen-reader-text">Website</label><input id="url" name="url" type="text" value="" placeholder="Website" size="30"/></label></p></div><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment »"/> <input type="hidden" name="comment_post_ID" value="16676" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/></p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="934c495322"/></p><p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"/></label><input type="hidden" id="ak_js_1" name="ak_js" value="33"/></p></form></div><p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed</a>.</p></div></main></div><div class="widget-area secondary" id="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"><div class="sidebar-main"><aside id="text-139" class="widget widget_text"><div class="textwidget"><div class="ai-viewports ai-viewport-1 ai-insert-13-72492477" style="margin: 8px auto 8px 0; text-align: left; display: block; clear: both; width: 300px; height: 250px;" data-insertion-position="prepend" data-selector=".ai-insert-13-72492477" data-insertion-no-dbg="" data-code="PGRpdiBjbGFzcz0nY29kZS1ibG9jayBjb2RlLWJsb2NrLTEzJyBzdHlsZT0nbWFyZ2luOiA4cHggYXV0byA4cHggMDsgdGV4dC1hbGlnbjogbGVmdDsgZGlzcGxheTogYmxvY2s7IGNsZWFyOiBib3RoOyB3aWR0aDogMzAwcHg7IGhlaWdodDogMjUwcHg7Jz4KPCEtLSB0ZWt0dXRvcmlhbHNodWIuY29tXzMwMHgyNTBfc2lkZWJhcl9maXhlZF90b3AgLS0+CjxkaXYgc3R5bGU9Im1pbi13aWR0aDogMzAwcHg7IG1pbi1oZWlnaHQ6IDI1MHB4OyIgY2xhc3M9ImFkc2J5dmxpIiBkYXRhLWFkLXNsb3Q9InZpXzQxMzUxODczNiI+PC9kaXY+IDxzY3JpcHQ+KHZpdGFnLkluaXQgPSB3aW5kb3cudml0YWcuSW5pdCB8fCBbXSkucHVzaChmdW5jdGlvbiAoKSB7IHZpQVBJdGFnLmRpc3BsYXkoInZpXzQxMzUxODczNiIpIH0pPC9zY3JpcHQ+PC9kaXY+Cg==" data-block="13"/><div class="ai-viewports ai-viewport-1 ai-insert-14-95519090" style="margin: 8px 0; clear: both; width: 300px; height: 250px;" data-insertion-position="prepend" data-selector=".ai-insert-14-95519090" data-insertion-no-dbg="" data-code="PGRpdiBjbGFzcz0nY29kZS1ibG9jayBjb2RlLWJsb2NrLTE0JyBzdHlsZT0nbWFyZ2luOiA4cHggMDsgY2xlYXI6IGJvdGg7IHdpZHRoOiAzMDBweDsgaGVpZ2h0OiAyNTBweDsnPgo8IS0tIHRla3R1dG9yaWFsc2h1Yi5jb21fMzAweDI1MF9zaWRlYmFyX2ZpeGVkX21pZGRsZSAtLT4KPGRpdiBzdHlsZT0ibWluLXdpZHRoOiAzMDBweDsgbWluLWhlaWdodDogMjUwcHg7IiBjbGFzcz0iYWRzYnl2bGkiIGRhdGEtYWQtc2xvdD0idmlfNDEzNTUwMzU1Ij48L2Rpdj4gPHNjcmlwdD4odml0YWcuSW5pdCA9IHdpbmRvdy52aXRhZy5Jbml0IHx8IFtdKS5wdXNoKGZ1bmN0aW9uICgpIHsgdmlBUEl0YWcuZGlzcGxheSgidmlfNDEzNTUwMzU1IikgfSk8L3NjcmlwdD48L2Rpdj4K" data-block="14"/><div class="ai-viewports ai-viewport-1 ai-insert-15-58219478" style="margin: 8px 0; clear: both; width: 300px; height: 250px;" data-insertion-position="prepend" data-selector=".ai-insert-15-58219478" data-insertion-no-dbg="" data-code="PGRpdiBjbGFzcz0nY29kZS1ibG9jayBjb2RlLWJsb2NrLTE1JyBzdHlsZT0nbWFyZ2luOiA4cHggMDsgY2xlYXI6IGJvdGg7IHdpZHRoOiAzMDBweDsgaGVpZ2h0OiAyNTBweDsnPgo8IS0tIHRla3R1dG9yaWFsc2h1Yi5jb21fMzAweDI1MF9zaWRlYmFyX2ZpeGVkX2JvdHRvbSAtLT4KPGRpdiBzdHlsZT0ibWluLXdpZHRoOiAzMDBweDsgbWluLWhlaWdodDogMjUwcHg7IiBjbGFzcz0iYWRzYnl2bGkiIGRhdGEtYWQtc2xvdD0idmlfNDEzNTIwNDI4Ij48L2Rpdj4gPHNjcmlwdD4odml0YWcuSW5pdCA9IHdpbmRvdy52aXRhZy5Jbml0IHx8IFtdKS5wdXNoKGZ1bmN0aW9uICgpIHsgdmlBUEl0YWcuZGlzcGxheSgidmlfNDEzNTIwNDI4IikgfSk8L3NjcmlwdD48L2Rpdj4K" data-block="15"/><p> </p></div></aside></div></div></div></div><footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"><div class="ast-small-footer footer-sml-layout-1"><div class="ast-footer-overlay"><div class="ast-container"><div class="ast-small-footer-wrap"><div class="ast-small-footer-section ast-small-footer-section-1"> Copyright © 2023 <span class="ast-footer-site-title">TekTutorialsHub</span> |</div></div></div></div></div></footer> 
</div><div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-left" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewbox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z"/> </svg></span> <span class="screen-reader-text">Scroll to Top</span></div> <noscript><style>.lazyload{;}</style></noscript>  <style id="astra-addon-megamenu-dynamic-inline-css">.ast-desktop .menu-item-3289 .astra-mm-icon-label.icon-item-3289,  .ast-header-break-point .menu-item-3289 .astra-mm-icon-label.icon-item-3289{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-3289 .astra-mm-icon-label.icon-item-3289 svg,  .ast-header-break-point .menu-item-3289 .astra-mm-icon-label.icon-item-3289 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19430 .astra-mm-icon-label.icon-item-19430,  .ast-header-break-point .menu-item-19430 .astra-mm-icon-label.icon-item-19430{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19430 .astra-mm-icon-label.icon-item-19430 svg,  .ast-header-break-point .menu-item-19430 .astra-mm-icon-label.icon-item-19430 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-16370 .astra-mm-icon-label.icon-item-16370,  .ast-header-break-point .menu-item-16370 .astra-mm-icon-label.icon-item-16370{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-16370 .astra-mm-icon-label.icon-item-16370 svg,  .ast-header-break-point .menu-item-16370 .astra-mm-icon-label.icon-item-16370 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-27322 .astra-mm-icon-label.icon-item-27322,  .ast-header-break-point .menu-item-27322 .astra-mm-icon-label.icon-item-27322{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-27322 .astra-mm-icon-label.icon-item-27322 svg,  .ast-header-break-point .menu-item-27322 .astra-mm-icon-label.icon-item-27322 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19192 .astra-mm-icon-label.icon-item-19192,  .ast-header-break-point .menu-item-19192 .astra-mm-icon-label.icon-item-19192{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19192 .astra-mm-icon-label.icon-item-19192 svg,  .ast-header-break-point .menu-item-19192 .astra-mm-icon-label.icon-item-19192 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-6550 .astra-mm-icon-label.icon-item-6550,  .ast-header-break-point .menu-item-6550 .astra-mm-icon-label.icon-item-6550{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-6550 .astra-mm-icon-label.icon-item-6550 svg,  .ast-header-break-point .menu-item-6550 .astra-mm-icon-label.icon-item-6550 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-3354 .astra-mm-icon-label.icon-item-3354,  .ast-header-break-point .menu-item-3354 .astra-mm-icon-label.icon-item-3354{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-3354 .astra-mm-icon-label.icon-item-3354 svg,  .ast-header-break-point .menu-item-3354 .astra-mm-icon-label.icon-item-3354 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-8736 .astra-mm-icon-label.icon-item-8736,  .ast-header-break-point .menu-item-8736 .astra-mm-icon-label.icon-item-8736{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-8736 .astra-mm-icon-label.icon-item-8736 svg,  .ast-header-break-point .menu-item-8736 .astra-mm-icon-label.icon-item-8736 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19191 .astra-mm-icon-label.icon-item-19191,  .ast-header-break-point .menu-item-19191 .astra-mm-icon-label.icon-item-19191{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19191 .astra-mm-icon-label.icon-item-19191 svg,  .ast-header-break-point .menu-item-19191 .astra-mm-icon-label.icon-item-19191 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19193 .astra-mm-icon-label.icon-item-19193,  .ast-header-break-point .menu-item-19193 .astra-mm-icon-label.icon-item-19193{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19193 .astra-mm-icon-label.icon-item-19193 svg,  .ast-header-break-point .menu-item-19193 .astra-mm-icon-label.icon-item-19193 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-11142 .astra-mm-icon-label.icon-item-11142,  .ast-header-break-point .menu-item-11142 .astra-mm-icon-label.icon-item-11142{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-11142 .astra-mm-icon-label.icon-item-11142 svg,  .ast-header-break-point .menu-item-11142 .astra-mm-icon-label.icon-item-11142 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-3280 .astra-mm-icon-label.icon-item-3280,  .ast-header-break-point .menu-item-3280 .astra-mm-icon-label.icon-item-3280{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-3280 .astra-mm-icon-label.icon-item-3280 svg,  .ast-header-break-point .menu-item-3280 .astra-mm-icon-label.icon-item-3280 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-3277 .astra-mm-icon-label.icon-item-3277,  .ast-header-break-point .menu-item-3277 .astra-mm-icon-label.icon-item-3277{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-3277 .astra-mm-icon-label.icon-item-3277 svg,  .ast-header-break-point .menu-item-3277 .astra-mm-icon-label.icon-item-3277 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19194 .astra-mm-icon-label.icon-item-19194,  .ast-header-break-point .menu-item-19194 .astra-mm-icon-label.icon-item-19194{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19194 .astra-mm-icon-label.icon-item-19194 svg,  .ast-header-break-point .menu-item-19194 .astra-mm-icon-label.icon-item-19194 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19196 .astra-mm-icon-label.icon-item-19196,  .ast-header-break-point .menu-item-19196 .astra-mm-icon-label.icon-item-19196{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19196 .astra-mm-icon-label.icon-item-19196 svg,  .ast-header-break-point .menu-item-19196 .astra-mm-icon-label.icon-item-19196 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-19195 .astra-mm-icon-label.icon-item-19195,  .ast-header-break-point .menu-item-19195 .astra-mm-icon-label.icon-item-19195{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-19195 .astra-mm-icon-label.icon-item-19195 svg,  .ast-header-break-point .menu-item-19195 .astra-mm-icon-label.icon-item-19195 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-31125 .astra-mm-icon-label.icon-item-31125,  .ast-header-break-point .menu-item-31125 .astra-mm-icon-label.icon-item-31125{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-31125 .astra-mm-icon-label.icon-item-31125 svg,  .ast-header-break-point .menu-item-31125 .astra-mm-icon-label.icon-item-31125 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-7587 .astra-mm-icon-label.icon-item-7587,  .ast-header-break-point .menu-item-7587 .astra-mm-icon-label.icon-item-7587{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-7587 .astra-mm-icon-label.icon-item-7587 svg,  .ast-header-break-point .menu-item-7587 .astra-mm-icon-label.icon-item-7587 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-7586 .astra-mm-icon-label.icon-item-7586,  .ast-header-break-point .menu-item-7586 .astra-mm-icon-label.icon-item-7586{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-7586 .astra-mm-icon-label.icon-item-7586 svg,  .ast-header-break-point .menu-item-7586 .astra-mm-icon-label.icon-item-7586 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}.ast-desktop .menu-item-7589 .astra-mm-icon-label.icon-item-7589,  .ast-header-break-point .menu-item-7589 .astra-mm-icon-label.icon-item-7589{display:inline-block;vertical-align:middle;line-height:0;margin:5px;}.ast-desktop .menu-item-7589 .astra-mm-icon-label.icon-item-7589 svg,  .ast-header-break-point .menu-item-7589 .astra-mm-icon-label.icon-item-7589 svg{color:var(--ast-global-color-0);fill:var(--ast-global-color-0);width:20px;height:20px;}</style>           <div id="cookie-notice" role="dialog" class="cookie-notice-hidden cookie-revoke-hidden cn-position-bottom" aria-label="Cookie Notice" style="background-color: rgba(50,50,58,1);"><div class="cookie-notice-container" style="color: #fff"><span id="cn-notice-text" class="cn-text-container">We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.</span><span id="cn-notice-buttons" class="cn-buttons-container"><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie cn-button" aria-label="Ok" style="background-color: #00a99d">Ok</a><a href="https://www.tektutorialshub.com/privacy-policy/" target="_blank" id="cn-more-info" class="cn-more-info cn-button" aria-label="Privacy policy" style="background-color: #00a99d">Privacy policy</a></span><span id="cn-close-notice" data-cookie-set="accept" class="cn-close-icon" title="No"/></div></div>