Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@ngxsmart/ngxsmart

Package Overview
Dependencies
1
Maintainers
1
Versions
30
Issues
File Explorer

Advanced tools

@ngxsmart/ngxsmart

Most commonly used Angular utility libraries

    13.2.0latest

Version published
Maintainers
1
Yearly downloads
1,890

Weekly downloads

Changelog

Source

13.2.0

What's Changed

  • feat(directives): adds preventMultipleClicks directive by @pavankjadda in https://github.com/ngxsmart/ngxsmart/pull/34

Full Changelog: https://github.com/ngxsmart/ngxsmart/compare/v13.1.19...v13.2.0

Readme

Source

NGX Smart utilities

Most commonly used Angular utility libraries

CI Ngx Cookie Service on npm

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
  1. If the NPM token is not configured, open ~/.npmrc and add the following line:
//registry.npmjs.org/:_authToken=<your npm token>
  1. Then navigate to dist directory
cd dist/libs/ngxsmart
  1. Publish the library using the following command. If prompted, enter the 2fa auth code from the Authenticator app.
npm publish --access public
  1. Or use single command
npm run build ngxsmart && cd dist/libs/ngxsmart && npm publish --access public

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)

AutoComplete Selector
autocomplete, lib-autocomplete
Object AutoComplete Selector
object-autocomplete, lib-object-autocomplete
String AutoComplete Selector
string-autocomplete, lib-string-autocomplete

Properties

PropertyDescriptionTypeDefault Value
inputFormGroupInput Form GroupFormGroup
labelLabel of the AutoCompletestring
placeHolderPlaceHolder of the AutoCompletestring
appearanceAppearance of the AutoComplete, defaults to fillstringfill
classesList of CSS classes that need to applied to autocompletestring
bindLabelApplies only to Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be shown when searching for datastringid
bindValueApplies only to Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be used for search. Defaults to IDstringid
requiredIs AutoCompletebooleanfalse
dataList of Objects or String values that need to be bind and searched forany[] or string[]false

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

Selector
alert,lib-alert

Properties

PropertyDescriptionTypeDefault Value
dismissibleIf set, displays an inline "Close" buttonbooleanfalse
dismissOnTimeoutIf set, dismisses the alert after Dismiss Timeoutbooleantrue
dismissTimeoutNumber in milliseconds, after which alert will be closedstring or number5000
isOpenIs alert visiblebooleanfalse
typeAlert type. Provides one of four bootstrap supported contextual classes: success, info, warning and dangerstringinfo

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

Selector
spinner,lib-spinner

Properties

PropertyDescriptionTypeDefault Value
bootstrapSpinnerUse Boostrap Spinner. Default truebooleanfalse
diameterDiameter of the Angular Material spinnerbooleantrue
colorColor of the Angular Material spinnerstring or ThemePalette5000
strokeWidthStroke Width of the Angular Material spinnerbooleanfalse

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>

Keywords

FAQs

What is @ngxsmart&#x2F;ngxsmart?

Most commonly used Angular utility libraries

Is @ngxsmart&#x2F;ngxsmart popular?

The npm package @ngxsmart&#x2F;ngxsmart receives a total of 135 weekly downloads. As such, @ngxsmart&#x2F;ngxsmart popularity was classified as not popular.

Is @ngxsmart&#x2F;ngxsmart well maintained?

We found that @ngxsmart&#x2F;ngxsmart demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 26 May 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc