The New Financial Portfolio Demo using Kendo UI for Angular

The New Financial Portfolio Demo using Kendo UI for Angular

In this series I am going to walk through the Angular components that make up this app and delve into the Kendo UI components that each one uses! We will go through the Angular Stock Chart Component, along with other chart components, inputs, buttons, and of course, our infamous Grid Component to build out a Financial Portfolio application, capable of keeping you up-to-date with the stocks of your choice!

Welcome to the Financial Blog post series, Part I! Here at Progress, we love attractive and alluring components. My team specifically loves attractive Angular components. Recently we built a demo Angular app that shows off a number of our gorgeous components working together to create this Financial Portfolio Demo App:

A gif walking through the different pages and features of the Financial Portfolio demo app using Kendo
UI components

In this series I am going to walk through the Angular components that make up this app and delve into theKendo UI components that each one uses! We will go through the Angular Stock Chart Component, along with other chart components, inputs, buttons, and of course, our infamous Grid Component to build out a Financial Portfolio application, capable of keeping you up-to-date with the stocks of your choice!

I’ve broken the application into five major Angular Components:

  1. Stock Chart
  2. Stock List
  3. User Profile
  4. Real Time Data
  5. Heatmap

To make the reading experience more bite-sized, in this first post, I will cover the Stock Chart and Stock List components (and the child components they employ)—check out part II for the rest to be covered!

screenshot of our Angular componentsFollowing Along

You can pull down the code and follow along—everything is available on GitHub and GitHub Pages!

  1. Clone the repo https://github.com/telerik/kendo-angular/tree/master/examples-standalone/finance-portfolio
  2. Go into the root of the application cd kendo-angular/examples-standalone/finance-portfolio/
  3. Run npm install and npm start
  4. Go to http://localhost:4200 in your web browser

As you can see in the opening GIF, the app shows you the stock information you are interested in with our Kendo UI Stock Chart component. This component comes ready out-of-the-box with features to choose date ranges and time ranges for the stocks you want to look at. You can also toggle the type of chart you are viewing—Candle, Line, or Area.

Our Financial Portfolio application also shows the stocks in a Stock List, a Heatmap, and Stocks moving in real time as well as a user profile page. This demo is fully loaded with so many features! Let’s dive into this incredible demo by component (Angular component, that is).

Stock Chart & Stock Details Angular Components

Stock Chart with Stock Details and the Stock List are all visible by default on the dashboard (landing page). I’ve given them titles and outlines here, so you can see where those Angular components visually are:

screenshot outlining the stock chart, details, and stock list component boundaries

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Our New Financial Portfolio Demo —Kendo UI for Angular

Recently we built a Financial Portfolio Demo Angular app that shows off a number of our gorgeous components working together. Learn how we put it together.

Top 5 Mobile App Design and UI/UX Companies in New York

With the growing use of software & technology, the designers’ role has evolved to create a better design layout that works perfectly to serve enhanced user experience. And it’s high...

What’s New in the Kendo UI Angular Components with R2 2020

The R2 2020 release of Kendo UI for Angular is here, bringing new components like the Stepper and the RTM release of the TreeList!

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Best UI/UX Design Services Agency New York

Without a doubt, mobile applications are dominating the world with their outstanding benefits. And to ensure the perfect outreach of the mobile application, the optimized UI/UX design plays a major...