This project is Shopping Portal. Where user can see the product and add to the cart to buy.
This project is done in Angular 6 and Bootstrap 4.
The aim in this project is to demonstrate Parent and Child communication , using @Input and @Output and learn Bootstrap.
Responsive Website
To preview this project click here
- At the top we see Inventory Management App: that’s our application(App Component).
- Under the application we have the Products List components.
- The Products List component has Product Rows, one for each product.
- And the Product Row uses three components itself: one for the Product Image Component , Product Department Component, and Price Display Component.
- There is one more component under app component is Shopping Cart component to display the product add to cart.
- Product Model: it’s just a model that we’ll use in our app to store each product detail.
- Product array is declared in App Component and I initialized with list of product.
- This array is sent to ProductList from there one one prodout is send to ProductRow using
*ngFor. - ProductRow display the product data using ProductImage , ProductDepartment, and PriceDisplay Component.
- One "Add to Cart" button is added in ProductRow Component, to add product to cart.
- so I have emit event from ProductRow -> ProductList -> AppComponent. Event is Product Object.
- In AppComponent there is Array of Product called 'shoppingList' where all the selected product is push.
- Then I have send this array(shoppingList) to Shopping Cart component. Component will only display the product which user as add to cart.