Developer Snippet Diary

Sending a Post Request | Angular HTTP | Angular 15+

in app.module.ts add import

import { FormsModule } from '@angular/forms';
import {HttpClient, HttpClientModule} from '@angular/common/http';
 imports: [
    FormsModule,
    HttpClientModule
  ],

2. Make view

<form #myForm="ngForm" class="mt-5" (ngSubmit)="handleForm(myForm.value)">
    <input type="email" name="email" [(ngModel)]="email">
    <input type="text" name="alert_preference" [ngModel]="alert_category" value="rat 9 bajay">
    <input type="text" name="alert_category" ngModel value="all">
    <button type="submit">Submit</button>
</form>

in component

import { HttpClient } from '@angular/common/http';
export class HomeComponent {
  name:any = '';
  constructor(private http:HttpClient){
  }

  email:string='';
  alert_preference:string='weekly';
  alert_category:string='all';
  url:string='';
  handleForm(data:any){
    this.url="domain.com";
    console.log(data);
    this.http.post(this.url,data).subscribe((res)=>{
      console.log(res);
    });
  }
}

SEND REQUEST WITH CUSTOM HEADERS:

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

const headers = new HttpHeaders()
    .set('Content-Type', 'text/plain');
    const options = {
      headers: headers
    };         
    let req = this.http.post<any>("https://sample.net", {x:"cool"}, options);
    req.subscribe(res => {
      if (res == null) {
        return;
      }
      console.log("All Filters: ", res);
Posted by: R GONDAL
Email: rizikmw@gmail.com