Create a List of Object Data Structures
book.service.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459506907/e85bdc7e-b27b-40e3-b37b-519b7e71f7c5.png" alt class="image--center mx-auto" />
book.model.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459518625/be2bb8be-2fdc-49a7-b9fc-60a21f255bc7.png" alt class="image--center mx-auto" />
book.component.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459542290/09d54810-1078-4584-bd01-5ee21ce54910.png" alt class="image--center mx-auto" />
book.component.html
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459552244/6b9d729d-288d-4795-9525-fd823301fbc4.png" alt class="image--center mx-auto" />
MOBILE VIEW:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459595790/a5a11cc8-fbe5-4482-853a-d0d4223a2e3a.png" alt class="image--center mx-auto" />
TABLET VIEW:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459634744/f4de50d8-a785-4db2-a0bb-14d355908d09.png" alt class="image--center mx-auto" />
DESKTOP VIEW:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732459668046/995e851e-8dd2-4566-b8fb-231364091a5b.png" alt class="image--center mx-auto" />
GITHUB LINK: <a target="_blank" href="https://github.com/Xavierbaliw/Activity-32-Angular-Library-Grid">https://github.com/Xavierbaliw/Activity-32-Angular-Library-Grid</a>
FIREBASE LINK: <a target="_blank" href="https://angular-library-grid-ccb78.web.app">https://angular-library-grid-ccb78.web.app</a>

Create a List of Object Data Structures

book.service.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459506907/e85bdc7e-b27b-40e3-b37b-519b7e71f7c5.png align="center")

book.model.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459518625/be2bb8be-2fdc-49a7-b9fc-60a21f255bc7.png align="center")

book.component.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459542290/09d54810-1078-4584-bd01-5ee21ce54910.png align="center")

book.component.html

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459552244/6b9d729d-288d-4795-9525-fd823301fbc4.png align="center")

MOBILE VIEW:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459595790/a5a11cc8-fbe5-4482-853a-d0d4223a2e3a.png align="center")

TABLET VIEW:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459634744/f4de50d8-a785-4db2-a0bb-14d355908d09.png align="center")

DESKTOP VIEW:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732459668046/995e851e-8dd2-4566-b8fb-231364091a5b.png align="center")

GITHUB LINK: [https://github.com/Xavierbaliw/Activity-32-Angular-Library-Grid](https://github.com/Xavierbaliw/Activity-32-Angular-Library-Grid)

FIREBASE LINK: [https://angular-library-grid-ccb78.web.app](https://angular-library-grid-ccb78.web.app)

Activity 32: Angular Library Grid