Click en lista lleva al viaje

src/app/home/home.component.html

@@ -1,14 +1,10 @@
 <mat-card>
   <mat-card-title>Mis viajes</mat-card-title>
-  <app-list
-    *ngIf="logged"
-    [displayedColumns]="displayedColumns"
-    [url]="urlMyTravels"
-  ></app-list>
-  <mat-card-content *ngIf="!logged"
-    >Logueate para ver tus viajes</mat-card-content
-  >
+  <app-list *ngIf="logged" (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns"
+    [url]="urlMyTravels"></app-list>
+  <mat-card-content *ngIf="!logged">Logueate para ver tus viajes</mat-card-content>
 </mat-card>
 
 <h3>Viajes disponibles</h3>
-<app-list [displayedColumns]="displayedColumns" [url]="urlTravels"></app-list>
+<app-list (rowClick)="travelClicked($event)" [displayedColumns]="displayedColumns" [url]="urlTravels">
+</app-list>

src/app/home/home.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApiService } from '../services/api.service';
 import { Travel } from '../entities/travel';
 
@@ -26,6 +26,7 @@ export class HomeComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private oauthService: OAuthService,
     private apiService: ApiService
   ) {}
@@ -36,6 +37,11 @@ export class HomeComponent implements OnInit {
     });
   }
 
+  travelClicked(travel: Travel): void {
+    console.log(travel);
+    this.router.navigateByUrl('/travel/' + travel.id);
+  }
+
   loadUserProfile(): void {
     this.oauthService.loadUserProfile().then((up) => (this.userProfile = up));
   }

src/app/list/list.component.html

@@ -50,7 +50,7 @@
 
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
 
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClicked(row)"></mat-row>
   </mat-table>
 
   <mat-paginator

src/app/list/list.component.ts

@@ -2,17 +2,20 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
   ViewChild,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
-import { merge, fromEvent } from 'rxjs';
+import { merge, fromEvent, Observable, Subscriber } from 'rxjs';
 import { ApiService } from '../services/api.service';
 import { ListDataSource } from './list.datasource';
+import { emit } from 'process';
 
 @Component({
   selector: 'app-list',
@@ -22,6 +25,8 @@ import { ListDataSource } from './list.datasource';
 export class ListComponent<T> implements OnInit, AfterViewInit {
   dataSource: ListDataSource<T>;
 
+  @Output() rowClick: EventEmitter<T> = new EventEmitter();
+
   @Input() displayedColumns: string[];
   @Input() url: string;
 
@@ -56,7 +61,11 @@ export class ListComponent<T> implements OnInit, AfterViewInit {
       .subscribe();
   }
 
-  load(): void {
+  rowClicked(row: T): void {
+    this.rowClick.emit(row);
+  }
+
+  private load(): void {
     this.dataSource.load(
       this.input.nativeElement.value,
       this.sort.active,