open-index/open-npm huggingface dataset:
npm package: @nikxsh/ngmodelform
Description: This package is useful to implement simple model form with default bootstrap design but addon angular support.
Latest version: 1.0.1

# Angular Simple Model Form

This package is useful to implement simple model form with default bootstrap design but addon angular support. 

#### Angular Template file
1. Import `NgModelformModule` in your `app.module`
2. Add below mentioned selector tag in your `component's html template`

```html
<ngmodelform
    [formFields]="modelFormFields"
    [reset]="resetForm"
    (onSubmit)="onFormSubmit($event)">
</ngmodelform>
```

#### Angular Component
```javascript
import { Component, OnInit } from '@angular/core';
import { FormField, TextField, PasswordField, EmailField, TextAreaField, SelectField, RadioField, CheckBoxField } from 'ngmodelform';
import { FormControl, Validators } from '@angular/forms';

@Component({
	selector: 'form-package',
	templateUrl: './form-package.component.html'
})
export class FormPackageComponent implements OnInit {
	modelFormFields: FormField[] = [];
	formValues: string;

	constructor() {
	}

	ngOnInit(): void {
		let countries = ['India', 'Germany', 'Japan'];
		let cities = ['Pune', 'Berlin', 'Tokyo'];
		let genders = ["Male", "Female", "Other"];
		this.modelFormFields = [
			new TextField("Name", {
				name: "name",
				control: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(10)])
			}),
			new PasswordField("Password", {
				name: "password", control: new FormControl('', [Validators.required, Validators.minLength(3)])
			}),
			new EmailField("Email", {
				name: "email", control: new FormControl('', [Validators.required, Validators.email])
			}),
			new SelectField("Country", {
				name: "country", control: new FormControl('', Validators.required)
			}, countries),
			new SelectField("Cities", {
				name: "cities", control: new FormControl('', Validators.required)
			}, cities, true),
			new RadioField("Gender", {
				name: "gender", control: new FormControl(genders[2], Validators.required)
			}, genders),
			new TextAreaField("Notes", {
				name: "notes", control: new FormControl('', Validators.maxLength(15))
			}),
			new CheckBoxField("Terms & Conditions", {
				name: "tnc", control: new FormControl('', Validators.requiredTrue)
			})
		];
	}

	public onFormSubmit(event: any) {
		this.formValues = event;
	}
}
```

#### UI

![](https://github.com/nikxsh/javascripts/blob/master/files/ngmodelform-invalid.JPG?raw=true)

![](https://github.com/nikxsh/javascripts/blob/master/files/ngmodelform-valid.JPG?raw=true)


#### Notes
- Make sure that 
    - `bootstrap.bundle.min.js` has added under `scripts` section of `angular.json` file
    - `bootstrap.min.css` has added under `styles` section of `angular.json` file
npm package: @nikxsh/ngpagination
Description: This package is used to implement pagination with default bootstrap design but addon angular support.
Latest version: 1.0.2

# Angular custom pagination module (NgPaginationModule)

This package is used to implement pagination with default bootstrap design but addon angular support.

1. Import `NgPaginationModule` in your `app.module`
2. Add below mentioned selector tag in your `component's html template`

```html
 <pagination
	[totalItems]="totalItems"
	[itemsPerPage]="itemsPerPage"
	[maxSize]="maxSize"
	[disable]="loading"
	[reset]="resetPagination"
	[firstPageText]="firstPageText"
	[prevPageText]="prevPageText"
	[nextPageText]="nextPageText"
	[lastPageText]="lastPageText"
	(onPageChanged)="onPageChanged($event)">
 </pagination>
```
Default style set would be bootstrap ^4.0 but you can customize it by providing following inputs & these inputs are nothing but placeholder for css class name.

```html

	[pageListStyle]="pageListStyle"
	[pageStyle]="pageStyle"
	[pageLinkStyle]="pageLinkStyle"

```
npm package: @nil-tools/nil-ele-ui
Description: 安装此框架，请先安装 `Element-Plus`
Author: nilbrains
Latest version: 0.0.7

# 快速上手

## 安装

安装此框架，请先安装 `Element-Plus`

执行 `npm` 安装命令。

```bash
npm install @nil-tools/nil-ele-ui -S
```

## 使用

### 完整引入

```ts
// main.ts
import { createApp } from "vue";
import NilEleUI from "@nil-tools/nil-ele-ui";
import "@nil-tools/nil-ele-ui/lib/styles/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(NilEleUI);
app.mount("#app");
```