Google Pexel Photo Search In Angular 14

Hello friends, In this article, we will learn how to search images from Google Pexel using its API in Angular 14.

The Pexels API provides access to all free videos and photos from Pexels.

Prerequisites

  • Basic knowledge of Angular
  • Visual Studio Code

To get Google Pexel API Authentication to go here.

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 the reference in styles.css file add this line.

@import'~bootstrap/dist/css/bootstrap.min.css';
Step 3: Now, let’s create a new service, by using the following command.
ng g s pexelphotosearch
Step 4: Now, open app.module.ts file and add the following code to this file.
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Now, open pexelphotosearch.service.ts file and add the following code to this file.

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

@Injectable({
  providedIn: 'root'
})

export class PexelphotosearchService {

  constructor(private http: HttpClient) { }

  search(search: any, perPage: any) {
    const requestOptions = {
      headers: new HttpHeaders({
        'Authorization': 'Add your token here'
      })
    };
    const url = "https://api.pexels.com/v1/search?query=" + search + "&per_page=" + perPage;
    return this.http.get<any>(url, requestOptions).pipe(catchError(this.handelError));
  }
  handelError(error: any) {
    return throwError(error.message || "Server Error");
  }
}

Step 6: Now, open app.component.ts file and add the following code to this file.

import { Component } from '@angular/core';
import { PexelphotosearchService } from './pexelphotosearch.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  photos: any = [];

  constructor(private service: PexelphotosearchService) { }

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

Step 7: Now, open app.component.html file and add the following code to this file.

<div class="container pt-5">
  <form #userlogin="ngForm" (ngSubmit)="search(userlogin.value)">
    <div class="row">
      <div class="col-md-6">
        <input type="text" name="search" placeholder="search" ngModel class="form-control">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="perPage" value="10" placeholder="10" ngModel>
      </div>
    </div>
    <input type="submit" class="btn btn-primary mt-3" value="submit">
  </form>
</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">{{pic.alt}}</h5>
        </div>
      </div>
    </div>
  </div>
</div>

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

Output:

Summary

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

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories