Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@ngxsmart/ngxsmart
Advanced tools
Most commonly used Angular utility libraries
Install the library
$ npm install @ngxsmart/ngxsmart
and use it as shown below in each section
$ nx build ngxsmart
~/.npmrc
and add the following line://registry.npmjs.org/:_authToken=<your npm token>
dist
directory$ cd dist/libs/ngxsmart
$ npm publish --access public
Reusable Auto Complete that extends Mat Auto Complete component
https://stackblitz.com/edit/ngxsmart-autocomplete-demo
The library has 3 autocomplete components
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
AutoComplete Selector |
---|
autocomplete, lib-autocomplete |
Object AutoComplete Selector |
---|
object-autocomplete, lib-object-autocomplete |
String AutoComplete Selector |
---|
string-autocomplete, lib-string-autocomplete |
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 Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be shown when searching for data | string | id |
bindValue | Applies only to Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be used for search. Defaults to ID | string | id |
required | Is AutoComplete | boolean | false |
data | List of Objects or String values that need to be bind and searched for | any[] or string[] | false |
Reusable alert component created with Bootstrap 5+ and Angular 11+
Selector |
---|
alert,lib-alert |
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 |
Reusable Spinner component created with Bootstrap 5.x and Angular 12.x
Selector |
---|
spinner,lib-spinner |
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 |
Angular (2++) directive that prints HTML section
Import the main module NgxPrintModule
:
import {NgxPrintModule} from '@ngxsmart/print';
@NgModule({
...
imports:
[NgxPrintModule, ...],
...
})
export class YourAppModule {
}
3- Then plug n' play with it:
<div>
<!--Your html stuff that you want to print-->
</div>
<button>print</button> <!--Your relevant print button-->
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>
printTitle
:
<div id="print-section">
<!-- ... -->
</div>
<button
printTitle="MyTitle"
printSectionId="print-section"
ngxPrint>print
</button>
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.
useExistingCss
attribute:
<div id="print-section">
<!-- ... -->
</div>
<button
[useExistingCss]="true"
printSectionId="print-section"
ngxPrint>print
</button>
styleSheetFile
:
<div id="print-section">
<!-- ... -->
</div>
<button
styleSheetFile="assets/css/custom1.css,assets/css/custom2.css"
printSectionId="print-section"
ngxPrint>print
</button>
FAQs
Reusable Angular components built with Angular Material and Bootstrap 5.x, Utility classes/functions for Date, Form and String operations
The npm package @ngxsmart/ngxsmart receives a total of 0 weekly downloads. As such, @ngxsmart/ngxsmart popularity was classified as not popular.
We found that @ngxsmart/ngxsmart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.