diff --git a/angular-image-search/src/app/image-search/image-search.component.html b/angular-image-search/src/app/image-search/image-search.component.html
index 4394852..dc6772f 100644
--- a/angular-image-search/src/app/image-search/image-search.component.html
+++ b/angular-image-search/src/app/image-search/image-search.component.html
@@ -1,10 +1,16 @@
Angular Image Search
-
-
+
-
-
\ No newline at end of file
+
+
diff --git a/angular-image-search/src/app/image-search/image-search.component.ts b/angular-image-search/src/app/image-search/image-search.component.ts
index 47c485d..4bcf516 100644
--- a/angular-image-search/src/app/image-search/image-search.component.ts
+++ b/angular-image-search/src/app/image-search/image-search.component.ts
@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
-import { ImageApiService, APIResult, ImageResult } from '../image-api.service';
+import { NgForm } from '@angular/forms';
+import { ImageApiService } from '../services/image-api.service';
+import { Image } from '../models/image.model';
@Component({
selector: 'app-image-search',
@@ -7,21 +9,21 @@ import { ImageApiService, APIResult, ImageResult } from '../image-api.service';
styleUrls: ['./image-search.component.css']
})
export class ImageSearchComponent implements OnInit {
- searchTerm = '';
loading = false;
- images: string[] = [];
+ images: Image[];
constructor(private imageAPIService: ImageApiService) { }
- ngOnInit(): void {}
+ ngOnInit(): void { }
- formSubmitted() {
- this.images = [];
+ formSubmitted(searchForm: NgForm) {
this.loading = true;
- this.imageAPIService.getImages(this.searchTerm)
- .subscribe((images: string[]) => {
+ const searchTerm = searchForm.value.searchTerm;
+
+ this.imageAPIService.getImages(searchTerm)
+ .subscribe((images: Image[]) => {
this.images = images;
- this.loading = false;
+ this.loading = false;
});
}
diff --git a/angular-image-search/src/app/models/image.model.ts b/angular-image-search/src/app/models/image.model.ts
new file mode 100644
index 0000000..4349ba5
--- /dev/null
+++ b/angular-image-search/src/app/models/image.model.ts
@@ -0,0 +1,8 @@
+export interface Image {
+ title: string;
+ image: string;
+ thumbnail: string;
+ author: string;
+ source: string;
+ created_utc: number;
+}
\ No newline at end of file
diff --git a/angular-image-search/src/app/image-api.service.spec.ts b/angular-image-search/src/app/services/image-api.service.spec.ts
similarity index 100%
rename from angular-image-search/src/app/image-api.service.spec.ts
rename to angular-image-search/src/app/services/image-api.service.spec.ts
diff --git a/angular-image-search/src/app/image-api.service.ts b/angular-image-search/src/app/services/image-api.service.ts
similarity index 53%
rename from angular-image-search/src/app/image-api.service.ts
rename to angular-image-search/src/app/services/image-api.service.ts
index b1bc69d..39b7209 100644
--- a/angular-image-search/src/app/image-api.service.ts
+++ b/angular-image-search/src/app/services/image-api.service.ts
@@ -2,17 +2,10 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
+import { Image } from '../models/image.model';
const API_URL = 'https://nature-image-api.now.sh/search?q=';
-export interface ImageResult {
- image: string;
-}
-
-export interface APIResult {
- images: ImageResult[];
-}
-
@Injectable({
providedIn: 'root'
})
@@ -20,8 +13,9 @@ export class ImageApiService {
constructor(private http: HttpClient) { }
- getImages(searchTerm): Observable {
- return this.http.get(`${API_URL}${searchTerm}`)
- .pipe(map(({ images }) => images.map(({ image }: ImageResult) => image)));
+ getImages(searchTerm: string): Observable {
+ return this.http.get(`${API_URL}${searchTerm}`).pipe(
+ map(res => res.images)
+ );
}
}