Sizing in Angular Textbox component

21 Sep 20225 minutes to read

You can render the TextBox in two different sizes.

Property Description
Normal By default, the TextBox is rendered with normal size.
Small You need to add e-small class to the input element, or else add to the input container.
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<div class="wrap">

                <h4> Normal Size </h4>

                <input class="e-input" type="text"  placeholder="Enter Name"/>
                <div class="e-float-input">
                  <input type='text' required />
                  <span class="e-float-line"></span>
                  <label class="e-float-text">Enter Name</label>
                </div>
                <div class="e-input-group">
                  <input class="e-input" type="text" (focus)="focusIn($event.target)"
                  placeholder = "Enter Date" (blur)="focusOut($event.target)"/>
                  <span class="e-input-group-icon e-input-popup-date" (mouseup)="onMouseUp($event.target)" (mousedown)="onMouseDown($event.target)"></span>
                </div>

                <h4> Small Size </h4>

                <input class="e-input e-small" type="text"  placeholder="Enter Name"/>
                <div class="e-float-input e-small">
                  <input type='text' required />
                  <span class="e-float-line"></span>
                  <label class="e-float-text">Enter Name</label>
                </div>
                <div class="e-input-group e-small">
                  <input class="e-input" type="text" (focus)="focusIn($event.target)"
                  placeholder = "Enter Date" (blur)="focusOut($event.target)"/>
                  <span class="e-input-group-icon e-input-popup-date" (mouseup)="onMouseUp($event.target)" (mousedown)="onMouseDown($event.target)"></span>
                </div>
              </div>`
})

export class AppComponent {
    public focusIn(target: HTMLElement): void {
        target.parentElement.classList.add('e-input-focus');
    }

    public focusOut(target: HTMLElement): void {
        target.parentElement.classList.remove('e-input-focus');
    }

    public onMouseDown(target: HTMLElement): void {
        target.classList.add('e-input-btn-ripple');
    }

    public onMouseUp(target: HTMLElement): void {
        let ele: HTMLElement = target;
        setTimeout(
                () => {ele.classList.remove('e-input-btn-ripple'); },
                500);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);