@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.
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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.