Add floating label to read only textbox in Angular Textbox component
28 Sep 20234 minutes to read
You can achieve floating label for read-only textboxes by adding/removing e-label-top
and e-label-bottom
classes to the label element
In this sample, click the update value button to fill the read-only textbox with value and float a label.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<div class="wrap">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<div class="e-float-input">
<input class="e-input myField" id="myText" name="readonlyAttr" type="text" readOnly>
<span class="e-float-line"></span>
<label class="e-float-text">Enter value</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-lg-10 col-md-10">
<button ejs-button class="e-btn update_value" id='valuebtn' >Set value</button>
<button ejs-button class="e-btn remove_value" id='removebtn' >Remove value</button>
</div>
</div>
</div>`
})
export class AppComponent {
ngAfterViewInit(): void {
(document.getElementById('valuebtn') as HTMLElement).onclick = () => {
((document.getElementsByClassName('myField')[0]) as any).value = '10';
checkFloatingLabel('myText')
}
(document.getElementById('removebtn') as HTMLElement).addEventListener('click', function() {
((document.getElementsByClassName('myField')[0]) as any).value = '';
checkFloatingLabel('myText')
})
}
}
function checkFloatingLabel(id: any): void {
let inputElement: HTMLElement | any = document.getElementById(id) as HTMLElement;
let labelElement: Element = (inputElement.parentElement as HTMLElement).querySelector('.e-float-text') as Element;
if (inputElement.value !== '') {
labelElement.classList.remove('e-label-bottom');
labelElement.classList.add('e-label-top');
} else {
labelElement.classList.remove('e-label-top');
labelElement.classList.add('e-label-bottom');
}
let inputField = document.getElementById('myText');
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);