notify status with primeng

angular.json

@@ -26,6 +26,9 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.0",
+    "@angular/animations": "^15.1.4",
     "@angular/common": "^15.0.0",
     "@angular/compiler": "^15.0.0",
     "@angular/core": "^15.0.0",
@@ -21,6 +21,8 @@
     "@ng-bootstrap/ng-bootstrap": "^14.0.1",
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.3",
+    "primeicons": "^6.0.1",
+    "primeng": "^15.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app.component.html

@@ -1,4 +1,6 @@
 <app-header></app-header>
 <router-outlet></router-outlet>
+<p-toast></p-toast>
+
 
 

src/app/app.component.ts

@@ -1,8 +1,15 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {PrimeNGConfig} from "primeng/api";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(private primengConfig: PrimeNGConfig) {}
+
+  ngOnInit(): void {
+    this.primengConfig.ripple = true
+  }
+}

src/app/app.module.ts

@@ -12,6 +12,9 @@ import { CartComponent } from './components/cart/cart.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {HttpClientModule} from "@angular/common/http";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {ToastModule} from "primeng/toast";
+import {MessageService} from "primeng/api";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 @NgModule({
   declarations: [
@@ -25,13 +28,17 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
   ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         AppRoutingModule,
         NgbModule,
         HttpClientModule,
         ReactiveFormsModule,
         FormsModule,
+        ToastModule,
     ],
-  providers: [],
+  providers: [
+    MessageService,
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/cart/cart.component.ts

@@ -3,6 +3,7 @@ import {CartService} from "../../services/cart.service";
 import {OrderedProduct} from "../../types/ordered-product";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {Router} from "@angular/router";
+import {MessageService} from "primeng/api";
 
 @Component({
   selector: 'app-cart',
@@ -12,7 +13,8 @@ import {Router} from "@angular/router";
 export class CartComponent implements OnInit {
   buyerForm!: FormGroup
 
-  constructor(private cartService: CartService, private router: Router, private formBuilder: FormBuilder) {}
+  constructor(private cartService: CartService, private router: Router, private formBuilder: FormBuilder,
+              private messageService: MessageService) {}
 
   ngOnInit(): void {
     this.buyerForm = this.formBuilder.group({
@@ -40,7 +42,10 @@ export class CartComponent implements OnInit {
   handleQuantityChange(newQuantity: string, selectedProduct: OrderedProduct) {
     const quantity = newQuantity as unknown as number
     if (quantity < 0) this.cartService.changeProductQuantity(selectedProduct.product, 1)
-    if (quantity === 0) this.cartService.removeProduct(selectedProduct.product)
+    if (quantity === 0)  {
+      this.cartService.removeProduct(selectedProduct.product)
+      this.messageService.add({severity: 'warn', summary: 'Item removed!', detail: 'Item successfully removed from cart!'})
+    }
     this.cartService.changeProductQuantity(selectedProduct.product, quantity)
   }
 }

src/app/components/product-item-detail/product-item-detail.component.ts

@@ -3,6 +3,7 @@ import {Product} from "../../types/product";
 import {ProductService} from "../../services/product.service";
 import {CartService} from "../../services/cart.service";
 import {ActivatedRoute, Router} from "@angular/router";
+import {MessageService} from "primeng/api";
 
 @Component({
   selector: 'app-product-item-detail',
@@ -13,7 +14,7 @@ export class ProductItemDetailComponent implements  OnInit {
   product!: Product
 
   constructor(private productService: ProductService, private cartService: CartService,
-              private activatedRoute: ActivatedRoute, private router: Router) {}
+              private activatedRoute: ActivatedRoute, private messageService: MessageService) {}
 
   ngOnInit(): void {
     this.activatedRoute.params.subscribe( async ({id}) => {
@@ -27,6 +28,6 @@ export class ProductItemDetailComponent implements  OnInit {
 
   addToCart(quantity: string) {
     this.cartService.addProduct(this.product, parseInt(quantity))
-    alert(`Added to cart!`)
+    this.messageService.add({severity: 'success', summary: 'Item added !', detail: 'Item successfully added to cart!'})
   }
 }

src/app/components/product-list/product-list.component.ts

@@ -3,6 +3,7 @@ import {ProductService} from "../../services/product.service";
 import {Product} from "../../types/product";
 import {CartService} from "../../services/cart.service";
 import {OrderedProduct} from "../../types/ordered-product";
+import {MessageService} from "primeng/api";
 
 @Component({
   selector: 'app-product-list',
@@ -11,7 +12,7 @@ import {OrderedProduct} from "../../types/ordered-product";
 })
 export class ProductListComponent implements OnInit{
   products: Product[] = []
-  constructor(private productService: ProductService, private cartService: CartService) {}
+  constructor(private productService: ProductService, private cartService: CartService, private messageService: MessageService) {}
 
   ngOnInit(): void {
     this.productService.getProducts()
@@ -20,6 +21,6 @@ export class ProductListComponent implements OnInit{
 
   addToCart(selectedProduct: OrderedProduct): void {
     this.cartService.addProduct(selectedProduct.product, selectedProduct.quantity as unknown as number)
-    alert('Added to cart!')
+    this.messageService.add({severity: 'success', summary: 'Item added !', detail: 'Item successfully added to cart!'})
   }
 }