Fetch data from movie rest api service

Today i will fetch a data from movie rest api we will create a movie service and inject this service in our app.component.ts file
Demo

html template
<div class="container">
      <div class="jumbotron">
        <h3 class="text-center">Search For Any Movie</h3>
        <form id="searchForm">
          <input type="text" #searchText class="form-control mb-2" id="searchText" placeholder="Search Movie....">
          Submit
        </form>
      </div>
      <div class="row">
        <div *ngFor="let result of results" class="col mb-1">
          <div  class="card" style="width: 18rem;">
  <img class="card-img-top" src="{{result.Poster}}" alt="Card image cap">
  <div class="card-body">
    <h6>Movie Name:{{result.Title }}</h6>
    <p class="card-text">Year:{{result.Year }}</p>
  </div>
</div>
       </div>
         </div>
    </div>
movie service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class MovieService {
  constructor(private _httpClient:HttpClient) { }
 getMovies(title){
   if(!title){
     alert("Please enter movie to search");
    
     return;
   }
   return this._httpClient.get("http://www.omdbapi.com/?apikey=d3ds2a5a&s=" + title)
    }
}


movie component

import { Component, } from '@angular/core';
import { MovieService } from './movie.service';

import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private _MovieService:MovieService){
  }
    results:any=[];
    getMoviesValue(title){
 this._MovieService.getMovies(title).subscribe((data:any)=>{
   this.results = data.Search;
 console.log(this.results);
 })
    }}

Leave a Reply

Your email address will not be published. Required fields are marked *