http post request from angular with example

In this post, we will learn to make http post request from angular with example

To communicate with backend server we are using HttpClient from @angular/common/http

Syntax

this.http.post<return-type>(url: string, body: any, options?);

In this example we are going to save a student details. To do that we need to invoke a http post method with student details

{  
  "firstname": "string", 
  "lastname": "string"
  "department": "string",
}

Now I am creating a model class for above json request like below

export class Student {    
    firstname: string;    
    lastname: string;
    department: string;
}

Now we need to create service class to make http post request from angular
creating service layer command:  ng g s student

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

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor() { }
  
}

Now we can create saveStudent method to save the student details in back end

 /**
   * In this method we are calling http post method 
   * @param student 
   */
  saveStudentDetails(student: Student): Observable<any>{
    return this.http.post<any>('http://localhost:8080/api/student',student);
  }

Student Service layer

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Student } from '../model/student.model';
@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor(private http: HttpClient) { }


  /**
   * In this method we are calling http post method 
   * @param student 
   */
  saveStudentDetails(student: Student): Observable<any>{
    return this.http.post<any>('http://localhost:8080/api/student',student);
  }
  
}

Now we can call this service class method from component, For example I am creating a simple form and component as like below

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../../service/student.service';
import { Student } from '../../model/student.model';

@Component({

  selector: 'app-student-details',
  templateUrl: './student-details.component.html',
  styleUrls: ['./student-details.component.css']
})
export class StudentDetailsComponent implements OnInit {

  constructor(private studentService: StudentService) { }

  student: Student=null;

  ngOnInit(): void {   

  }

  saveStudent(){
    //Creating model class
    this.student.firstname="Beginners";
    this.student.lastname="Bug";
    this.student.department="Blooggin";
    
    //Call service layer from component 
    this.studentService.saveStudentDetails(this.student).subscribe(data=>{
      console.log("Student Added successfully");
    
    },error=>{
      console.log("There was some error ",error);
    });

  }

}

<form (ngSubmit)="saveStudent()">
<label>FirstName:</label> <br/><input type="text" name="firstname" placeholder="Enter First name"><br/>
<label>LastName:</label> <br/><input type="text" name="lastname" placeholder="Enter Last name"><br/>
<label>Department:</label> <br/><input type="text" name="department" placeholder="Enter Department"><br/><br/>
<button class="button" type="submit">Add</button>

</form>

Conclusion

We learned to make http post request from angular with example

Related Articles

call http rest service from angular