Permite añadir eventos a la discoteca y navegar a una página de cada evento

src/app/app-routing.module.ts

@@ -7,6 +7,10 @@ const routes: Routes = [
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
+  {
+    path: 'view-evento',
+    loadChildren: () => import('./view-evento/view-evento.module').then( m => m.ViewEventoPageModule)
+  },
 
  
 ];

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -84,7 +84,7 @@
       <ion-row>
         <div *ngIf="eventos.length>0" class="eventos">
           <ion-list>
-              <ion-item *ngFor="let evento of eventos">
+              <ion-item *ngFor="let evento of eventos" button (click)="mostrarEvento(evento)">
               <div class="evento">
                 <div class="eventoHeader">
                 {{evento.nombre}} · 

src/app/perfil-discoteca/perfil-discoteca.page.scss

@@ -61,12 +61,11 @@
     }
 
     .eventos{
-      margin: 20px;
-      justify-content: space-between;
+      display:block;
     }
 
-    .evento{
-      margin-top: 20px;
+    .evento:hover{
+      background-color: rgb(97, 97, 97);
     }
     .eventoHeader{
       font-weight: bold;

src/app/perfil-discoteca/perfil-discoteca.page.ts

@@ -161,6 +161,11 @@ export class PerfilDiscotecaPage implements OnInit {
 addEvento() {
   this.router.navigate(['/tabs/tab1/prompt-evento']);
 }
+
+mostrarEvento(evento: Evento){
+  this.tab1Service.eventoIndex = this.eventos.indexOf(evento);
+  this.router.navigate(['/tabs/tab1/view-evento']);
+}
 }
 
 

src/app/prompt-evento/prompt-evento.page.ts

@@ -42,9 +42,6 @@ export class PromptEventoPage{
     if (!this.tab1Service.eventos){
       this.tab1Service.initEventos();}
     this.tab1Service.eventos.push(evento);
-    for (var i=0; i<this.tab1Service.eventos.length; i++){
-      console.warn(this.tab1Service.eventos[i].nombre);
-    }
   }
   
 

src/app/tab1/tab1-routing.module.ts

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { Tab1Page } from './tab1.page';
 import { PerfilDiscotecaPage } from '../perfil-discoteca/perfil-discoteca.page'
 import { PromptEventoPage } from '../prompt-evento/prompt-evento.page'
+import { ViewEventoPage } from '../view-evento/view-evento.page'
 
 const routes: Routes = [
         {
@@ -21,6 +22,11 @@ const routes: Routes = [
           component: PromptEventoPage
         },
 
+        {
+          path: 'view-evento',
+          component: ViewEventoPage
+        }
+        
 
 
 

src/app/tab1/tab1.service.ts

@@ -4,6 +4,7 @@ import { Tab1Page } from './tab1.page'
 import { Discoteca } from '../discoteca'
 import { Galeria } from '../galeria';
 import { Evento } from '../evento';
+import { NumericValueAccessor } from '@ionic/angular';
 
 
 @Injectable({
@@ -14,6 +15,7 @@ export class Tab1Service implements OnInit{
   discoteca: Discoteca;
   galeria: Galeria;
   eventos: Evento[];
+  eventoIndex: number;
 
   constructor() { 
     
@@ -56,4 +58,8 @@ export class Tab1Service implements OnInit{
     this.eventos = [];
   }
 
+  getEventobyIndex(eventoIndex: number){
+    return this.eventos[eventoIndex];
+  }
+
 }

src/app/view-evento/view-evento-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewEventoPage } from './view-evento.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ViewEventoPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewEventoPageRoutingModule {}

src/app/view-evento/view-evento.component.html

@@ -1,3 +0,0 @@
-<p>
-  view-evento works!
-</p>

src/app/view-evento/view-evento.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-view-evento',
-  templateUrl: './view-evento.component.html',
-  styleUrls: ['./view-evento.component.scss'],
-})
-export class ViewEventoComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}

src/app/view-evento/view-evento.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewEventoPageRoutingModule } from './view-evento-routing.module';
+
+import { ViewEventoPage } from './view-evento.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ViewEventoPageRoutingModule
+  ],
+  declarations: [ViewEventoPage]
+})
+export class ViewEventoPageModule {}

src/app/view-evento/view-evento.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>ViewEvento</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <label>{{evento.nombre}}</label>
+</ion-content>

src/app/view-evento/view-evento.page.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { ViewEventoComponent } from './view-evento.component';
+import { ViewEventoPage } from './view-evento.page';
 
-describe('ViewEventoComponent', () => {
-  let component: ViewEventoComponent;
-  let fixture: ComponentFixture<ViewEventoComponent>;
+describe('ViewEventoPage', () => {
+  let component: ViewEventoPage;
+  let fixture: ComponentFixture<ViewEventoPage>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ViewEventoComponent ],
+      declarations: [ ViewEventoPage ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ViewEventoComponent);
+    fixture = TestBed.createComponent(ViewEventoPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

src/app/view-evento/view-evento.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { Evento } from '../evento';
+import { Tab1Service } from '../tab1/tab1.service';
+
+@Component({
+  selector: 'app-view-evento',
+  templateUrl: './view-evento.page.html',
+  styleUrls: ['./view-evento.page.scss'],
+})
+export class ViewEventoPage implements OnInit {
+
+  evento: Evento;
+
+  constructor(private tab1Service: Tab1Service) { }
+
+  ngOnInit() {
+    this.evento = this.tab1Service.getEventobyIndex(this.tab1Service.eventoIndex);
+  }
+
+}