0

I want to change the text color in a kendo-numerictextbox for KendoUI for Angular.

The style attribute has no effect. With Jquery we can change the style but how can we do this in KendoUI for Angular ?

<kendo-numerictextbox class="form-control"
               [decimals]="1"
                       [spinners]="false"
                       [format]="'n1'"
                       tabindex="{{i}}" 
                       style="font-size:12px; padding:1px; color:red"
                       [formControlName]="item.Index" >
  </kendo-numerictextbox>
Piet Demeester
  • 1
  • What have you tried so far? – realr Jul 26 '19 at 15:25
  • I tried with a class but no effect. The font size and padding (font-size:12px; padding:1px) actually do have the desired effect, the color not. No info in the official doc of KendoUI unfortunately – Piet Demeester Jul 26 '19 at 15:36

1 Answers1

0

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

@Component({
  selector: "my-app",
  template: `
    <style>
      ::ng-deep .k-numerictextbox .k-numeric-wrap .k-input {
        color: red;
      }
    </style>
    <kendo-numerictextbox
      [value]="value"
      [min]="0"
      [max]="100"
      [autoCorrect]="autoCorrect"
      style="font-size:12px; padding:1px;"
    >
    </kendo-numerictextbox>
  `
})
export class AppComponent {
  public autoCorrect: boolean = false;
  public value: number = 5;
}
Pooja
  • 11
  • 4
  • Please put your answer always in context instead of just pasting code. See [here](https://stackoverflow.com/help/how-to-answer) for more details. – gehbiszumeis May 14 '20 at 12:49
  • Use "::ng-deep" for applying the style to Kendo elements. Kendo has its own styles, so to modify it you have to inspect element and check the css class name of particular element and override it with your style/css. For more details please check https://blog.angular-university.io/angular-host-context/ – Pooja May 14 '20 at 13:18