@next-level-integration/nli-input-lib
Advanced tools
This module consist of 2 components. nli-text and nli-password components.
This module consist of 2 components. nli-text and nli-password components.
Standard component for user input. This component is based on material input component. The general structure of this component:
<nli-text [(ngModel)]=""
[fc]=""
[readonly]=""
[icon]=""
[nliMaxLength]=""
[inputLabel]=""
[inputClass]=""
[hintMsg]=""
[errorMsg]="">
</nli-text>
ngModel: bind field value to model.
fc: form control for defining validation
readonly: boolean field
icon: optional filed for icon font or vector based icon.
nliMaxLength: integer value for specifying maximum character.
inputLabel: title for input field
inputClass: for styling input element of field
hintMsg: hint message which is displayed under input with material primarty color
errorMsg: error message which is displayed when field is invalid with red color.
Standard component for user password. This component is based on material input component. The general structure of this component:
<nli-password name=""
[(ngModel)]=""
[formControl]=""
[fc]=""
inputLabel=""
inputClass=""
errorMsg="">
</nli-password>
ngModel: bind field value to model.
fc: form control for defining validation
inputLabel: title for input field
inputClass: for styling input element of field
errorMsg: error message which is displayed when field is invalid with red color.
Add dependency in package.json under dependencies object:
"nli-input-lib": "0.2.2"
Add CSS dependencies to main html file which by default is index.html:
<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"
type="text/css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
This component uses material fonts and icons and bootstrap CSS for responsive behavior.
Apply material theme. create app-theme.scss file and apply material theme. You should also add style
dependency in .angular-cli.json file:
"styles": [ ... "app-theme.scss" ],
The sample app-theme.scss exists at the end of this file.
Run npm install in project folder (The home folder that package.json exists):
npm install
This command downloads all dependencies including nli-input-lib. You can also download just this module with:
npm install nli-input-lib
Import input module to your project. In your main module (or module that you want use this component) that its default name is app.module.ts, import it:
import { LibModule as NliInputModule} from 'nli-input-lib';
...
@NgModule({
...
imports: [
...
NliInputModule
]
...
});
<div >
<nli-text name="username"
[(ngModel)]="loginModel.username"
[formControl]="loginForm.controls['username']"
[fc]="loginForm.controls['username']"
inputLabel="Benutzername"
inputClass="my-input wizard-fields-common"
errorMsg="Dieses Feld darf nicht leer sein">
</nli-text>
</div>
<div >
<nli-password name="password"
[(ngModel)]="loginModel.password"
[formControl]="loginForm.controls['password']"
[fc]="loginForm.controls['password']"
inputLabel="Passwort"
inputClass="my-input wizard-fields-common"
errorMsg="Dieses Feld darf nicht leer sein">
</nli-password>
</div>
##Appendix
Sample app-theme.scss
@import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the base styles for Angular Material core. We include this here so that you only // have to load a single css file for Angular Material in your app. @include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. $app-primary: mat-palette($mat-blue); $app-secondary: mat-palette($mat-blue); $app-accent: mat-palette($mat-orange, A200, A100, A400); // The warn palette is optional (defaults to red). $app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($app-theme);
FAQs
This module consist of 2 components. nli-text and nli-password components.
The npm package @next-level-integration/nli-input-lib receives a total of 13 weekly downloads. As such, @next-level-integration/nli-input-lib popularity was classified as not popular.
We found that @next-level-integration/nli-input-lib demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers 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
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.