Carry data from dynamicaly generated table to the next page - html

Question

Probably a noob question but I couldn't find an answer anywhere I searched. So basically I'm generating a table made of data I download from Firebase when the page is accessed, and I'd like the user to be able to click on one row of the table to access the precise details of the clicked element. It's kinda confusing to explain but it'll be much clearer with the code below.
Here is the BooksComponent typescript:
import { Component, OnInit } from '#angular/core';
import {AngularFirestore} from '#angular/fire/firestore';
import {Book} from '../../services/book';
#Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private books: Array<Book> = [];
constructor(private db: AngularFirestore) { }
ngOnInit() {
this.db.collection('books').get().subscribe((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.books.push({
id: doc.id,
title: doc.get('title'),
writer: doc.get('writer'),
reserved: doc.get('reserved')
});
// console.log(doc.data());
});
});
}
}
And here is the associated HTML:
<div class="container d-flex min-vh-100 justify-content-center mt-5">
<table class="table table-bordered table-hover table-active">
<thead class="thead-dark">
<tr>
<th scope="col">Title</th>
<th scope="col">Writer</th>
<th scope="col">Reserved</th>
<!--<th scope="col">ID</th>-->
</tr>
</thead>
<tbody>
<!-- Here I'm putting on screen the array I populated back in the typescript, the [routerLink]=" [book.id]" seems to be working fine since in the detail page the id does update, everything else stays at 'dummy'-->
<tr *ngFor="let book of books;" [routerLink]="[book.id]" style="cursor: pointer">
<td>{{book.title}}</td>
<td>{{book.writer}}</td>
<td>{{book.reserved}}</td>
<!--<td>{{book.id}}</td>-->
</tr>
</tbody>
</table>
</div>
Now here is the BookDetailComponent typescript:
import { Component, OnInit } from '#angular/core';
import {Book} from '../../services/book';
import {ActivatedRoute} from '#angular/router';
#Component({
selector: 'app-book-detail',
templateUrl: './book-detail.component.html',
styleUrls: ['./book-detail.component.css']
})
export class BookDetailComponent implements OnInit {
private book: Book = {
id: 'dummy',
title: 'dummy',
writer: 'dummy',
reserved: 'dummy'
};
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.book.id = this.route.snapshot.params.id;
}
}
I managed to update the 'id' field according to which row the user clicked on, it's also correctly updated in the Web Page URL, but that's about it. I'm thinking I could search and retrieve informations corresponding to the id in the Array that stores all the books but I'm not sure how to do that excatly. Any advice/help is greatly appreciated.

Answer 1

So technically for the list, you should have an API and for the individual id route also you should have another API which gives you more details. But since, you don't have such an API that gives details based on id, you could make use of a service.I would not recommend this, but it will work. When you click on a book, update a service function with the index and get the corresponding details in bookdetail component.
bookArr: Array<object>
setBookDetails(arr) {
this.bookArr = arr;
}
updateIndex(idx) {
this.detailIdx = idx;
}
getDetails(){
return this.bookArr[this.detailIdx]
}