How to use HttpParams in Angular 13?

Hello,

In this tutorial we will go over the demonstration of angular 13 httpparams example. We will look at example of angular 13 httpclient httpparams example. This tutorial will give you simple example of angular 13 http params options example. In this article, we will implement a how to pass parameters using httpclient in angular 13.

HttpParams allows you to pass parameters with HttpClient request in angular, Here I will give you a very simple example of how to pass parameters using HttpParams in angular app. 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, HttpParams } 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....";
  
    let params = new HttpParams();
    params = params.append('_page', 1);
    params = params.append('_limit', 10);
  
    const requestOptions = { params: params };
      
    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");
  
$parameters = $_GET;
echo json_encode($parameters);

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