Angular Code Snippets
The Kendo UI Productivity Tools extension provides a handy feature for improving the daily development with our library—code snippets for fast UI component reference and configuration. Snippets simplify and accelerate the implementation of Kendo UI components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source-code, while also including predefined tab stops for the required options.
Our snippets library consists of many components such as Grid, Inputs, Layouts etc. More will be available in upcoming months.
To take advantage of the available code snippets, follow the steps below:
-
Click inside the source-code in the IDE, where the component should be inserted.
-
Type the
ka-snippet prefix to list theKendo UI for Angularsnippets. -
Continue by typing the name of the component that should be inserted. Some components are provided by multiple snippets, which allow you to create them in multiple ways, depending on the desired configuration.
-
Press
Enterto insert the desired component in the source-code. -
Optionally, if the component provides placeholders for specific properties, you could iterate and provide them by pressing the
Tabkey.
Code Snippets Library
| COMPONENT | SNIPPETS |
|---|---|
| Barcodes | |
| Barcode | ka-barcode |
| QRCode | ka-qrcode |
| Buttons | |
| Button | ka-button |
| ButtonGroup | ka-buttongroup |
| Chip | ka-chip |
| ChipList | ka-chiplist |
| DropDownButton | ka-dropdownbutton |
| FloatingActionButton | ka-floatingactionbutton |
| SplitButton | ka-splitbutton |
| Charts | |
| Chart | ka-chart, ka-chart-series, ka-chart-series-item |
| Sparkline | ka-sparkline |
| Conversational UI | |
| Chat | ka-chat |
| DateInputs | |
| Calendar | ka-calendar |
| DateInput | ka-dateinput |
| DatePicker | ka-datepicker |
| DateTimePicker | ka-datetimepicker |
| DateRange | ka-daterange |
| MultiViewCalendar | ka-multiviewcalendar |
| TimePicker | ka-timepicker |
| Dialogs | |
| Dialog | ka-dialog, ka-dialog-titlebar, ka-dialog-actions |
| Window | ka-window, ka-window-titlebar |
| Dropdowns | |
| AutoComplete | ka-autocomplete |
| ComboBox | ka-combobox |
| DropDownList | ka-dropdownlist |
| DropDownTree | ka-dropdowntree, ka-dropdowntree-expandable |
| MultiColumnComboBox | ka-multicolumncombobox, ka-multicolumncombobox-column |
| MultiSelect | ka-multiselect |
| MultiSelectTree | ka-multiselecttree, ka-multiselecttree-expandable |
| Editor | |
| Editor | ka-editor |
| Excel Export | |
| Excel Export | ka-excelexport, ka-excelexport-column-group |
| Filter | |
| Filter | ka-filter |
| Gantt | |
| Gantt | ka-gantt, ka-gantt-views |
| Gauges | |
| ArcGauge | ka-arcgauge |
| CircularGauge | ka-circulargauge |
| LinearGauge | ka-lineargauge, ka-lineargauge-scale, ka-lineargauge-pointers |
| RadialGauge | ka-radialgauge, ka-radialgauge-pointers |
| Grid | |
| Grid | ka-grid, ka-grid-column, ka-grid-column-group, ka-grid-virtualization |
| Icons | |
| Icon | ka-icon |
| SVGIcon | ka-svg-icon |
| Indicators | |
| Badge | ka-badge |
| Loader | ka-loader |
| Skeleton | ka-skeleton |
| Inputs | |
| CheckBox | ka-checkbox |
| ColorGradient | ka-colorgradient, ka-colorgradient-contrast |
| ColorPalette | ka-colorpalette |
| ColorPicker | ka-colorpicker |
| FlatColorPicker | ka-flatcolorpicker |
| FormField | ka-formfield |
| MaskedTextBox | ka-maskedtextbox |
| NumericTextBox | ka-numerictextbox |
| RadioButton | ka-radiobutton |
| RangeSlider | ka-rangeslider |
| Slider | ka-slider |
| Switch | ka-switch |
| TextArea | ka-textarea, ka-textarea-resizable |
| TextBox | ka-textbox |
| Labels | |
| FloatingLabel | ka-floatinglabel |
| Label | ka-label |
| Layout | |
| Avatar | ka-avatar |
| Card | ka-card, ka-card-header, ka-card-body, ka-card-actions, ka-card-separator |
| Drawer | ka-drawer |
| ExpansionPanel | ka-expansionpanel |
| GridLayout | ka-gridlayout, ka-gridlayout-item |
| PanelBar | ka-panelbar, ka-panelbar-item, ka-panelbar-item-content |
| Splitter | ka-splitter, ka-splitter-pane |
| StackLayout | ka-stacklayout |
| Stepper | ka-stepper |
| TabStrip | ka-tabstrip, ka-tabstrip-tab, ka-tabstrip-tab-content |
| TileLayout | ka-tilelayout, ka-tilelayout-item |
| ListBox | |
| ListBox | ka-listbox |
| ListView | |
| ListView | ka-listview |
| Map | |
| Map | ka-map, ka-map-marker, ka-map-bubble |
| Menus | |
| ContextMenu | ka-contextmenu |
| Menu | ka-menu |
| Navigation | |
| AppBar | ka-appbar |
| BottomNavigation | ka-bottomnavigation |
| Breadcrumb | ka-breadcrumb |
| Pager | |
| Pager | ka-datapager |
| PDF Export | |
| PDF Export | ka-pdf-export |
| PivotGrid | |
| PivotGrid | ka-pivotgrid |
| Popup | |
| Popup | ka-popup |
| ProgressBars | |
| ChunkProgressBar | ka-chunkprogressbar |
| ProgressBar | ka-progressbar |
| Ripple | |
| Ripple | ka-ripple |
| Scheduler | |
| Scheduler | ka-scheduler, ka-scheduler-views |
| ScrollView | |
| ScrollView | ka-scrollview |
| Sortable | |
| Sortable | ka-sortable |
| ToolBar | |
| ToolBar | ka-toolbar |
| Tooltips | |
| Popover | ka-popover, ka-popover-template |
| Tooltip | ka-tooltip, ka-tooltip-template |
| TreeList | |
| TreeList | ka-treelist, ka-treelist-column |
| TreeView | |
| TreeView | ka-treeview |
| Typography | |
| Typography | ka-typography |