information page

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';
 
 const routes: Routes = [
 	{ path: '', component : MainComponent },
-	{ path: 'espectaculos', component: EspectaculosComponent }
+	{ path: 'espectaculos', component: EspectaculosComponent },
+	{ path: 'informacion/:id', component: InformacionComponent }
 ];
 /* { path: '**', component: PageNotFoundComponent } */
 

src/app/informacion/informacion.component.css

+.EspectaculoContainer {
+	margin: 2%;
+	height: 85%;
+	width: 93%;
+	padding: 1.5%;
+	background-color: rgb(235, 233, 233);
+	display: flex;
+
+}
+
+.ContainerIzquierdo {
+	float: left;
+	width: 60%;
+	height: 100%;
+}
+
+.ContainerDerecho {
+	float: right;
+	width: 40%;
+	height: 100%;
+	justify-content: center;
+	text-align: center;
+}
+
+.EspectaculoImagen {
+	width: 100%;
+	height: 50%;
+	object-fit: contain;
+
+}
+
+.EspectaculoBoton {
+	width: 80%;
+	height: 10%;
+	background-color: black;
+	color: white;
+	font-size: 25px;
+	border: none;
+	border-radius: 5px;
+}
+
+
+
+/* Style the tab */
+.tab {
+	overflow: hidden;
+	width: 300px;
+}
+
+/* Style the tab content */
+.tabcontent {
+	display: none;
+	margin: none;
+}
+
+.Boton {
+	fill: red;
+
+}
+
+.Boton:hover {
+	fill: #FF5050
+}

src/app/informacion/informacion.component.html

-<p>informacion works!</p>
+<div class="EspectaculoContainer">
+	<div class="ContainerIzquierdo">
+		<img class="EspectaculoImagen" src="assets/images/{{ imagename }}">
+		<div class="tab">
+			<svg width="70" height="75">
+				<a href="#" onclick="openCity(event, 'Funciones')">
+					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
+					<text x="25" y="30" fill="#FFFFFF" text-anchor="middle"
+						alignment-baseline="middle" font-size="40px">
+						&#128467;
+					</text>
+				</a>
+			</svg>
+
+			<svg width="70" height="75">
+				<a href="#" onclick="openCity(event, 'Entradas')">
+					<polygon points="0,0 0,75 25,50 50,75 50,0" class="Boton" />
+					<text x="25" y="30" fill="#FFFFFF" text-anchor="middle"
+						alignment-baseline="middle" font-size="40px">
+						&#127903;
+					</text>
+				</a>
+			</svg>
+
+			<svg width="70" height="75">
+				<a href="#" onclick="openCity(event, '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 *ngif 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>
+				</a>
+			</svg>
+		</div>
+
+		<div id="Funciones" class="tabcontent">
+			<h3>Funciones</h3>
+		</div>
+
+		<div id="Entradas" class="tabcontent">
+			<h3>Entradas</h3>
+		</div>
+
+		<div id="Teatro" class="tabcontent">
+			<h3>Teatro</h3>
+		</div>
+		<div id="Duracion" class="tabcontent">
+			<h3>Duracion</h3>
+		</div>
+
+
+	</div>
+	<div class="ContainerDerecho">
+		<h1>Fun Home</h1>
+		<h3>Descripcion: </h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+			et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+			ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+			esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+			sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<h3>Elenco: </h3>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+			et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+			ut aliquip ex ea commodo consequat.</p>
+		<h3>Calificacion: &#9733; &#9733; &#9733; &#9733; &#9734;</h3>
+
+		<input class="EspectaculoBoton" type="button" value="Quiero Mi Entrada!">
+	</div>
+</div>

src/app/informacion/informacion.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
-  selector: 'app-informacion',
-  templateUrl: './informacion.component.html',
-  styleUrls: ['./informacion.component.css']
+	selector: 'app-informacion',
+	templateUrl: './informacion.component.html',
+	styleUrls: ['./informacion.component.css']
 })
 export class InformacionComponent implements OnInit {
 
-  constructor() { }
+	private id2name = {
+		"1": "el-equilibrista.jpg",
+		"2": "fun-home.jpg",
+		"3": "giragringa.jpg",
+		"4": "forever-young.jpg"
+	};
 
-  ngOnInit(): void {
-  }
+	public imagename;
+
+	constructor(
+		private route : ActivatedRoute,
+		private router : Router,
+	) {}
+
+	ngOnInit(): void {
+		this.route.paramMap.subscribe(
+			(params) => this.imagename = this.id2name[params.get('id')]
+		);
+	}
 
 }

src/app/main/main.component.html

@@ -5,7 +5,9 @@
 	<div class="mySlides" *ngFor="let i of images; let in = index">
 		<ng-container *ngIf="selected == in">
 			<div class="numbertext"> {{ in + 1 }} / {{ images.length }}</div>
-			<img draggable="false" src="{{ i }}" style="width: 100%;">
+			<button routerLink="/informacion/{{ in + 1 }}" style="padding: 0; margin: 0; border: 0;">
+				<img draggable="false" src="{{ i }}" style="width: 100%;">
+			</button>
 		</ng-container>
 	</div>
 

src/app/main/main.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ImagesService } from 'src/app/services/images.service';
-
-export interface Image {
-	url : string;
-	alt : string | null;
-}
+import { AppRoutingModule } from 'src/app/app-routing.module';
 
 @Component({
 	selector: 'main',
@@ -18,20 +14,23 @@ export class MainComponent implements OnInit {
 
 	constructor(private fetch : ImagesService) { }
 
-	ngOnInit(): void {
+	ngOnInit() : void {
 		this.images = this.fetch.get();
 	}
 
-	select(s : number) {
+	select(s : number) : void {
 		this.selected = s % this.images.length;
 	}
 
-	next() {
-		this.selected = (this.selected + 1) % this.images.length
+	next() : void {
+		this.selected = (this.selected + 1) % this.images.length;
+	}
+
+	previous() : void {
+		this.selected = (this.selected - 1 + this.images.length) % this.images.length;
 	}
 
-	previous() {
-		this.selected = (this.selected - 1 + this.images.length) % this.images.length
+	info(i : number) : void {
 	}
 
 }