Getting Started with Kendo UI for Angular
Get up and running with Kendo UI for Angular - scaffold a project in just a few steps, then explore the most popular components to start building your UI.
Quick Start
Set up your first Kendo UI for Angular project and start building in minutes. Use the Kendo CLI for fast command-line scaffolding (recommended), or the VS Code Extension for a visual, wizard-driven experience with full customization:
Create a Project with the Kendo CLI
The Kendo CLI offers both an interactive wizard and direct setup commands. If you are new to Kendo UI for Angular, the wizard gives you the fastest way to start.
-
Install the Kendo CLI and Angular CLI globally:
shnpm i -g @progress/kendo-cli@latest @angular/cli -
Launch the interactive wizard by running
kendowith no arguments:shkendo -
In the Quick Start section, select Create a new project, then follow the prompts to configure your project.
When setup is complete, the wizard shows a summary similar to this:
╭───────────────────────────────────────────────────────────────╮
│ ✓ Kendo UI for Angular app ready │
│ │
│ Next steps: │
│ cd MyBlankAngularApp │
│ npm install │
│ ng serve │
│ │
│ Theme Default │
│ │
│ Docs https://www.telerik.com/kendo-angular-ui/components │
╰───────────────────────────────────────────────────────────────╯
Run the commands in the Next steps section to install dependencies and start the development server.
Prefer to run commands manually? See Generate a Kendo UI for Angular Project for all available options.
Create a Project with the VS Code Extension
Use the Kendo UI Productivity Tools extension for VS Code to scaffold a project from a template wizard.
-
Install the extension from the Visual Studio Marketplace
-
Open the VS Code Command Palette (
Ctrl/Command + Shift + P) and type "Kendo UI Template Wizard". -
Set the project name and path, choose Kendo UI for Angular as the project type and select a Theme (Default, Bootstrap, Material, Fluent, or Meridian).
-
Click Create Project, then install dependencies and run:
shnpm i && ng serve -o
The extension also provides code snippets (type kr- in your editor) and a scaffolding tool for generating complex components like Charts, Forms, and Schedulers.
Have an Existing Project?
If you want to add any Kendo UI for Angular component to an existing project, follow the steps below:
-
Add the required package and preferred Kendo theme:
shng add @progress/kendo-angular-dateinputs --theme=default -
Add the component to your template:
html<kendo-calendar></kendo-calendar>
Next Steps
We are sure that you are looking for more - browse the components section and discover the amazing features that Kendo UI for Angular brings to the table.
Happy coding!