Ignite UI for Angular Example



I wanted to take the Angular plunge, dig deep and see what is actually required to write a maintainable, loosely coupled, and well architected line-of-business application. I spent two weeks learning Angular, watching online courses, reading the documentation, and writing the application.

Application Run-Time Packages

  • Angular 5
  • Infragistics Ignite UI for Angular
  • Angular Material
  • Material Icons
  • Font Awesome
  • Moment

Angular Application Modules

The application has four modules: Application, Shared, People, and Sales.

The Application module is the root module of the application, all Angular applications have one of these. This module provides application-level navigation and routing.

The Shared module has code that is shared across multiple modules, providing a central location to bring in all of the application’s dependencies.

The Sales module is just a shell and an image of a Dashboard; it is there to demonstrate navigating between modules.

The People module is the bulk of the application that allows for selecting, viewing, editing, and adding people. The People Shell, provides module structure, module routing, loosely coupled components, navigation guards, and custom date validator.

I’m using the Angular In-Memory Web API as my development backend which makes spinning up an application without a real backend very easy.

Application Features

Ignite UI for Angular

Over the last two weeks, Ignite UI has grown on me and now I’m all in with it. This rich cross-browser component library saved me time, simplified my development, and provided outstanding results. Infragistics has invested heavily in this product and it shows. Yes, I work for Infragistics, but I wouldn’t blog about something that I’m not sold on.

The amount of time I saved by leveraging the Ignite UI library is immeasurable. Using this library allow me to focus on the application, design, interactions, etc. and not how to implement a cross-browser Navigation Drawer, Avatar, Badge, Navigation Bar, Slider, Toast, Buttons, etc.

Ignite UI also delivers a consistent look and feel across the entire component library, greatly simplifying application development and maintenance. Additionally, it provides for customized application themes.

Components Used

  • igx-nav-drawer – slides into view when the hamburger menu is clicked
  • igx-navbar – application navigation bar, contextual title and action buttons
  • igx-avatar – renders an image or icon as an avatar
  • igx-badge – renders a badge; typically associated with an avatar, card, etc.
  • igx-icon – renders icons
  • igx-slider – provides for selecting for one or more values
  • igx-checkbox – renders a checkbox
  • igx-toast – customizable rendering of toast messages
  • igx-dialog – customizable dialog component
  • igx-list, igx-list-item – component for easily rendering a list of items

Directives Used

  • igxRipple – provides animations when associated element is clicked
  • igxButton – turns its associated element into a button
  • igxInput – adds behavior to an input element
  • igxLabel – adds rendering to a single-line text element


Three Videos

  • Angular 5 People Application – Introduction
  • Angular 5 People Application – Thoughts on Architecture
  • Angular 5 People Application – Ignite UI for Angular

Recommended Angular Learning Path

I have a deep background and a lot of real-world experience in web development; beginning with classic ASP, ASP.NET, jQuery and roll your own SPA, AngularJS, Nodejs apps, and now Angular.  My deep web background and real-world product development experience greatly shortened the learning curve for Angular.

Do not underestimate the time it takes to learn and be productive writing Angular applications. The concept count is very high because you are not only learning Angular but also HTML5, CSS, TypeScript, cross-browser programming, possibly a new editor, toolchain required to write an Angular application, and more. Give yourself enough time and training to grasp the high number of concepts necessary to be successful.  Most important, have fun along the way, your hard work will pay off in spades.

Recommended Courses

I have completed these courses and recommend them to a quicker path to success.  Please consider, these are the resources I’ve viewed.  There are many other outstanding resources, books, videos, and blog posts available to developers.

Massive thank you to Deborah Kurata and Asim Hussain for these courses and sample applications.

Angular Getting Started
Angular Component Communication
Angular Reactive Forms
Angular 5 (covers everything, free as well)
Angular Reactive Forms at AngularUP 2017

Recommended Docs

Nothing like reading the documentation will save you time in the long run.

Angular CLI
Visual Studio Code
In Memory Web API
Ignite UI Docs
Ignite UI Demos
Ignite UI Theming
Ignite UI CLI
Ignite UI Getting Start Blog Post
Ignite UI Roadmap – Lot’s of goodness coming soon!

Angular Community Experts on Twitter

Deborah Kurata
Dan Wahlin
John Papa
Justin Schwartzenberger
Asim Hussain
Konstantin Dinev (Infragistics Ignite UI Team Lead)
K. Scott Allen
Nir Kaufman


Client web development has come a long way since classic ASP.  I like the Angular framework and the community of developers, tools, and 3rd party offerings such as Infragistics Ignite UI for Angular. I can be productive and write maintainable code for my customers.

Have a great day,

Just a grain of sand on the world’s beaches.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s