@js-smart/ngxsmart v17.2.0

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 @ngxsmart/ngxsmart

and use it as shown below in each section

Publish library to NPM

1. Build the library

 nx build ngxsmart

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

 cd dist/libs/ngxsmart

3. Publish the library using the following command. If prompted, enter the 2fa auth code from the Authenticator app.

 npm publish --access public

4. Or use single command

 npm run build ngxsmart && cd dist/libs/ngxsmart && npm publish --access public

Supported Versions

Standalone components are supported in version 14.x.x or later. For Angular versions 13.x.x or below use 13.x.x version of the library.

Technologies

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

Auto Complete

Reusable Auto Complete that extends Mat Auto Complete component

Demo

https://stackblitz.com/edit/ngxsmart-autocomplete-demo

Usage

The library has 3 autocomplete components

1. autocomplete
2. object-autocomplete
3. string-autocomplete

To use the Auto Complete components, add the following code to the HTML page

app.component.html

<!-- Generic Auto Complete -->

<form [formGroup] = "inputFormGroup" >
<autocomplete [data] = "cities" [inputFormGroup] = "inputFormGroup" [required] = "true"
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: [''],
});

For object-autocomplete and string-autocomplete usage see the examples

Auto Complete API

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

Properties

Alert

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

Auto Complete API

List of selectors that can be used to select the component

Properties

Spinner

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

API

List of selectors that can be used to select the component

Properties

Print

Angular (2++) directive that prints HTML section

Usage

Import the main module NgxPrintModule :

import {NgxPrintModule} from '@ngxsmart/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>