Программно связать классы CSS с kendo-dropdownlist?

Question

Я хочу привязать кендо-dropdownlist к определенному классу. По существу мне нужно изменить внешний вид элемента управления на основе определенного состояния формы (например, ошибки, требуемой и т. Д.). Логика в модели определяет, какие классы применяются к элементу управления.

Если модель является «error-state», добавьте CSS, чтобы поместить вокруг нее поле, если необходимо, измените границу на другое состояние и другие бизнес-правила.

Как программно связать классы CSS с кендо-выпадающим списком? Я попытался

[ngClass]="class_list_in_model" 
-- and -- 
class="class_list_in_model" 

Для моего текста поле ввода элементов управления Я использую [ngClass] = «someproperty_in_model» и что работает.

Answer 1

Вы можете использовать [ngClass] связывания для <kendo-dropdownlist> компонента:

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <kendo-dropdownlist [ngClass]="ddl_state" [data]="listItems"> 
    </kendo-dropdownlist> 
    `, 
    styles: [".error-state { box-shadow: 0 0 3px 3px red; }"] 
}) 
export class AppComponent { 
    public ddl_state: string = "error-state"; 
    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"]; 
} 

Вот plunkr demo, который показывает это в действии.