added a purchase component and the search works better

src/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 import { InformacionComponent } from './informacion/informacion.component';
 import { MainComponent } from './main/main.component';
 import { BusquedaComponent } from './busqueda/busqueda.component';
+import { CompraComponent } from './compra/compra.component';
 
 const routes: Routes = [
 	{ path: '', component : MainComponent },
 	{ path: 'informacion/:id', component: InformacionComponent },
-	{ path: 'busqueda/:search', component: BusquedaComponent }
+	{ path: 'busqueda/:search', component: BusquedaComponent },
+	{ path: 'comprar/:id', component: CompraComponent }
 ];
 /* { path: '**', component: PageNotFoundComponent } */
 

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { InformacionComponent } from './informacion/informacion.component';
 import { ImagesService } from './services/images.service';
 import { BusquedaComponent } from './busqueda/busqueda.component';
 import { FormsModule } from '@angular/forms';
+import { CompraComponent } from './compra/compra.component';
 
 @NgModule({
 	declarations: [
@@ -18,7 +19,8 @@ import { FormsModule } from '@angular/forms';
 		MainComponent,
 		NavBarComponent,
 		InformacionComponent,
-		BusquedaComponent
+		BusquedaComponent,
+		CompraComponent
 	],
 	imports: [
 		BrowserModule,

src/app/compra/compra.component.html

+Está por comprar la funcion de id {{ eventid }}

src/app/compra/compra.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompraComponent } from './compra.component';
+
+describe('CompraComponent', () => {
+  let component: CompraComponent;
+  let fixture: ComponentFixture<CompraComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CompraComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CompraComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/compra/compra.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+	selector: 'app-compra',
+	templateUrl: './compra.component.html',
+	styleUrls: ['./compra.component.css']
+})
+export class CompraComponent implements OnInit {
+
+	public eventid
+
+	constructor(
+		private route: ActivatedRoute,
+		private router: Router,
+	) { }
+
+	ngOnInit(): void {
+		this.route.paramMap.subscribe(
+			(params) => {
+				this.eventid = params.get('id');
+			}
+		);
+	}
+
+}

src/app/informacion/informacion.component.css

@@ -49,7 +49,6 @@
 
 /* Style the tab content */
 .tabcontent {
-	display: none;
 	margin: none;
 }
 

src/app/informacion/informacion.component.html

@@ -3,7 +3,7 @@
 		<img class="EspectaculoImagen" src="assets/images/{{ imagename }}">
 		<div class="tab">
 			<svg width="70" height="75">
-				<a href="#" onclick="openCity(event, 'Funciones')">
+				<a (click)="showInfo('Funciones')">
 					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
 					<image xlink:href="assets/images/Funciones.png"
 						x="5" y="5" height="40px" width="40px"></image>
@@ -11,7 +11,7 @@
 			</svg>
 
 			<svg width="70" height="75">
-				<a href="#" onclick="openCity(event, 'Entradas')">
+				<a (click)="showInfo('Entradas')">
 					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
 					<image xlink:href="assets/images/Entrada.png"
 						x="5" y="5" height="40px" width="40px"></image>
@@ -19,14 +19,14 @@
 			</svg>
 
 			<svg width="70" height="75">
-				<a href="#" onclick="openCity(event, 'Teatro')">
+				<a (click)="showInfo('Teatro')">
 					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
 					<image xlink:href="assets/images/Teatro.png"
 						x="5" y="5" height="40px" width="40px"></image>
 				</a>
 			</svg>
 			<svg width="70" height="75">
-				<a href="#" onclick="openCity(event, 'Duracion')">
+				<a (click)="showInfo('Tiempo')">
 					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
 					<image xlink:href="assets/images/Tiempo.png"
 						x="5" y="5" height="40px" width="40px"></image>
@@ -34,18 +34,18 @@
 			</svg>
 		</div>
 
-		<div id="Funciones" class="tabcontent">
+		<div *ngIf="funciones" id="Funciones" class="tabcontent">
 			<h3>Funciones</h3>
 		</div>
 
-		<div id="Entradas" class="tabcontent">
+		<div *ngIf="entradas" class="tabcontent">
 			<h3>Entradas</h3>
 		</div>
 
-		<div id="Teatro" class="tabcontent">
+		<div *ngIf="teatro" class="tabcontent">
 			<h3>Teatro</h3>
 		</div>
-		<div id="Duracion" class="tabcontent">
+		<div *ngIf="tiempo" class="tabcontent">
 			<h3>Duracion</h3>
 		</div>
 
@@ -65,6 +65,8 @@
 			ut aliquip ex ea commodo consequat.</p>
 		<h3>Calificacion: &#9733; &#9733; &#9733; &#9733; &#9734;</h3>
 
-		<input class="EspectaculoBoton" type="button" value="Quiero Mi Entrada!">
+		<button routerLink="/comprar/{{ imageid }}" class="EspectaculoBoton" type="button">
+			Quiero mi entrada!
+		</button>
 	</div>
 </div>

src/app/informacion/informacion.component.ts

@@ -16,6 +16,12 @@ export class InformacionComponent implements OnInit {
 	};
 
 	public imagename;
+	public imageid;
+
+	public funciones : boolean = false;
+	public entradas : boolean = false;
+	public tiempo : boolean = false;
+	public teatro : boolean = false;
 
 	constructor(
 		private route : ActivatedRoute,
@@ -24,8 +30,30 @@ export class InformacionComponent implements OnInit {
 
 	ngOnInit(): void {
 		this.route.paramMap.subscribe(
-			(params) => this.imagename = this.id2name[params.get('id')]
+			(params) => {
+				this.imageid = params.get('id');
+				this.imagename = this.id2name[this.imageid]
+			}
 		);
 	}
 
+	showInfo(show : string) {
+		console.log(show);
+		this.funciones = this.teatro = this.tiempo = this.entradas = false;
+		switch (show) {
+			case "Funciones":
+				this.funciones = true;
+				break;
+			case "Entradas":
+				this.entradas = true;
+				break;
+			case "Tiempo":
+				this.tiempo = true;
+				break;
+			case "Teatro":
+				this.teatro = true;
+				break;
+		}
+	}
+
 }

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

@@ -26,26 +26,26 @@
 	justify-content: space-between;
 }
 
-.NavInput {
+.NavInput, .NavSuggestion {
 	outline: none;
-	margin-right: 10%;
-	height: 40%;
-	width: 90%;
-	float: right;
 	padding: 6px;
-	border: none;
 	font-size: 17px;
 	border-radius: 10px;
+}
 
+.NavInput {
+	border: none;
+	float: right;
+	margin-right: 10%;
+	width: 100%;
+	height: 40%;
 }
 
 .NavSuggestion {
+	width: 27%;
 	background-color: white;
 	border: solid 1px grey;
 	position: absolute;
-	width: 30%;
-	left: 70%;
-	padding: 3px;
-	top: 0;
-	transform: translate(-50%,220%);
+	top: 50px;
+	z-index: 1;
 }

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

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

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';
+import { switchMap, take, switchMapTo } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
+import { Router, ActivatedRoute, NavigationStart, Navigation } from '@angular/router';
 
 @Component({
 	selector: 'nav-bar',
@@ -12,16 +14,33 @@ export class NavBarComponent implements OnInit {
 	search : string = '';
 	suggestion : boolean = false;
 
-	constructor() { }
+	private clearSearch$;
+
+	constructor(
+		private route: ActivatedRoute,
+		private router: Router,
+	) { }
 
 	ngOnInit(): void {
+		/* On route change, clear search bar */
+		this.clearSearch$ = this.router.events.pipe(
+				filter(event => event instanceof NavigationStart)
+			)
+			.subscribe( (event : NavigationStart) => {
+				this.search = '';
+				this.suggestion = false;
+			} );
 	}
 
 	showinput() {
-		interval(1000).pipe( take(1) )
-			.subscribe(
-				() => this.suggestion = true
-			);
+		/** this needs to be done with switchmap **/
+		if (this.search == "") {
+			this.hideinput()
+		}
+
+		else {
+			this.suggestion = true;
+		}
 	}
 
 	hideinput() {

src/main.ts

@@ -5,8 +5,8 @@ import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
-  enableProdMode();
+	enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+	.catch(err => console.error(err));