Search results

Sizing in Angular TextBox component

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.
Source
Preview
app.component.ts
app.module.ts
main.ts
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);