Create a List of Object Data Structures
product.service.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732442937952/8619f365-31fb-45cb-9098-ca63c7385cd5.png" alt class="image--center mx-auto" />
product.model.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732442959668/5759f39b-d52a-4534-96f2-104e6e32cf8e.png" alt class="image--center mx-auto" />
product.component.ts
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732443000514/a571b506-09b4-4843-b1f1-444966869616.png" alt class="image--center mx-auto" />
product.component.html
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732443023538/cfeae191-3b3c-4038-bee7-5238856cc1a5.png" alt class="image--center mx-auto" />
Mobile View:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732443322529/c046cc0c-50d5-4a84-94a8-a216219ffb8f.png" alt class="image--center mx-auto" />
Tablet View:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732443395322/616dcf07-7ca4-4b57-a320-a63580b688b5.png" alt class="image--center mx-auto" />
Desktop View:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1732443621185/3ca4647d-13fa-4282-aedf-b293ded2157b.png" alt class="image--center mx-auto" />
GITHUB LINK : <a target="_blank" href="https://github.com/Xavierbaliw/Activity-31-Angular-Ecommerce-Product-List">https://github.com/Xavierbaliw/Activity-31-Angular-Ecommerce-Product-List</a>
FIREBASE LINK : <a target="_blank" href="https://angular-ecommerce-produc-1c41a.web.app/">https://angular-ecommerce-produc-1c41a.web.app/</a>

Create a List of Object Data Structures

product.service.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732442937952/8619f365-31fb-45cb-9098-ca63c7385cd5.png align="center")

product.model.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732442959668/5759f39b-d52a-4534-96f2-104e6e32cf8e.png align="center")

product.component.ts

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732443000514/a571b506-09b4-4843-b1f1-444966869616.png align="center")

product.component.html

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732443023538/cfeae191-3b3c-4038-bee7-5238856cc1a5.png align="center")

Mobile View:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732443322529/c046cc0c-50d5-4a84-94a8-a216219ffb8f.png align="center")

Tablet View:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732443395322/616dcf07-7ca4-4b57-a320-a63580b688b5.png align="center")

Desktop View:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732443621185/3ca4647d-13fa-4282-aedf-b293ded2157b.png align="center")

GITHUB LINK : [https://github.com/Xavierbaliw/Activity-31-Angular-Ecommerce-Product-List](https://github.com/Xavierbaliw/Activity-31-Angular-Ecommerce-Product-List)

FIREBASE LINK : [https://angular-ecommerce-produc-1c41a.web.app/](https://angular-ecommerce-produc-1c41a.web.app/)

Activity 31: Angular Ecommerce Product List