diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6aba5d7..f573406 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavbarComponent } from './components/navbar/navbar.component';
import { ProductItemDetailsComponent } from './components/product-item-details/product-item-details.component'
import { CartComponent } from './components/cart/cart.component'
+import { ConfirmationComponent } from './components/confirmation/confirmation.component';
import { MatCommonModule } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button'
@@ -22,7 +23,8 @@ import { MatSelectModule } from '@angular/material/select';
import { MatBadgeModule } from '@angular/material/badge';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
-import { ConfirmationComponent } from './components/confirmation/confirmation.component';
+import { MatSnackBarModule } from '@angular/material/snack-bar'
+
@@ -54,7 +56,8 @@ import { ConfirmationComponent } from './components/confirmation/confirmation.co
MatSelectModule,
MatBadgeModule,
MatFormFieldModule,
- MatInputModule
+ MatInputModule,
+ MatSnackBarModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/components/cart/cart.component.html b/src/app/components/cart/cart.component.html
index 7426965..6ba940c 100644
--- a/src/app/components/cart/cart.component.html
+++ b/src/app/components/cart/cart.component.html
@@ -14,7 +14,9 @@
diff --git a/src/app/components/cart/cart.component.scss b/src/app/components/cart/cart.component.scss
index 8abf6d1..0a52fbe 100644
--- a/src/app/components/cart/cart.component.scss
+++ b/src/app/components/cart/cart.component.scss
@@ -50,6 +50,7 @@ img {
justify-content: center;
align-items: center;
padding-right: 10%;
+ flex-grow: 1;
.cart-item-name {
padding-bottom: 10%;
@@ -62,7 +63,6 @@ img {
.cart-item-delete {
display: flex;
- flex-grow: 1;
justify-content: center;
align-items: center;
}
diff --git a/src/app/components/cart/cart.component.ts b/src/app/components/cart/cart.component.ts
index 48da345..4f0c833 100644
--- a/src/app/components/cart/cart.component.ts
+++ b/src/app/components/cart/cart.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CartService } from '../../services/cart.service';
import { Product } from 'src/app/models/product';
-import { Form } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar'
@@ -24,11 +24,12 @@ export class CartComponent implements OnInit {
address: string = ''
postalcode: string = ''
+ snackBarDuration = 7;
- constructor(private cartService: CartService, private router: Router) { }
+ constructor(private cartService: CartService, private router: Router, private _snackBar: MatSnackBar) { }
ngOnInit(): void {
this.cartItems = this.cartService.getItems()
@@ -38,6 +39,15 @@ export class CartComponent implements OnInit {
deleteFromCart(product: Product) {
this.cartService.removeFromCart(product);
+ this.cartItems = this.cartService.getItems()
+ this.totalPrice = this.cartService.getTotalPrice();
+ this.openSnackBar(product.name, product.quantity)
+ }
+
+ openSnackBar(productName: string, productQuantity: number) {
+ this._snackBar.open( productName + " x" + productQuantity + " " + "removed", 'Close', {
+ duration: this.snackBarDuration * 100
+ })
}
onSubmit(): void {
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index e41b070..0e3ffbb 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -2,6 +2,6 @@
Shelf
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index cb55c51..cafb5ae 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnChanges } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { CartService } from 'src/app/services/cart.service';
@Component({
@@ -12,12 +12,10 @@ export class NavbarComponent implements OnInit {
constructor(private cartService: CartService) { }
ngOnInit(): void {
-
}
- onChanges(): void {
+ ngDoCheck(): void {
this.cartQuantity = this.cartService.getQuantity()
- console.log('halou')
}
}
diff --git a/src/app/components/product-item-details/product-item-details.component.ts b/src/app/components/product-item-details/product-item-details.component.ts
index aac02cf..9cebbe6 100644
--- a/src/app/components/product-item-details/product-item-details.component.ts
+++ b/src/app/components/product-item-details/product-item-details.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute } from "@angular/router"
import { HttpService } from 'src/app/services/http.service';
import { CartService } from 'src/app/services/cart.service';
import { FormControl } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar'
@Component({
selector: 'app-product-item-details',
@@ -24,10 +25,13 @@ export class ProductItemDetailsComponent implements OnInit {
productId: number = 0
quantity: string = '1'
+ snackBarDuration = 7;
+
constructor(
private httpService: HttpService,
private route: ActivatedRoute,
- private cartService: CartService
+ private cartService: CartService,
+ private _snackBar: MatSnackBar
) { }
ngOnInit(): void {
@@ -42,7 +46,13 @@ export class ProductItemDetailsComponent implements OnInit {
addToCart(product: Product) {
this.product.quantity = parseInt(this.quantity)
this.cartService.addToCart(product);
- window.alert('Your product has been added to the cart!');
+ this.openSnackBar(product.name, product.quantity)
+ }
+
+ openSnackBar(productName: string, productQuantity: number) {
+ this._snackBar.open( productName + " x" + productQuantity + " " + "added to cart", 'Close', {
+ duration: this.snackBarDuration * 100
+ });
}
}