Notwithstanding Precautions, Misadventure

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

    1.0.0 • Public • Published

    AngularJS - Text Box Component

    A AngularJS based Text Box component used to specify an input field where the user can enter data.

    Table of contents

    Browser Support

    Chrome Firefox Safari Edge IE
    83.0 ✔ 77.0 ✔ 13.1.1 ✔ 83.0 ✔ 11.9 ✔


    Getting started

    Install the npm package:

    npm install angular-weblineindia-text-box
    yarn add angular-weblineindia-text-box


    Use the <angular-weblineindia-text-box> component:

    Add in app.module.ts file

    import { NgModule } from "@angular/core";
    import { TextModule } from "angular-weblineindia-text-box";
      imports: [TextModule]
    export class AppModule {}

    Add in app.component.ts file

    export class AppComponent {
      textBoxValue: any = {
        placeholder: "Enter value",
        value: "",
        id: "textbox",
        name: "textbox",
        tabindex: 0,
        disabled: false,
        type: "text",
        maxLength: 10,
        isnumberonly: false,
        className: { "form-control": true },
        regex: /^[A-Za-z0-9]*$/
      onChangeText(event) {
        if (this.textBoxValue.isnumberonly) {
          this.textBoxValue.value =^[0-9\b]+$/, "");
        } else {
          if ( === 0) {
            this.textBoxValue.value =;
          } else {
            let regex = /^[A-Za-z0-9]*$/;
            this.textBoxValue.value =, "");
      onFocusText(event) { = "";
      onBlurText(event) { = this.textBoxValue.placeholder;
      onKeyDownText(event) {}
      onKeyPressText(event) {}
      onKeyUpText(event) {}

    Add in app.component.html file


    Available Props

    Prop Type default Description
    id String ID for the input
    name String Nam for the input
    value string Value of the component
    classname object Class to the input
    placeholder String The input field will get this placeholder text
    disabled Boolean false Disable component
    tabindex Number 0 Tab index of the component
    maxlength Number 25 The input maxlength
    regex RegExp The input regex
    autocomplete String off The input of autocomplelete
    type String text Type for the input
    isnumberonly Boolean false The input field will get number value


    Name Description
    focus Gets triggered when the autocomplete input field receives focus.
    blur Gets triggered when the autocomplete input field loses focus.
    change Gets triggered when the autocomplete results got changed.
    KeyPress Gets triggered when a key gets pressed.
    KeyDown Gets triggered when a key gets down.
    KeyUp Gets triggered when a key gets up.

    Want to Contribute?

    • Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
    • Fork it.
    • Create new branch to contribute your changes.
    • Commit all your changes to your branch.
    • Submit a pull request.

    Collection of Components

    We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development


    Detailed changes for each release are documented in




    angular-weblineindia-text-box, textbox, input, angular, angular-component, textbox-component, textarea, text-box-input


    npm i angular-weblineindia-text-box

    DownloadsWeekly Downloads






    Unpacked Size

    126 kB

    Total Files


    Last publish


    • partners-wli