Dreamforce Session: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

We hope you enjoyed Dreamforce last week! If you weren’t able to attend the session “Angular2 + Ng-Lightning + Lightning Design System = Great Apps” with Patricia Cifra & Gordon Bockus, Software Engineers at Spanning, we’ve got it here for you. See what Patricia & Gordon covered below.

Angular2 + Ng-Lightning + Lightning Design System = Great Apps

The blog will cover how to use the Ng-Lightning library to create and utilize Lightning designed Angular 2 components while going over the new features available in Angular 2. We’ll go over the basic principles behind Angular 2, the Lightning Design System, and features in TypeScript that you can leverage to create maintainable high-quality code. In addition, the talk will cover tools like Augury to debug your Angular 2 code and helpful plugins and IDEs for coding in TypeScript.


Lightning Design System

The Lightning Design System is a collection of design patterns, components, and guidelines for creating a unified UI for the salesforce ecosystem.The Lightning Design guideline allows developers to create user interfaces consistent with Salesforce Lightning principles, design language, and best practices. It covers fonts, colors, layouts, interactions, navigation and ui components.


Angular 2/Typescript

First things first.  Angular 2 is not in any way like Angular 1.  The first thing to understand is Angular is developed using Typescript.  Typescript is a free and open source language built and maintained by Microsoft.  It is an extension of javascript on steroids.  My personal take is you take the goodness of Javascript and add some of the powerful features of Java and you get Typescript.  Some of the characteristics that Typescripts bring to the table are:


    • Native types: boolean, int, double, etc
    • Custom Types, enum, generics
    • Inheritance
    • Es6 support


Using native and custom types allow for much stronger contracts in Angular 2. If a function is defined that only takes a parameter of type Dog, then you know you’ll never get a Cat without an error being thrown.  Note you can have an Animal type that both Dog and Cat extend if you’d have a function that needs either a Cat or a Dog ( or a Parrot even).  Typescript enables much better development tooling in that IDE’s are able to much more easily navigate how an Angular 2 application is wired together.  More on that later.  

Dependency Injection (DI) is one of the primary core features of Angular 1 that made it into Angular 2.  It looks totally different but accomplishes the same goal of allows components to specify module they require.  In Angular 2 the import keyword is used to specify dependencies.  See the code snippet below from the Angular Site on DI

Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Templates in Angular 2 are very similar to templates in Angular 1.  There are few some syntactic changes that make it more clear if a value is one-way data bound or two-way data bound.  There’s really too much information to cover here, but you should read over the template syntax guide.


Ng-Lightning Library

The Ng-Lightning library is a library that contains native Angular 2 components and directives written in TypeScript using the Lightning Design System CSS framework. It allows you to build stateless functional components that adhere to the Salesforce Lightning design principles and provides development flexibility and seamless integration with application requirements.



Augury is a chrome extension for debugging and profiling Angular 2 applications.  It extends the capability of the Chrome Developer tools to enable Angular 2 specific information.   It gives you the ability to understand how different Angular components are wired together through routing which can be very helpful as the application grows beyond a one or two views.
VS Code – Visual Studio Code is a free IDE provided by Microsoft.  That being the case it is very good for developing applications in Typescript.  It comes with all the usual goodies you’d expect like autocomplete and error detection.  There have also been many VS Code extensions built around Angular 2 that take a lot of the boiler plate coding out of the development cycle.