gh-ngrx-elements

This Angular library contains sharable NgRx elements such as selectors, actions, and related functions. It allows to reuse these elements without duplication code in another Angular libraries or Angular applications.

Sharable selectors

1. cartSubtotalBeforeDiscountSelector The selector returns product prices in the cart before discounts, tax and shipping calculation, only the total price of all products and variants. For calculation state.ghCartState.cart.products and state.ghCartState.cart.variants are used.

Sharable utils

1. calculateCartSubtotal The function returns the subtotal price of incoming products and variants.

calculateCartSubtotal(products: Products, variants: Products): number;

2. getRoundedTotal The function returns a rounded price with a maximum of two decimal places.

getRoundedTotal(total: number): number;

Usage

To use these sharable elements follow these steps:

Installation

Install the gh-ngrx-elements library by running the following command

npm install --save @a15-ghm/gh-ngrx-elements

Importing and usage selectors

Import the selector to where you need it and use it

import { Component, OnInit, inject } from '@angular/core';
import { Store } from '@ngrx/store';

import { IStore } from '@a15-ghm/gh-models/interfaces/store';
import { cartSubtotalBeforeDiscountSelector } from '@a15-ghm/gh-ngrx-elements';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  cartSubtotal: number;

  private store: Store<IStore> = inject(Store);

  ngOnInit() {
    this.store.select(cartSubtotalBeforeDiscountSelector).subscribe((subtotal) => {
      this.cartSubtotal = subtotal;
    });
  }
}

Improting and usage utilities

Import the utility to where you need it and use it

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

import { calculateCartSubtotal, getRoundedTotal } from '@a15-ghm/gh-ngrx-elements';
import { Product } from '@a15-ghm/gh-models/types/product';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  products: Product;
  variants: Product;

  calculateSubtotal(): number {
    const subtotal = calculateCartSubtotal(this.products, this.variants);

    return getRoundedTotal(subtotal);
  }
}