items-text-box
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

ItemsTextBox

This is an Angular component of a textbox which allows users to input an array of text, and is compatible with Angular Reactive Forms. This component is exactly like the Chips component in Angular Material, as such this component is created for demonstration purpose only.

Usage Example

Import the ReactiveFormsModule and ItemsTextBoxModule into your app module

import {ItemTextBoxModule} from 'items-text-box';
import {ReactiveFormsModule} from '@angular/forms';

In the angular template, add the item-text-box tag wherever you need it to be. Example below shows usage with Angular ReactiveForm

<item-text-box formControlName="items" id="itemsTextBox"></item-text-box>

Sample Usage

app.component.ts

import {Component} from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  formGroup: FormGroup = this.fb.group({items: [['a','b','c']]});

  constructor(private fb: FormBuilder) {
  }

  logFormGroupValues(): void {
    console.log(this.formGroup.value);
  }

  UpdateItemsTextBox(): void {
    (this.formGroup.get('items') as FormControl).setValue(['d', 'e', 'f']);
  }
}

app.component.html

<form [formGroup]="formGroup" (ngSubmit)="logFormGroupValues()" (keydown.enter)="$event.preventDefault()">
  <label for="itemsTextBox">Items: </label>
  <item-text-box formControlName="items" id="itemsTextBox"></item-text-box>
  <button type="button" (click)="UpdateItemsTextBox()">Update ItemsTextBox</button>
  <button type="submit">Submit</button>
</form>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {ItemTextBoxModule} from 'items-text-box';
import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ItemTextBoxModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Readme

Keywords

Package Sidebar

Install

npm i items-text-box

Weekly Downloads

1

Version

1.0.2

License

none

Unpacked Size

55 kB

Total Files

18

Last publish

Collaborators

  • thecodinganalyst