Google Pexel Photo Search Using Angular 8

Introduction

 

In this article, we will learn how to search images and vidoes from Google Pexel using its API in Angular 8. Anyone can download the images and the videos for free. 

 

The Pexels API provides a way for you to access all free videos and photos from Pexels.

 

You can interract with the API directly, or alternatively, use one of the language libraries. If you don't see a library for the language we use we can search Github for an unofficial one or write our own.

 

Prerequisites

• Basic knowledge of Angular
• Visual Studio Code must be installed
• Angular CLI must be installed
• Node JS must be installed

Google Pexel Image Search API.

 

To get Google Pexel API go to here.

 

 

Click on the Documentation; you can find the API there. 

 

 https://api.pexels.com/v1/search?query=nature&per_page=1

 

 

Get the API key

 

To get the API key for photo search click on the Authorizatiom menu and you will find a direct link to get your API key but for that you must need to login with your Google account.

 

 

Now API and authorization key is ready and it's time to create our Angular application. For that go to your project folder and create an Angualr application.

 

Create Angular project

 

Step 1

 

Create a new Angular project using the following NPM command:

 

ng new googleimagesearch

 

Step 2

 

Open the newly-created project in Visual Studio code and install Bootstrap in this project.

 

npm install bootstrap --save

 

Now, open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

@import'~bootstrap/dist/css/bootstrap.min.css';

Step 3

 

Now, let's create a new component, by using the following command.

 

ng g c imageSearch

 

Step 4

Now, open imageSearch.component.html file and add the following code in this file.

<div class="card-header main-search">
  <div class="row">
    <div class="col-12 col-md-3 col-xl-3">
      <input [(ngModel)]="searchData" class="AutoFocus form-control" placeholder="Type something..." type="text">
    </div>
    <div class="col-12 col-md-3 col-xl-3">
      <input name="deliveryNumber" [(ngModel)]="perPage" class="AutoFocus form-control" placeholder="No of Images"
        type="text">
    </div>
    <div class="ml-auto">
      <input type="button" (click)="search()" value="Search" class="btn btn-primary search-btn">
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div *ngFor="let pic of photos" class="col-sm-4">
      <div style="margin-top: 10px;" class="card">
        <img class="card-img-top" [src]="pic.src.landscape" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <a href="#" class="btn btn-primary">Know more</a>
        </div>
      </div>
    </div>
  </div>
</div>

Step 5

 

The nextsStep is to open imageSearch.component.tsfile and paste the below code. 

import { Component } from '@angular/core';
import { PexelPhotoSearchService } from '../pexel-photo-search.service';

@Component({
  selector: 'app-image-search',
  templateUrl: './image-search.component.html',
  styleUrls: ['./image-search.component.css']
})
export class ImageSearchComponent {
  searchData;
  perPage: any;
  photos = [];
  constructor(private pexelPhotoSearchService: PexelPhotoSearchService) { }

  search() {
    this.pexelPhotoSearchService.getdata(this.searchData, this.perPage).subscribe((response: any) => {
      console.log(response);
      this.photos = response.photos;
    }, (error) => {
      console.log(error);
    })
  }

}

In the above image SharingData is sending data using next as well as subsribed in the constructor to fetch the data in the data stream.

 

Step 6

 

Create a service where we can keep the Authorization key and search API.

ng g s pexelphotosearch

Next , open pexel-photo-search.service.ts and paste in that file.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable,throwError } from 'rxjs';
import {catchError} from 'rxjs/operators';

const httpOptions={
  headers : new HttpHeaders({
    'Authorization':'563492ad6f917000010000014060d806c66c47b88b9b4d7f8c487692'
  })
}

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

  constructor(private http:HttpClient) { }

  getdata(search,perPage):Observable<any>{
    const url="https://api.pexels.com/v1/search?query="+search+"&per_page="+perPage;
    return this.http.get<any>(url,httpOptions).pipe(catchError(this.handelError));
  }
  handelError(error){
    return throwError(error.message || "Server Error");
  }
}

 

 

In the above image the API and Authorization key is the key factor in this application. It can fetch the image which you have searched. 

 

The last step is to give the selector of our component inside app.component.html file. 

<app-image-search></app-image-search>

Now we are done with all our coding part and it's  time for the output.

 

 

 

 

Summary

 

In this article, we learned how to find any image using Google pexel api.

 

Not only that, but we can also find the videos through Google Pexel API  here.