Customize the step value and hide spin buttons in Angular Numerictextbox component

28 Sep 20232 minutes to read

The spin buttons allow you to increase or decrease the value with the predefined step value. The visibility of spin buttons can be set using theshowSpinButton property.

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets the step value as '2' to increase/decrease the value by '2'
    // sets the showSpinButton value as `false` to hide the spin buttons
    template: `
            <ejs-numerictextbox step='2' [showSpinButton]='false' min='10' max='100' value='16'></ejs-numerictextbox>
            `
})
export class AppComponent {
    constructor() {
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
 
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        NumericTextBoxModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);