ItSolutionStuff.com

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...