You can change the appearance of the NumericTextBox by adding custom cssClass
to the component and enabling styles. Refer to the following example to change the appearance of the NumericTextBox.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// specifies the template string for the NumericTextBox component
// sets the custom css for NumericTextBox
template: `
<ejs-numerictextbox cssClass='e-style' value='10' placeholder= 'Enter Value' floatLabelType= 'Always' ></ejs-numerictextbox>
`
})
export class AppComponent {
constructor() {
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, NumericTextBoxModule
],
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);
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Angular NumericTextBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Angular NumericTextBox Component" />
<meta name="author" content="Syncfusion" />
<!-- Here we have used CDN links for our preview purpose -->
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-angular-inputs/styles/material.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='ang_container'>
<div class='wrap'>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</div>
</div>
</body>
<style>
.e-numeric.e-style .e-control.e-numerictextbox {
color: royalblue ;
font-size: xx-large ;
border: 0px ;
}
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
border-color: royalblue;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down {
color:royalblue;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
background: royalblue ;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
background: royalblue ;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
color:royalblue ;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-text.e-label-top {
color: royalblue ;
font-size: medium ;
}
</style>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 35px auto;
width: 240px;
padding-top: 100px;
}