added snackbar + badge on navbar panel icon

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]

src/app/components/cart/cart.component.html

@@ -14,7 +14,9 @@
                 </span> 
             </div>
             <div class="cart-item-delete">
-                <a (click)="deleteFromCart(item)"><mat-icon>delete</mat-icon></a>
+                <button mat-mini-fab color="warn" (click)="deleteFromCart(item)">
+                    <mat-icon>delete</mat-icon>
+                </button>
             </div>
         </div>
         <div class="cart-total-price">

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;
 }

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 {

src/app/components/navbar/navbar.component.html

@@ -2,6 +2,6 @@
     <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">
-        <a routerLink="/cart"><mat-icon class="cart-icon">shopping_cart</mat-icon></a>
+        <a routerLink="/cart"><mat-icon matBadge={{cartQuantity}} [matBadgeHidden]="cartQuantity<=0" matBadgeColor="warn" class="cart-icon">shopping_cart</mat-icon></a>
     </button>
 </mat-toolbar>

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')
   }
 
 }

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
+    });
   }
 
 }