busqueda component added

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { EspectaculosComponent } from './espectaculos/espectaculos.component';
 import { InformacionComponent } from './informacion/informacion.component';
 import { MainComponent } from './main/main.component';
+import { BusquedaComponent } from './busqueda/busqueda.component';
 
 const routes: Routes = [
 	{ path: '', component : MainComponent },
-	{ path: 'espectaculos', component: EspectaculosComponent },
-	{ path: 'informacion/:id', component: InformacionComponent }
+	{ path: 'informacion/:id', component: InformacionComponent },
+	{ path: 'busqueda', component: BusquedaComponent }
 ];
 /* { path: '**', component: PageNotFoundComponent } */
 

src/app/app.module.ts

@@ -3,26 +3,27 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { EspectaculosComponent } from './espectaculos/espectaculos.component';
 import { FooterBarComponent } from './footer-bar/footer-bar.component';
 import { MainComponent } from './main/main.component';
 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';
 
 @NgModule({
 	declarations: [
 		AppComponent,
-		EspectaculosComponent,
 		FooterBarComponent,
 		MainComponent,
 		NavBarComponent,
-		InformacionComponent
+		InformacionComponent,
+		BusquedaComponent
 	],
 	imports: [
 		BrowserModule,
 		AppRoutingModule
 	],
-	providers: [],
+	providers: [ImagesService],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/busqueda/busqueda.component.html

+<h1>Resultados de búsqueda</h1>
+
+	<button (click)="change()">
+		Ordenar {{ order }}
+	</button>
+
+	<!-- Esta es la card de resultado -->
+	<div *ngFor="let i of results" class="class-thingy">
+		{{ i }}
+	</div>

src/app/espectaculos/espectaculos.component.spec.ts → src/app/busqueda/busqueda.component.spec.ts

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

src/app/busqueda/busqueda.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-busqueda',
+	templateUrl: './busqueda.component.html',
+	styleUrls: ['./busqueda.component.css']
+})
+export class BusquedaComponent implements OnInit {
+
+	order : string = "Asc";
+	results : any[];
+
+	constructor() { }
+
+	ngOnInit(): void {
+		this.results = [
+			"cosa1",
+			"cosa2",
+			"cosa3",
+			"cosa4",
+			"cosa5",
+			"cosa6",
+			"cosa7"
+		]
+	}
+
+	change() {
+		this.order == "Asc" ? "Des" : "Asc";
+	}
+}

src/app/espectaculos/espectaculos.component.css

-

src/app/espectaculos/espectaculos.component.html

-<p>espectaculos works!</p>

src/app/espectaculos/espectaculos.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-	selector: 'espectaculos',
-	templateUrl: './espectaculos.component.html',
-	styleUrls: ['./espectaculos.component.css']
-})
-export class EspectaculosComponent implements OnInit {
-
-	constructor() { }
-
-	ngOnInit(): void {
-	}
-
-}

src/app/informacion/informacion.component.html

@@ -30,7 +30,7 @@
 				</a>
 			</svg>
 			<svg width="70" height="75">
-				<a *ngif onclick="openCity(event, 'Duracion')">
+				<a href="#" onclick="openCity(event, 'Duracion')">
 					<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>

src/app/main/main.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ImagesService } from 'src/app/services/images.service';
-import { AppRoutingModule } from 'src/app/app-routing.module';
 
 @Component({
 	selector: 'main',
@@ -29,8 +28,4 @@ export class MainComponent implements OnInit {
 	previous() : void {
 		this.selected = (this.selected - 1 + this.images.length) % this.images.length;
 	}
-
-	info(i : number) : void {
-	}
-
 }

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

@@ -7,7 +7,7 @@
 		</a>
 		<div class="NavSearchContainer">
 			<input class="NavInput" type="text" placeholder="Search..">
-			<a routerLink="/">
+			<a routerLink="/busqueda">
 				<i class="fas fa-search fa-2x" style="color:white;"></i>
 			</a>
 		</div>

src/app/services/images.service.ts

@@ -9,7 +9,7 @@ export class ImagesService {
 		"/assets/images/el-equilibrista.jpg",
 		"/assets/images/fun-home.jpg",
 		"/assets/images/giragringa.jpg",
-		"/assets/images/FOREVER-YOUNG.jpg",
+		"/assets/images/forever-young.jpg",
 	];
 
 	constructor() {}