As I embark on developing my very first Angular app, I have encountered a challenge with filtering a list of book objects based on their gender attribute. The issue lies in sharing data between components – specifically the filteredData variable and the list of books stored in FireBaseList.
My endeavor involves passing the filteredData variable from fixed-nav.component to books-grid.component. According to my research, I understand that I need to make the bookList in books-grid.component observable for any changes and ensure that the bookList in fixed-nav.component.ts emits an event upon any alterations made to this.bookList.
Despite my efforts, I am unable to achieve this desired outcome. While there are numerous questions surrounding observables, none specifically address integrating Firebase. I am hopeful that someone in the community can offer guidance or assistance on this matter. Thank you in advance!
Here is the code snippet for the filter component, fixed-nav.component:
// Code for Fixed Nav Component
// Import necessary libraries
// Define the FixedNavComponent class
// Initialize properties like Genders and bookList
// Implement logic for filtering books by gender
// Export the FixedNavComponent class
And here is the code snippet for books-grid.component.ts:
// Code for Books Grid Component
// Import necessary libraries
// Define the BooksGridComponent class
// Initialize property bookList
// Fetch books data from Firebase and populate bookList
// Share relevant data here within the component
// Export the BooksGridComponent class
Lastly, we have the book.service.ts:
// Service for Managing Books
// Import required modules
// Inject AngularFireDatabase and define BookService class
// Initialize properties like bookList and selectedBook
// Retrieve list of books from Firebase
//Export the BookService class
And the model for Book:
// Data Model for Book Objects
// Define attributes such as title, author, gender, language, etc.