# 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](https://www.telerik.com/kendo-angular-ui-develop/components/assets/fc78b569f5cf1e88b1ae31d92c79fc6c/vscode-snippets.png) ## 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 | | SpeechToTextButton | ka-speechtotextbutton | | SplitButton | ka-splitbutton | | **Charts** | | | Chart | ka-chart, ka-chart-series, ka-chart-series-item | | Sparkline | ka-sparkline | | **Chart Wizard** | | | Chart Wizard | ka-chartwizard | | **Conversational UI** | | | Chat | ka-chat | | AIPrompt | ka-aiprompt | | InlineAIPrompt | ka-inlineaiprompt | | **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 | | Form | ka-form | | FormFieldSet | ka-formfieldset | | FormField | ka-formfield | | MaskedTextBox | ka-maskedtextbox | | NumericTextBox | ka-numerictextbox | | OTP Input | ka-otpinput | | RadioButton | ka-radiobutton | | RangeSlider | ka-rangeslider | | Rating | ka-rating | | Signature | ka-signature | | 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 | | Timeline | ka-timeline | | **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** | | | ActionSheet | ka-actionsheet | | AppBar | ka-appbar | | BottomNavigation | ka-bottomnavigation | | Breadcrumb | ka-breadcrumb | | **Pager** | | | Pager | ka-datapager | | **PDF Export** | | | PDF Export | ka-pdf-export | | **PDFViewer** | | | PDFViewer | ka-pdfviewer | | **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 | | **Spreadsheet** | | | Spreadsheet | ka-spreadsheet | | **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 | | **Uploads** | | | Upload | ka-upload | | FileSelect | ka-fileselect | ## Suggested Links * [Download the Kendo UI Productivity Tools Extension](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard) * [Overview](https://www.telerik.com/kendo-angular-ui-develop/components/installation/vscode-extension) * [Project Wizard](https://www.telerik.com/kendo-angular-ui-develop/components/installation/vscode-extension/project-wizard) * [Scaffolders](https://www.telerik.com/kendo-angular-ui-develop/components/installation/vscode-extension/scaffolders)