Angular 2: Getting Started


Deborah Kurata, Microsoft MVP and Angular JS expert

Welcome to this review of the Pluralsight course Angular 2: Getting Started by Deborah Kurata.

Deborah is an independent software designer/developer specializing in Web and .NET development using AngularJS, C#, and VB.NET. She has won the Microsoft Most Valuable Professional Award 13 times.

The course uses Visual Studio Code as the editor, but if you like using Visual Studio 2015, check out Deborah’s post Angular 2 Getting Started With Visual Studio 2015.

If you don’t have a Pluralsight subscription, you’ll find that the official Angular 2 documentation is very good and as long as you don’t rush, you should be able to follow it okay.

I actually think one of the best things about Angular 2 is that it has very clear and up to date official documentation, because a lot of open source software is very lacking on quality documentation.

Related Courses and resources

Update 19th October: Deborah has released an updated version of the course Angular 2 Getting Started with the same name and more than an hour of extra material. The review below is for the original version of the course.

John Papa has released a shorter Pluralsight course called Angular 2: First Look and I have reviewed this for you as well.

There is also a more in depth Angular 2 Fundamentals Pluralsight course coming out soon.

An alternative guide to Angular 2 Core Concepts that I found useful is from Victor Savkin.

Angular 2 supports browsers as old as Internet Explorer 9, but is mostly aimed at developers interested in programming using the latest technology. This is why, like React JS, we tend to see new technologies (such as Babel for Transpiling from the latest ES 2015 code to ES5) used alongside it.

Wherever you see the word foo in the examples, substitute it with any word you want to use. Where you see … it means I have skipped some code for brevity so that I can highlight the concept without the code clutter.


If you are interested in using web components without using Angular 2, check out Polymer and X-Tag


Modules are imported using the following TypeScript:

import { Component } from ‘angular2/core’;

Some common angular2 modules:


For full details on the module system see the architecture overview

The first step in creating an Angular 2 app is creating an index.html file and writing code to build a bare root app component.

Your first component

A component is comprised of a template, a class, and metadata. Here the selector is metadata and the template is the value between the back ticks:

selector: ‘my-app’
template: `

My 1st Component


This is just beginner example. The back ticks are a new ES 2015 feature for multi-line strings. Instead of hard-coding all of your template html in a string, you can specify an html file to the templateUrl property.

A real word app will also contain some directives. This example contains the code for a component within the main app component:


import { Component } from ‘angular2/core’;
import {FooComponent} from ‘foo.component’;
selector: ‘my-app’
template: `

My 1st Component

directives: [FooComponent]
export class AppComponent { }


selector: ‘foo’
template: `foo.html`
export class FooComponent { }


<body><foo>Loading Foo App…</foo></body>

Angular uses the handlebars style double curly brackets for defining template expressions:


export class FooComponent {
foo: string = ‘Your value’;

This is formally known as interpolation

Built-in Directives

There some built-in directives that allow you to add logic into your html. You can probably already guess what these structural directives do. If you have used ASP.NET MVC or Rails before, it should look familiar already:

<table *ngIf=’foo.length’>
<tr *ngFor=’#foo of foos’>

The # means foo is a local variable (only used in the template).

Property and Event Binding
As an alternative to template expressions (interpolation), you can do Property Binding like this:
<img [src]=’foo.imageUrl’>

There’s also Event Binding like this:
<button (click)=’toggleImage()’>

This calls the specified method in the component:

export class FooComponent {
toggleImage(): void {
this.showImage = !this.showImage;

Deborah’s sample application demonstrates the show/hide effect

Two-way Binding

This allows other elements on screen to immediately update as the user changes a value. For example as a user enters a value into a textbox, it displays the same value elsewhere on the screen. This can be achieved using the ngModel directive:

<input [(ngModel)]=’listFilter’/>

So that is 4 ways to achieve data binding: Interpolation, Property Binding, Event Binding and Two-way Binding


Anyone who has done command line programming, such as Power Shell, will know that pipes are for transforming data. Some built-in ones are:

  • date
  • decimal
  • lowercase
  • number
  • percent
  • currency
  • json
  • slice
  • uppercase

It also probably won’t surprise you that you implement this using the pipe character. This converts foo.Name to lower case:

{{ foo.Name | lowercase }}

If there isn’t a built in pipe available, you can create your own custom pipes. Here’s an example:

import { FooPipe } from ‘./foo.pipe’


pipes: [FooPipe]


import { PipeTransform, Pipe } from ‘angular2/core’;

@Pipe: ({
name: ‘foo’

export class FooPipe implements PipeTransform {
transform(…) { … }



… | foo

Component Styles

Within the component definition you can define inline styles or styleUrls. Defining inline styles is a terrible idea. Here’s an example of setting a styleUrl:

selector: ‘foo’,
templateUrl: ‘foo.html’,
styleUrls: [‘foo.css’]

Lifecycle Hooks

This is the first thing that I found to be a little less than intuitive. You just have to learn the syntax for this. These are some interfaces used for TypeScript that you won’t need if you are using plain JavaScript:

OnInit does the component initialization. It executes custom initialization logic after your directive’s data-bound properties have been initialized.

OnChanges performs an action after the change to the input properties

OnDestroy does the component cleanup

You need to remember to use ngOnInit and ngOnDestroy inside your class definition.

Here’s a live example on plunker, click on app.ts to see the use of OnInit and OnDestroy

Also see OnInit interface docs

Nested Components

In Deborah’s course, she shows how to code product rating glyphicon stars including parts of a star icon. I hadn’t seen this before, and found this useful.


While working through this example, we see 5 stars instead of 4, due to an ngOnChanges event not occuring.

ngOnChanges only fires on changes to input properties.

Input properties are for sending information from the container component to the nested component.

Output properties are for sending information from the nested component back to the container component.


import { … EventEmitter } from ‘angular2/core’;


export class StarComponent {
@Input() rating: number;
starWidth: number;
@Output() notify: EventEmitter<string> = new EventEmitter<string>();

ngOnChanges(): void { this.starWidth …}


<ai-star [rating]=’product.starRating’ (notify)=’onNotify($event)’></ai-star>

Course Verdict

I found this course to be an easy way to learn Angular 2 from scratch. To see how it rates against John Papa’s course, see Angular 2: First Look.

Further Reading / Resources

ngConf 2016 – It’s Just a Textbox, What Could Go Wrong?: Angular 2 Forms and Validation – Deborah Kurata


Command Line Interface tool

Deborah’s Angular2 Getting Started sample application

The Core Concepts of Angular 2

3 thoughts on “Angular 2: Getting Started

  1. Pingback: Angular 2: First Look | Zombie Code Kill

  2. Pingback: Choosing a JavaScript Framework | Zombie Code Kill

  3. Pingback: Getting Started with Polymer.js | Zombie Code Kill

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s