Angular 2 Overview

Angular 1.x vs Angular 2

  • Configuration
  • Controllers/Components
  • Templates


  • Typescript
    • A language from Microsoft that compiles down to JS, allows you to use ES6-style classes, imports and exports
    • Not required in A2, but is the suggested workflow
  • Angular 2 Quickstart




  • ng- comments are not output!
  • Custom directives are output
  • Templates still include logic, but syntax is different

Templates - Syntax

  • ngFor, ngIf, and ngSwitch use the * prefix
  • *ngIf="!answerHidden"
  • * is 'a bit of “syntactic sugar” that makes it easier to read and write directives that modify HTML layout with the help of templates.'
  • No more ngShow/ngHide; only ngIf

Templates - Syntax

  • iterators/template variables use the # prefix
  • *ngFor="#card of flashcards"
  • (that's the equivalent of ng-repeat="card in flashcards")
  • Much more!