Showing the same code for the same tasks, side-by-side in Aurelia and Angular 2.0.

Angular 2.0 app.js import { Component , Template } from 'angular2/angular2' ; @ Component ( { selector : 'my-app' } ) @ Template ( { url : 'app.html' } ) class MyApp { constructor ( ) { this . firstName = 'John' ; this . lastName = 'Doe' ; this . updateFullname ( ) ; } updateFullname ( ) { this . fullName = this . firstName + " " + this . lastName ; } firstNameChanged ( $event , first ) { this . firstName = first . value ; this . updateFullname ( ) ; } lastNameChanged ( $event , last ) { this . lastName = last . value ; this . updateFullname ( ) ; } } Aurelia app.js export class MyApp { constructor ( ) { this . firstName = 'John' ; this . lastName = 'Doe' ; } get fullName ( ) { return ` ${ this . firstName } ${ this . lastName } ` ; } }

Note: Additional code is needed for Angular 2.0 if ES6/ES5/CoffeeScript is used rather than AtScript since annotations must be "manually transpiled" by the developer.

app.html First Name : < input type = "text" [ value ] = "firstName" # first ( change ) = "firstNameChanged($event, first)" ( input ) = "firstNameChanged($event, first)" > Last Name : < input type = "text" [ value ] = "lastName" # last ( change ) = "lastNameChanged($event, last)" ( input ) = "lastNameChanged($event, last)" > Full Name : { { fullName } } app.html < template > First Name : < input type = "text" value . bind = "firstName" > Last Name : < input type = "text" value . bind = "lastName" > Full Name : $ { fullName } < / template >

Note: Both the change and input events are needed in the Angular 2.0 example in order to have correct functionality across all input scenarios and browsers.

To see Angular 2.0's alternative binding mechanism, Forms Model, compared to Aurelia, see Part 2 of this comparison.