Next, let's implement the products page with the categories menu and product list.
To begin with, implement the category-menu-item component by following these steps:
- Generate the component using Angular CLI by running the following command:
ng generate component modules/market/category-menu-item
- Replace the HTML file /src/app/modules/market/category-menu-item/category-menu-item.component.html contents with the following:
<div class="container">
<span>Category Name</span>
</div>
- Replace the CSS file /src/app/modules/market/category-menu-item/category-menu-item.component.css contents with the following:
.container {
display: inline;
padding: 5px 3px 5px 3px;
border: 1px solid black;
padding: 2px 5px 2px 5px;
cursor: pointer;
}
.container:hover {
background-color: lightgray;
}
.selected {
background-color: bisque;
}