How to use HttpHeaders in Angular 13?

By Hardik Savani April 29, 2022 Category : Angular

Hello Dev,

In this tute, we will discuss angular 13 httpheaders example. this example will help you httpheaders angular 13 example. you will learn httpheaders angular 13 authorization. I would like to show you angular 13 httpheaders set multiple headers. follow bellow step for angular 13 httpheaders cors.

HttpHeaders is a Represents the header configuration options for an HTTP request. You can set multiple headers in http client request in angular application. I will give you a simple example of how to use HttpHeaders with HttpClient. We will pass "Content-Type" and "Authorization" headers using HttpHeaders in http request. so let's see below steps:

Step 1: Create New App

You can easily create your angular app using the below command:

ng new my-new-app

Step 2: Import HttpClientModule

In this step, we need to import HttpClientModule to app.module.ts file. so let's import it as like bellow:

src/app/app.module.ts

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

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

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

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

HttpClientModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 3: Update TS File

Now we have to use this write code for HttpClient and HttpHeaders. So let's updated code as like bellow:

src/app/app.component.ts

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

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

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'fullcal';

/*------------------------------------------

--------------------------------------------

Define constructor

--------------------------------------------

--------------------------------------------*/

constructor(private http: HttpClient) {}

/*------------------------------------------

--------------------------------------------

Define ngOnInit()

--------------------------------------------

--------------------------------------------*/

ngOnInit() {

let auth_token = "asasa21212....";

const headers = new HttpHeaders({

'Content-Type': 'application/json',

'Authorization': `Bearer ${auth_token}`

});

const requestOptions = { headers: headers };

this.http

.get('http://localhost:8001/events.php', requestOptions)

.subscribe((res: any) => {

console.log(res);

});

}

}

Step 4: Create API

Here, we will create simple php file call events.php and return two events as json. so let's create file and run php app.

events.php

<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Methods: PUT, GET, POST");

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

$apache_headers= apache_request_headers();

echo json_encode($apache_headers);

Now, you have to run this file using bellow command:

php -S localhost:8001

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

you will see layout as bellow:

I hope it can help you...