Bilkiss

// we are now also importing SweetAlertOptions in our decorator
import Swal, {SweetAlertOptions} from 'sweetalert2';

// Confirmable is now a factory function, with an optional parameter object
export function Confirmable(options?: SweetAlertOptions) {

  // our factory function will return our actual decorator function, but now we have
  // an actual options object to configure our alert box :)
  return (target: Object, propertyKey: string, descriptor: PropertyDescriptor) => {
    // the usual, caching the original implementation

Bilkiss

<button (click)=”deleteItem()”>Delete item</button>

Bilkiss

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class StorageService {

  constructor() { }

Bilkiss

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class StorageService {
  
  private storeDataSubjects: Map<string, BehaviorSubject<any>> = new Map();

Bilkiss

<div class="card mb-4">
    <div class="card-header"><i class="fa fa-plus text-success" aria-hidden="true"></i> New product</div>
    <div class="card-body">
        <div class="mb-3 row">
            <label for="productDataList" class="col-sm-3 text-end col-form-label">Product</label>
            <div class="col-sm-8">
                <input class="form-control" [ngClass]="{'is-invalid': productNameError}" (keyup)="onChangeProduct($event)" [(ngModel)]="currentProduct.name" list="productOptions" id="productDataList" placeholder="Type to search..." required>
                <datalist id="productOptions">
                    <option *ngFor="let opt of productNames" value="{{opt}}"></option>
                </datalist>

Bilkiss

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../services/storage.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

Bilkiss

<div class="card">
    <div class="card-body">
        <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col" class="col-2 text-center">Price (<i class="fa fa-dollar" aria-hidden="true"></i>)</th>
                <th scope="col" class="text-end pe-5 col-2">Action</th>
              </tr>
            </thead>

Bilkiss

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../services/storage.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {

Bilkiss

<div class="row g-0">
    <div class="col">
        <dl class="text-end">
            <dt>Subtotal: </dt>
            <dd>Discount (5%): </dd>
            <dd>VAT (15%): </dd>
            <dt class="fs-5">Total: </dt>
        </dl>
        
    </div>

Bilkiss

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../services/storage.service';

@Component({
  selector: 'app-total',
  templateUrl: './total.component.html',
  styleUrls: ['./total.component.scss']
})
export class TotalComponent implements OnInit {