downgradedAngular2Component.ts

import {Component, Inject, AfterViewInit} from 'angular2/core';
import {upgradeAdapter} from 'upgrade_adapter';

const template = require('./template.html');

// Step 1: Upgrade any Angular 1.x components we depend on
const Dialog = upgradeAdapter.upgradeNg1Component('Dialog');

// Step 2: Import any Angular 2.x components we depend on
import {Calendar} from '../calendar';

// Step 3: Import any pipes we depend on
import {LocalDatePipe} from 'app/pipes';

// Step 4: Import services. Angular 1.x services should be extracted into
// classes and have their types exported.
//
// Do prefer refactoring Angular 1.x into Angular 2.x services and downgrading
// over upgrading as converting services is largely trivial.
//
// Upgrading may be useful to support dependencies on Core Angular 1.x services
import {Angular1Service} from 'app/core/services' 
import {CalendarService} from './calendar_services'

// Step 5: Declare component
@Component({
  selector: 'date-picker',
  template: template,
  inputs: ['startDate', 'endDate', 'title'], // Angular 2 does not convert to kebab-case for element attributes like Angular 1
  directives: [Calendar, Dialog],
  pipes: [LocalDatePipe],
  providers: CalendarService,
})
export class DatePicker implements AfterViewInit {
  public title: string;

  // Use @Inject for upgraded 1.x services but prefer for 2.x services
  constructor(
    private calendar: CalendarService,
    @Inject('angular1Service') private angular1Service: Angular1Service
  ) { }

  get startDate() { return this.calendar.startDate }
  set startDate(value) {
    if (value == null || value.length === 0) return
    this.calendar.startDate = value
  }

  get startDate() { return this.calendar.startDate }
  set startDate(value) {
    if (value == null || value.length === 0) return
    this.calendar.startDate = value
  }

  // Angular 2.x can call lifecycle event handlers like this one. Just
  // implement the event's interface e.g.) AfterViewInit
  ngAfterViewInit() { this.calendar.init() }
}

// Step 6: Downgrade component and add it to your Angular 1.x module
const component: any = upgradeAdapter.downgradeNg2Component(DatePicker)
angular.module('myComponents').component('date-picker', component)

downgradedAngular2Provider.ts

declare var moment;
import {Injectable} from 'angular2/core';
import {upgradeAdapter} from 'upgrade_adapter';

@Injectable()
export class CalendarService {
  _startDate;
  _endDate;

  constructor(startDate, endDate) {
    this.startDate = startDate
    this.endDate = endDate
  }

  get startDate() { return this._startDate }
  set startDate(value) {
    if (value == null) {
      this._startDate = moment()
    } else {
      this._startDate = moment(value)
    }
  }

  get endDate() { return this._endDate }
  set endDate(value) {
    if (value == null) {
      this._endDate = moment()
    } else {
      this._endDate = moment(value)
    }
  }

  private isValid(date) {
    var valid: boolean = date.isSameOrBefore(this.endDate) && date.isSameOrAfter(this.startDate)
    return valid
  }
}

upgradeAdapter.addProvider(CalendarService);
angular.module('services').factory('calendarService', upgradeAdapter.downgradeNg2Provider(CalendarService))

pipeFilterShim.ts

declare var numeral;

import {Pipe, PipeTransform, Inject} from 'angular2/core'
import { upgradeAdapter } from 'upgrade_adapter'
// If our filter depends on Angular 1.x services we upgrade them
upgradeAdapter.upgradeNg1Provider('locale')

@Pipe({ name: '_currency'})
export class LocalCurrencyPipe implements PipeTransform {
  constructor(@Inject('locale') public locale) {}

  transform(input: number, args:string[]): string {
    let locale = this.locale
    let precision = +(args[0] || 2)
    if (precision == null) precision = 2
    if (("" + input).length === 0 || isNaN(+input)) return "-"
    let currencyValue = numeral(input);
    if (precision > 0) var precisionFormat = "." + Array(precision + 1).join('0');
    if (input >= 0) {
      if (locale.isFrench()) {
        return currencyValue.format("0,0" + precisionFormat + " $")
      } else {
        return currencyValue.format("$0,0" + precisionFormat)
      }
    } else {
      if (locale.isFrench()) {
        return currencyValue.format("-0,0" + precisionFormat + " $")
      } else {
        return currencyValue.format("-$0,0" + precisionFormat)
      }
    }
  }
}

// For Angular 1 filter compatibility we create a singleton
var currencyFilter: LocalCurrencyPipe

angular.module('filters').filter('localCurrency', ['locale', function(locale) {
  currencyFilter = currencyFilter || new LocalCurrencyPipe(locale)
  return function(i, p) {
    return currencyFilter.transform(i, [p])
  }
}]);