Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (contact form api | laravel api calling from angular 8 project ) Part 20

Laravel api calling from angular 8 project

We had made laravel web api for contact form in our previous angular laravel project tutorial. In this video, we will call Laravel Web API in Angular Project. so first of all we can include some dependency  for required our project api calling process

1.open app.module.ts file 

in app.module.ts file you can import two type of dependency in top section of the file 

import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
ReactiveFormsModule,HttpClientModule register in import section
 imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
 

 

2.open home.component.ts file 

import { Component, OnInit } from '@angular/core';
import {  FormGroup,FormBuilder } from '@angular/forms';
import { HttpClient,HttpHeaders } from '@angular/common/http';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  contectForm:FormGroup;
  base_url="http://localhost/tutorial/angular-laravel-project/";
  constructor(private fb:FormBuilder,private http:HttpClient) { 
    this.contectForm=fb.group({
      name:'',
      email:'',
      mobile_no:'',
      message:''
    });
  }
  
  ngOnInit(): void {
  }
  save_contact(contectForm)
  {
    const headers = new HttpHeaders();
      headers.append('Content-Type', 'multipart/form-data');
      headers.append('Accept', 'application/json');
    let options={
      headers:headers,
    };
    this.http.post(this.base_url+'public/api/contect_form',contectForm.value,options).subscribe((data)=>{
      this.contectForm.reset();
      alert('Contact Query Successfully Send');
    });
    console.log(contectForm.value);
  }

}
 

 

3 . homecomponent.html

<div class="col-sm-12">
    <form [formGroup]="contectForm" (ngSubmit)="save_contact(contectForm)">
        <div class="form-group">
          <label>Enter Name</label>
          <input type="text" formControlName="name" class="form-control">
        </div>
        <div class="form-group">
          <label>Enter E-Mail</label>
          <input type="text" formControlName="email"  class="form-control">
        </div>
        <div class="form-group">
          <label>Enter Mobile No</label>
          <input type="text" formControlName="mobile_no" class="form-control">
        </div>
        <div class="form-group">
          <label>Enter Message</label>
          <textarea  class="form-control" formControlName="message"></textarea>
        </div>
        <div class="form-group">
          <button class="btn btn-info">Send</button>
        </div>
    </form>
</div>
 

Complete Code of home.component.html file 


<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    
    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide1.jpeg" alt="Slide 1" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide2.jpg" alt="Slide 2" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide3.jpeg" alt="Slide 3" >
      </div>
    </div>
    
    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
  <div class="container">
  <div class="row mt-4">
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
   
    <div class="row mt-4">
      <div class="col-sm-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.7553145456345!2d75.7629231144451!3d23.179128916276408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396375255b13bac9%3A0xb240786696dde6ed!2smy%20project%20hd!5e0!3m2!1sen!2sin!4v1587295364997!5m2!1sen!2sin" width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <h4 class="text-center">Contect Form</h4>
          </div>
          <div class="col-sm-12">
            <form [formGroup]="contectForm" (ngSubmit)="save_contact(contectForm)">
            <div class="form-group">
              <label>Enter Name</label>
              <input type="text" formControlName="name" class="form-control">
            </div>
            <div class="form-group">
              <label>Enter E-Mail</label>
              <input type="text" formControlName="email"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Mobile No</label>
              <input type="text" formControlName="mobile_no" class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Message</label>
              <textarea  class="form-control" formControlName="message"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-info">Send</button>
            </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

Tutorial Topics