NGX Input

Awesome all-in-one Angular package for inputs and reactive forms handling.

⭐ Demo ⭐ Changelog ⭐ Contact

Features

• OnPush change detection strategy
• Standalone component
• SASS-based theming
• Dark and light theme support
• Localization support
• Reactive forms support
• Dynamic form control creation
• Base class to add custom inputs
• View-mode and edit-mode (inline) support
• Bootstrap base inputs
  • Normal inputs
  • Selection inputs (single, multi)
  • Boolean inputs (checkbox, radio, button based, etc.)
  • Star rating input
  • File input

Installation

npm install --save @amirsavand/ngx-input

Setup

Styles

Import the styles in your styles.scss:

@import "@amirsavand/ngx-input/assets/styles";

To customize styling, either override the defaults after importing, or copy the file and write your own. To use SASS variables, import the variables file before the styles:

@import "@amirsavand/ngx-input/assets/variables";
@import "@amirsavand/ngx-input/assets/styles";

Use components

class MyPage {

  /** Reactive form instance for the model. */
  protected readonly form = new ReactiveForm<Foo>({
    crud: this.apiService.foo,
    form: new FormGroup({
      title: new FormControl<string>(''),
    }),
  });
}

<!-- Text input connected to the reactive form. -->
<ngx-input-text [form]="form"
                type="text"
                name="title"
                label="Title"
                placeholder="Write a title..."/>

Savand Bros © 2023–present.