loading...
Cover image for Creating a movie fetching service in Angular

Creating a movie fetching service in Angular

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

We have been exploring Angular for a couple of days now, and let's make it awesome by getting some data from an API.

We will be learning how to do API calls and make a custom service to do all these calls from.

The end result will look like this.

Movie search app in Angular

Making use of the HttpClient module

To make any request, we will be using the HttpClient module.
We will be loading this module in our app.module.ts so the whole application will be able to leverage it.

Let's start by defining the import at the top of our file.

import { HttpClientModule } from "@angular/common/http";
Enter fullscreen mode Exit fullscreen mode

Then we can place the actual import after the BrowserModule.

@NgModule({
  declarations: [
        // All declarations
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // Other imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
Enter fullscreen mode Exit fullscreen mode

Creating our service

Now we can go ahead and create a service to talk to our API.

Open your favorite terminal and run the following command in your project folder.

Let's first make our movie model so Typescript can leverage this.

ng generate class movie
Enter fullscreen mode Exit fullscreen mode

Open the movie.ts file in your editor and make it as such:

export class Movie {
    Poster: string;
    Title: string;
    Type: string;
    Year: string;
    imdbID: string;
}
Enter fullscreen mode Exit fullscreen mode

Now let's generate the service

ng generate service movie
Enter fullscreen mode Exit fullscreen mode

This will create a movie.service.ts file.

Open this file in your editor of choice and let's start by defining some basics.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Movie } from './movie';

export type ApiResponse = {
  Response: string;
  Search: Movie[];
  totalResults: string;
};

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  apiURL: string = 'http://www.omdbapi.com/?apikey={key}';

  constructor(private httpClient: HttpClient) {}
}
Enter fullscreen mode Exit fullscreen mode

We will be using OMDBapi to get some movies. You can still get a free APIKey on their website.

For this example, we will just be placing this URL in the file, in a real-world example, use an env file for the key or a constant file for storing URLs.

Now we can create our method. It's going to be a search method where we will search for a specific movie.

searchMovie(name: string) {
    return this.httpClient.get<any>(`${this.apiURL}&s=${name}`);
}
Enter fullscreen mode Exit fullscreen mode

Calling our service

Now we of course want to call our service and show the movies we get.

Open the welcome.component.ts file and load our service in the import.

import { MovieService } from '../movie.service';
Enter fullscreen mode Exit fullscreen mode

Now we need to inject it in the component, but adding it in the constructor.

constructor(private movieService: MovieService) { }
Enter fullscreen mode Exit fullscreen mode

Let's also define our movies variable to be an array of our Movies class.

movies: Movie[];
Enter fullscreen mode Exit fullscreen mode

On the ngOnInit we will be calling our service and asking it for Batman movies.

ngOnInit(): void {
    this.movieService.searchMovie('Batman').subscribe(result => {
      this.movies = result.Search;
    });
}
Enter fullscreen mode Exit fullscreen mode

We call the service and subscribe to the result. In turn, we set the movies variable to be the result.Search value.

Now let's adjust our HTML file to reflect our movies.

<div class="grid grid-cols-5">
    <div class="max-w-sm rounded overflow-hidden shadow-lg" *ngFor="let movie of movies">
        <img class="w-full" [src]="movie.Poster" [alt]="movie.Title">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">{{ movie.Title }}</div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

There we go, we now have our initial movie search app!

Up to you

Now it's up to you to get this code and make an input field where we can search or a specific movie.

And even click on a poster to see more information about this movie.

Let me know on Twitter what you created with this!

You can find my part of this project on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Posted on by:

dailydevtips1 profile

Chris Bongers

@dailydevtips1

I write daily web development tips that help you become a more efficient developer. 👨‍💻⚡️

Discussion

pic
Editor guide