Angular Video Tutorial: Getting Started with Kendo UI and Angular

In this engaging video series, you’ll get a hands-on demo of the Kendo UI components for Angular. In what is probably the best video course for getting started with these Angular components, you will learn how to create a basic Angular app using the Angular CLI, add components, and style the app to match your requirements. Presented by Alyssa Nicoll, one of our expert developer advocates, this series is both informative and enjoyable.

Kendo UI for Angular Getting Started

1: Get Started with Angular & Kendo UI

To really understand just how easy it is to get started with Angular and Kendo UI, we’ll begin building out a project by first using the Angular CLI. In this first episode, we’ll install the CLI, generate our Angular app, iInstall Kendo UI Buttons and include them in our app!

2: All You Could Ever Want to Know About THE BUTTON

We were able to get our Angular app generated, include Kendo UI in the app and get our first button working. There are so many MANY more options when it comes to buttons in Kendo UI, however. This video will show the blackbelt ways of the button.

3: Theming with Style: How to Customize Your Kendo UI Angular App

Our buttons are looking pretty good as is. But what if we wanted to customize them? Where would we even get started? Find out the answers to these questions, along with other input related questions in this third episode of the Angular and Kendo UI video course.

4: A Snazzy To-Do App Using Kendo UI: Adding a Textbox Input Component

What is a button without a form? What is a to-do list without to-do items? We will answer these philosophical questions, along with other form related questions in this episode of the Angular and Kendo UI video tutorial.

We start with a to-do app using our marvelous Kendo UI Buttons as individual to-do items. We then add in the Kendo UI Textbox input and get our to-do app fully functioning!

5: Adding Custom Angular Animations to Our To-Do App

Our to-do app is functional with the ability to add and remove to-do items to the to-do list. We are using Kendo UI buttons and a textbox input to make this UI happen & it’s looking pretty good with our custom styles easily modifying the Kendo UI components. The only thing that is missing in the UX is motion! Some animations would really snazzify our app while providing useful feedback as well as a spatial mental model to our users. Let’s get started!

6: Finishing Our To-Do App with Kendo UI Timepicker

Our to-do app is looking great using Kendo UI components & custom Angular animations. However, each to-do item could benefit by having a time assigned. We easily accomplish this by adding the Kendo UI Timepicker!

7: Charting Our Busiest Time of Day with Kendo UI Charts!

The final touch to our to-do app is to add a Kendo UI Chart showing us our busiest time of day. We will use our to-do data, make a custom pipe that will return just the number from the to-do due time, and then chart the hours in our day to see when the busiest time is.

8: Visualizing and Manipulating Data with the Kendo UI Grid

The Kendo UI data grid includes over 100 customizable features. Watch this video to learn how easy it is to implement some popular features including resizing, filtering, data binding, grouping, sorting, and paging.

About the presenter:


Alyssa Nicoll
Progress Developer Relations

Alyssa is an Angular Developer Advocate & GDE. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 20 conferences internationally, specializing in motivational soft talks, enjoys gaming and scuba diving, and has a toothless dog named Gummy. Her DM is always open.

Kendo UI for Angular Getting Started

What’s Next?

Now that you’ve learned a bit about using Kendo UI Angular components in a real application, give it a try for yourself! Download your free 30-day Kendo UI trial that includes the code, documentation and even support during your trial period. See how easy it is to meet your deadlines while improving your app’s user experience with the power of Kendo UI components.

Get a Free 30-Day Trial