book.service.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815270270/b5e930f9-c34e-4f91-8980-25646538d5fc.png" alt class="image--center mx-auto" />
book.model.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815339483/d48ff85d-ca67-4748-902a-3ef7ed243428.png" alt class="image--center mx-auto" />
book.component.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815441594/3d767f80-68be-4bf1-8887-3d1db291d40e.png" alt class="image--center mx-auto" />
book.component.html
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815476221/f5f79c68-c795-4546-a8b8-b668f4f8cc6a.png" alt class="image--center mx-auto" />
<h3 id="heading-output">OUTPUT:</h3>
Mobile view
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815628284/9732473c-3fd3-48ed-93e1-168ed17c7044.png" alt class="image--center mx-auto" />
Tablet view
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815696973/1801f2ce-fb86-4ecc-b722-2c79e94bfcbd.png" alt class="image--center mx-auto" />
Desktop view
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732815759362/ad240904-1824-464d-892e-10ddb7d5bfde.png" alt class="image--center mx-auto" />
Github Link:<a target="_blank" href="https://github.com/Fieeeshie/angular-library-grid-main">https://github.com/Fieeeshie/angular-library-grid-main</a>

**book.service.ts**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815270270/b5e930f9-c34e-4f91-8980-25646538d5fc.png align="center")

**book.model.ts**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815339483/d48ff85d-ca67-4748-902a-3ef7ed243428.png align="center")

**book.component.ts**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815441594/3d767f80-68be-4bf1-8887-3d1db291d40e.png align="center")

**book.component.html**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815476221/f5f79c68-c795-4546-a8b8-b668f4f8cc6a.png align="center")

### **OUTPUT:**

**Mobile view**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815628284/9732473c-3fd3-48ed-93e1-168ed17c7044.png align="center")

**Tablet view**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815696973/1801f2ce-fb86-4ecc-b722-2c79e94bfcbd.png align="center")

**Desktop view**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732815759362/ad240904-1824-464d-892e-10ddb7d5bfde.png align="center")

Github Link:[https://github.com/Fieeeshie/angular-library-grid-main](https://github.com/Fieeeshie/angular-library-grid-main)

Angular Library Grid

OUTPUT: