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");
}
}