forms added, search added

src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ import { BusquedaComponent } from './busqueda/busqueda.component';
 const routes: Routes = [
 	{ path: '', component : MainComponent },
 	{ path: 'informacion/:id', component: InformacionComponent },
-	{ path: 'busqueda', component: BusquedaComponent }
+	{ path: 'busqueda/:search', component: BusquedaComponent }
 ];
 /* { path: '**', component: PageNotFoundComponent } */
 

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { NavBarComponent } from './nav-bar/nav-bar.component';
 import { InformacionComponent } from './informacion/informacion.component';
 import { ImagesService } from './services/images.service';
 import { BusquedaComponent } from './busqueda/busqueda.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
 	declarations: [
@@ -21,7 +22,8 @@ import { BusquedaComponent } from './busqueda/busqueda.component';
 	],
 	imports: [
 		BrowserModule,
-		AppRoutingModule
+		AppRoutingModule,
+		FormsModule
 	],
 	providers: [ImagesService],
 	bootstrap: [AppComponent]

src/app/busqueda/busqueda.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 @Component({
 	selector: 'app-busqueda',
@@ -7,12 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BusquedaComponent implements OnInit {
 
+	search : string;
 	order : string = "Asc";
 	results : any[];
 
-	constructor() { }
+	constructor(private route : ActivatedRoute) { }
 
 	ngOnInit(): void {
+
+		this.route.paramMap.subscribe(
+			(params) => this.search = params.get('search')
+		);
+
 		this.results = [
 			"cosa1",
 			"cosa2",
@@ -25,6 +32,6 @@ export class BusquedaComponent implements OnInit {
 	}
 
 	change() {
-		this.order == "Asc" ? "Des" : "Asc";
+		this.order = (this.order == "Asc" ? "Des" : "Asc");
 	}
 }

src/app/nav-bar/nav-bar.component.css

@@ -38,3 +38,14 @@
 	border-radius: 10px;
 
 }
+
+.NavSuggestion {
+	background-color: white;
+	border: solid 1px grey;
+	position: absolute;
+	width: 30%;
+	left: 70%;
+	padding: 3px;
+	top: 0;
+	transform: translate(-50%,220%);
+}

src/app/nav-bar/nav-bar.component.html

@@ -6,10 +6,13 @@
 			<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 250px;">
 		</a>
 		<div class="NavSearchContainer">
-			<input class="NavInput" type="text" placeholder="Search..">
-			<a routerLink="/busqueda">
+			<input [(ngModel)]="search" (keyup)="showinput()" (keydown)="hideinput()" class="NavInput" type="text" placeholder="Search..">
+			<a routerLink="/busqueda/{{ search }}">
 				<i class="fas fa-search fa-2x" style="color:white;"></i>
 			</a>
+			<div *ngIf="suggestion" class="NavSuggestion">
+				<i>buscar {{ search }}</i>
+			</div>
 		</div>
 		<a href="javascript:" routerLink="/">
 			<i class="fas fa-user-circle fa-3x" style="color:white;"></i>

src/app/nav-bar/nav-bar.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Observable, interval } from 'rxjs';
+import { switchMap, take } from 'rxjs/operators';
 
 @Component({
-  selector: 'nav-bar',
-  templateUrl: './nav-bar.component.html',
-  styleUrls: ['./nav-bar.component.css']
+	selector: 'nav-bar',
+	templateUrl: './nav-bar.component.html',
+	styleUrls: ['./nav-bar.component.css']
 })
 export class NavBarComponent implements OnInit {
 
-  constructor() { }
+	search : string = '';
+	suggestion : boolean = false;
 
-  ngOnInit(): void {
-  }
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+	showinput() {
+		interval(1000).pipe( take(1) )
+			.subscribe(
+				() => this.suggestion = true
+			);
+	}
+
+	hideinput() {
+		this.suggestion = false;
+	}
 
 }