@nitro / Multiline Input

Multiline Input can be used for long text inputs such as description, Patient History, Search Box etc. This control will display in a single line, and also it will grow when the content gets bigger. Also we can able to restrict the total number of rows to display.

Features:

1. Light weight
2. Fully customizable
3. CSS vars for theming
4. Single Line input control for compact view and can open the text to multiple lines onHover or onFocus

Usage

app.module.ts

import { MultilineModule } from "ngx-nitro-multiline";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MultilineModule
  ]
})

some.component.ts

import { MultilineComponent } from "ngx-nitro-multiline";

...

export class AppComponent {
...

  mlForm: FormGroup;
  constructor(
    public fb: FormBuilder
  ) {
    this.mlForm = this.fb.group({
      multiline: ['', Validators.required],
    });
  }

  onInputChange(event: any) {
    console.log(event.target.value);
  }
...
}

some.component.html

  <div [formGroup]="mlForm">
    <ngx-nitro-multiline [fontSize]="16" [disabled]="false" [readonly]="false" (input)="onInputChange($event)"
      placeholder="Product Description" formControlName="multiline"></ngx-nitro-multiline>
  </div>

CSS Variables:

.multilineInput {
    --nitro-ml-bg: #fff;
    --nitro-ml-pad-x: 0.4em;
    --nitro-ml-pad-y: 0.5em;
    --nitro-ml-radius: 10px;
    --nitro-ml-height: 36px;
    --nitro-ml-fontsize: 16px;
    --nitro-ml-lineheight: 1.5em;
    --nitro-ml-border-color: #ccc;
    --nitro-ml-transition: all ease-in 300ms;
}

This library was generated with Angular CLI version 17.1.3.