Appearance

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

@Component({
    selector: 'my-app',
    template: `
    <div class="example-wrapper">
                <p>ColorGradient</p>
                <kendo-colorgradient [style.width]="'40%'"></kendo-colorgradient>
                <p>ColorPalette</p>
                <kendo-colorpalette [style.width]="'350px'"></kendo-colorpalette>
                <p>MaskedTextBox</p>
                <kendo-maskedtextbox
                  [style.width]="'70%'"
                    [(ngModel)]="maskedValue"
                    [mask]="'9-000'"
                ></kendo-maskedtextbox>
                <p>NumericTextBox</p>
                <kendo-numerictextbox
                  [style.width]="'350px'"
                    [(ngModel)] = "numericValue"
                ></kendo-numerictextbox>
                <p>Slider (value = {{sliderValue}})</p>
                <kendo-slider
                  [style.width]="'50%'"
                    [min]="min"
                    [max]="max"
                    [smallStep]="smallStep"
                    [(ngModel)] = "sliderValue"
                ></kendo-slider>

                <p>TextBox</p>
                <kendo-textbox-container
                  [style.width]="'400px'"
                  floatingLabel="First name">
                  <input kendoTextBox />
                </kendo-textbox-container>
    </div>
    `
})

export class AppComponent {
    public maskedValue: string;
    public sliderValue = 5;
    public numericValue = 5;
    public min = 0;
    public max = 10;
    public smallStep = 1;
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, InputsModule]
})
export class AppModule { }

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

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);