Google Pexel Photo Search In Angular 14

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