@teenageinterface/input NPM

Input Component

The Input component is a customizable input field for various types of data in your Angular application. It supports different input types, including text, password, email, and file inputs, and emits events on value changes and when the enter key is pressed.

Installation

Ensure that you have installed the @teenageinterface/input library and included FormsModule in your Angular application. If not, you can add them using:

npm install @teenageinterface/input

import { FormsModule } from '@angular/forms';

Usage

Import the InputComponent into your Angular application:

import { InputComponent } from '@teenageinterface/input';

@Component({
  selector: 'app-input-example',
  template: `
    <tiInput [(value)]="inputValue" (onEnter)="onSubmit($event)"></tiInput>
  `,
})
export class InputExampleComponent {
  inputValue: string = '';
  onSubmit(value: string) {
    console.log('Entered value:', value);
  }
}

Example

<tiInput [value]="inputValue" [placeholder]="'Enter text'" (valueChange)="onValueChange($event)"></tiInput>

Properties

Property	Type	Default	Description
`id`	`string`	`null`	The ID of the input field.
`disabled`	`boolean`	`false`	If `true`, the input field will be disabled.
`serverError`	`boolean`	`false`	If `true`, the input will visually indicate a server error.
`value`	`string`	`""`	The value of the input field.
`placeholder`	`string`	`""`	Placeholder text for the input field.
`required`	`boolean`	`false`	If `true`, the input will be required.
`type`	`"text" \\| "password" \\| "email" \\| "file" \\| "bigFile"`	`"text"`	The input type. Supports text, password, email, file, and bigFile.