I put the name of the background photo location to be searched in the…

… input

src/app/components/form/form.component.html

@@ -1,4 +1,4 @@
-<div class="container" id="home-page" (load)="changeBackgroundImage()">
+<div class="container" id="home-page">
   <app-header></app-header>
   <div class="page-content">
     <div class="search-content">
@@ -11,7 +11,7 @@ <h1 class="page-title">
           <i class="fas fa-map-marker-alt"></i>
           <input 
           id="searchInput"
-          (keyup)="getLocation($event)"
+          (change)="getLocation($event)"
           (keyup.enter)="getHotels()"
           class="search-input" 
           placeholder="Vai pra onde?"
@@ -23,12 +23,10 @@ <h1 class="page-title">
           Pesquisar
           <i class="fas fa-search"></i>
         </button>
-
-        <button class="button" (click)="changeBackgroundImage()">Mudar</button>
       </div>
     </div>
     <footer>
-      <button class="background-place" (click)="sendLocationToInput()" id="place-name"></button>
+      <button class="background-place" value="{{ this.name }}" (click)="sendLocationToInput()" id="place-name">{{ this.name }}</button>
     </footer>
   </div>
 </div>

src/app/components/form/form.component.ts

@@ -13,6 +13,7 @@ export class FormComponent implements OnInit {
   hotels: Array<any>
   types: Array<any>
   location: string
+  name: string
   stars: string
   pagination: any
   currentPage: number
@@ -24,8 +25,12 @@ export class FormComponent implements OnInit {
     this.currentPage = 1;
   }
 
-  getLocation(evento: KeyboardEvent){
-    this.location = (<HTMLInputElement>evento.target).value;
+  getLocation(evento: KeyboardEvent, value: null){
+    if(value !== null) {
+      this.location = value;
+    }
+
+    this.location = document.getElementById('searchInput').value;
   }
 
   getHotels(page = 1) {
@@ -83,37 +88,37 @@ export class FormComponent implements OnInit {
   changeBackgroundImage() {
 
     const fernandoDeNoronha = {
-      name: 'Fernando De Noronha - PE',
+      name: 'Fernando De Noronha',
       url: '../../../assets/images/fernando-de-noronha.png',
     };
 
     const portoSeguro = {
-      name: 'Porto Seguro - BA',
+      name: 'Porto Seguro',
       url: '../../../assets/images/porto-seguro.png',
     };
 
     const arraialDoCabo = {
-      name: 'Arraial Do Cabo - RJ',
+      name: 'Arraial Do Cabo',
       url: '../../../assets/images/arraial-do-cabo.png',
     };
 
     const vancouver = {
-      name: 'Vancouver - Canada',
+      name: 'Vancouver',
       url: '../../../assets/images/vancouver.png',
     };
 
     const santorini = {
-      name: 'Santorini - Grecia',
+      name: 'Santorini',
       url: '../../../assets/images/santorini.png',
     };
 
     const bali = {
-      name: 'Bali - Indonesia',
+      name: 'Bali',
       url: '../../../assets/images/bali.png',
     };
 
     const kyoto = {
-      name: 'Kioto - Japão',
+      name: 'Kioto',
       url: '../../../assets/images/kyoto.png',
     };
 
@@ -123,7 +128,7 @@ export class FormComponent implements OnInit {
     };
 
     const bonito = {
-      name: 'Bonito - MS',
+      name: 'Bonito',
       url: '../../../assets/images/bonito.jpg',
     };
 
@@ -136,18 +141,17 @@ export class FormComponent implements OnInit {
     const bgImgName = images[randomNumber].name;
 
     const home = document.getElementById('home-page');
-    const name = document.getElementById('place-name');
+    this.name = document.getElementById('place-name').innerHTML;
 
-    return home.style.backgroundImage = bgImg, name.innerHTML = bgImgName;
+    return home.style.backgroundImage = bgImg, this.name = bgImgName;
   }
 
   sendLocationToInput() {
-    const name = document.getElementById('place-name').innerHTML;
+    const name = document.getElementById('place-name').value;
     let input = document.getElementById('searchInput');
+    input.value = name;
 
-    console.log(typeof input.value)
-
-    return input.value = name.toString();
+    return this.getLocation(null, name);
   }
 
   backToTop() {