NGX Smart utilities

Reusable Angular components built with Angular Material and Bootstrap 5.x, Utility classes/functions for Date, Form and String operations

Installation

Install the library

npm install @js-smart/ng-kit

and use it as shown below in each section

Technologies

1. Angular 17+
2. Bootstrap 5+ (if applicable)

Auto Complete

Reusable Auto Complete that extends Mat Auto Complete component

Demo

https://main--js-smart-ng-kit.netlify.app/autocomplete-demo

Usage

The library has one autocomplete component. To use the Auto Complete component, add the following code to the HTML page

app.component.html

<!-- Auto Complete with Objects -->

<form [formGroup]="genericFormGroup">
    <autocomplete
      [data]="cities"
      [inputFormGroup]="genericFormGroup"
      [required]="true"
      [displayWith]="displayFn"
      bindLabel="location"
      bindValue="id"
      label="City"
      placeHolder="Select City">
    </autocomplete>
</form>

app.component.ts

Then define form group instances and object array (cities) and names (for string array)

// Define objects
cities = [{id: 1001, location: 'New York'}, {id: 1002, location: 'Boston'}, {id: 1001, location: 'Washington DC'}];

// Define Form Groups
inputFormGroup = this.fb.group({
  autocomplete: ['']
})

//Display function
displayFn(object: any): string {
		if (typeof object === "string") return object;
		return object && object["location"] ? object["location"] : "";
	}

If you are using strings rather than objects, do not provide bindLabel, bindValue and displayWith inputs. See below sample

<!-- Auto Complete with Strings -->
<form [formGroup]="inputFormGroup">
  <autocomplete
    [data]="names"
    [inputFormGroup]="inputFormGroup"
    [required]="true"
    label="City"
    placeHolder="Select City">
  </autocomplete>
</form>

Auto Complete API

List of selectors that can be used to select the component(s)

| AutoComplete Selector | |--------------------------------| | autocomplete, lib-autocomplete |

Properties

| Property | Description | Type | Default Value | |----------------|---------------------------------------------------------------------------------------------------------------------------|-------------------|---------------| | inputFormGroup | Input Form Group | FormGroup | | | label | Label of the AutoComplete | string | | | placeHolder | PlaceHolder of the AutoComplete | string | | | appearance | Appearance of the AutoComplete, defaults to fill | string | fill | | classes | List of CSS classes that need to applied to autocomplete | string | | | bindLabel | Applies only to AutoComplete with Objects. Attribute of the Object whose value would be shown when searching for data | string | id | | bindValue | Applies only to AutoComplete with Objects. Attribute of the Object whose value would be used for search. Defaults to ID | string | id | | displayWith | Applies only to AutoComplete with Objects. A function used to show display value in Input | boolean | false | | required | Provide true if AutoComplete is required, otherwise provide false | boolean | false | | data | List of Objects or String values that need to be bind and searched for | any[] or string[] | false |

Alert

Reusable alert component created with Bootstrap 5+ and Angular 17+

Auto Complete API

List of selectors that can be used to select the component

| Selector | |-----------------| | alert,lib-alert |

Properties

| Property | Description | Type | Default Value | |------------------|------------------------------------------------------------------------------------------------------------|------------------|---------------| | dismissible | If set, displays an inline "Close" button | boolean | false | | dismissOnTimeout | If set, dismisses the alert after Dismiss Timeout | boolean | true | | dismissTimeout | Number in milliseconds, after which alert will be closed | string or number | 5000 | | isOpen | Is alert visible | boolean | false | | type | Alert type. Provides one of four bootstrap supported contextual classes: success, info, warning and danger | string | info |

Spinner

Reusable Spinner component created with Bootstrap 5.x and Angular 17.x

Demo

https://main--js-smart-ng-kit.netlify.app/alert-demo

API

List of selectors that can be used to select the component

| Selector | |---------------------| | spinner,lib-spinner |

Properties

| Property | Description | Type | Default Value | |------------------|----------------------------------------------|--------------------------|---------------| | bootstrapSpinner | Use Boostrap Spinner. Default true | boolean | false | | diameter | Diameter of the Angular Material spinner | boolean | true | | color | Color of the Angular Material spinner | string or ThemePalette | 5000 | | strokeWidth | Stroke Width of the Angular Material spinner | boolean | false |

Print

Angular (2++) directive that prints HTML section

Usage

Import the main module NgxPrintModule :

import {NgxPrintModule} from '@js-smart/print';

@NgModule({
...
 imports:
[NgxPrintModule, ...],
...
})

export class YourAppModule {
}

3- Then plug n' play with it:

• Assuming you want to print the following HTML section:

<div>
	<!--Your html stuff that you want to print-->
</div>
<button>print</button>
<!--Your relevant print button-->

• Now, what you have to do is tagging your wanted-to-print section by an id attribute, then link that id to a directive parameter in your button :

<!--
   1)- Add an ID here
 -->
<div id="print-section">
	<!--Your html stuff that you want to print-->
</div>

<!--
  2)- Add the directive name in your button (ngxPrint),
  3)- Affect your ID to printSectionId
-->
<button printSectionId="print-section" ngxPrint>print</button>

Optional properties

• You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button printTitle:

<div id="print-section">
	<!-- ... -->
</div>

<button printTitle="MyTitle" printSectionId="print-section" ngxPrint>print</button>

• Also, would you like to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called printStyle:

<div id="print-section">
	<!-- ... -->
</div>

<button [printStyle]="{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}" printSectionId="print-section" ngxPrint>print</button>

Here some simple styles were added to every h1 & h2 tags within the div where print-section is tagged to its id attribute.

• If you would like to use your existing CSS with media print you can add the useExistingCss attribute:

<div id="print-section">
	<!-- ... -->
</div>

<button [useExistingCss]="true" printSectionId="print-section" ngxPrint>print</button>

• If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use styleSheetFile:

<div id="print-section">
	<!-- ... -->
</div>

<button styleSheetFile="assets/css/custom1.css,assets/css/custom2.css" printSectionId="print-section" ngxPrint>print</button>

Publish library to NPM

1. Build the library

   nx build ng-kit

2. If the NPM token is not configured, open ~/.npmrc and add the following line:

   //registry.npmjs.org/:_authToken=<your npm token>

3. Then navigate to dist directory anf publish the library to NPM. If prompted, enter the 2fa auth code from the Authenticator app.

   cd dist/libs/ng-kit && npm publish --tag latest

   For beta releases use tag --tag beta