New to Kendo UI for Angular? Start a free 30-day trial

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:

  1. Click inside the source-code in the IDE, where the component should be inserted.
  2. Type the ka- snippet prefix to list the Kendo UI for Angular snippets.
  3. 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.
  4. Press Enter to insert the desired component in the source-code.
  5. Optionally, if the component provides placeholders for specific properties, you could iterate and provide them by pressing the Tab key.

VSCode-Snippets

Code Snippets Library

COMPONENTSNIPPETS
Barcodes
Barcodeka-barcode
QRCodeka-qrcode
Buttons
Buttonka-button
ButtonGroupka-buttongroup
Chipka-chip
ChipListka-chiplist
DropDownButtonka-dropdownbutton
FloatingActionButtonka-floatingactionbutton
SplitButtonka-splitbutton
Charts
Chartka-chart, ka-chart-series, ka-chart-series-item
Sparklineka-sparkline
Conversational UI
Chatka-chat
DateInputs
Calendarka-calendar
DateInputka-dateinput
DatePickerka-datepicker
DateTimePickerka-datetimepicker
DateRangeka-daterange
MultiViewCalendarka-multiviewcalendar
TimePickerka-timepicker
Dialogs
Dialogka-dialog, ka-dialog-titlebar, ka-dialog-actions
Windowka-window, ka-window-titlebar
Dropdowns
AutoCompleteka-autocomplete
ComboBoxka-combobox
DropDownListka-dropdownlist
DropDownTreeka-dropdowntree, ka-dropdowntree-expandable
MultiColumnComboBoxka-multicolumncombobox, ka-multicolumncombobox-column
MultiSelectka-multiselect
MultiSelectTreeka-multiselecttree, ka-multiselecttree-expandable
Editor
Editorka-editor
Excel Export
Excel Exportka-excelexport, ka-excelexport-column-group
Filter
Filterka-filter
Gantt
Ganttka-gantt, ka-gantt-views
Gauges
ArcGaugeka-arcgauge
CircularGaugeka-circulargauge
LinearGaugeka-lineargauge, ka-lineargauge-scale, ka-lineargauge-pointers
RadialGaugeka-radialgauge, ka-radialgauge-pointers
Grid
Gridka-grid, ka-grid-column, ka-grid-column-group, ka-grid-virtualization
Icons
Iconka-icon
SVGIconka-svg-icon
Indicators
Badgeka-badge
Loaderka-loader
Skeletonka-skeleton
Inputs
CheckBoxka-checkbox
ColorGradientka-colorgradient, ka-colorgradient-contrast
ColorPaletteka-colorpalette
ColorPickerka-colorpicker
FlatColorPickerka-flatcolorpicker
FormFieldka-formfield
MaskedTextBoxka-maskedtextbox
NumericTextBoxka-numerictextbox
RadioButtonka-radiobutton
RangeSliderka-rangeslider
Sliderka-slider
Switchka-switch
TextAreaka-textarea, ka-textarea-resizable
TextBoxka-textbox
Labels
FloatingLabelka-floatinglabel
Labelka-label
Layout
Avatarka-avatar
Cardka-card, ka-card-header, ka-card-body, ka-card-actions, ka-card-separator
Drawerka-drawer
ExpansionPanelka-expansionpanel
GridLayoutka-gridlayout, ka-gridlayout-item
PanelBarka-panelbar, ka-panelbar-item, ka-panelbar-item-content
Splitterka-splitter, ka-splitter-pane
StackLayoutka-stacklayout
Stepperka-stepper
TabStripka-tabstrip, ka-tabstrip-tab, ka-tabstrip-tab-content
TileLayoutka-tilelayout, ka-tilelayout-item
ListBox
ListBoxka-listbox
ListView
ListViewka-listview
Map
Mapka-map, ka-map-marker, ka-map-bubble
Menus
ContextMenuka-contextmenu
Menuka-menu
Navigation
AppBarka-appbar
BottomNavigationka-bottomnavigation
Breadcrumbka-breadcrumb
Pager
Pagerka-datapager
PDF Export
PDF Exportka-pdf-export
PivotGrid
PivotGridka-pivotgrid
Popup
Popupka-popup
ProgressBars
ChunkProgressBarka-chunkprogressbar
ProgressBarka-progressbar
Ripple
Rippleka-ripple
Scheduler
Schedulerka-scheduler, ka-scheduler-views
ScrollView
ScrollViewka-scrollview
Sortable
Sortableka-sortable
ToolBar
ToolBarka-toolbar
Tooltips
Popoverka-popover, ka-popover-template
Tooltipka-tooltip, ka-tooltip-template
TreeList
TreeListka-treelist, ka-treelist-column
TreeView
TreeViewka-treeview
Typography
Typographyka-typography

In this article

Not finding the help you need?