Skip to content

Instantly share code, notes, and snippets.

@chrisnicola
Last active June 7, 2016 20:59
Show Gist options
  • Save chrisnicola/ec0f45b2819f352c8100 to your computer and use it in GitHub Desktop.
Save chrisnicola/ec0f45b2819f352c8100 to your computer and use it in GitHub Desktop.
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)
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))
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])
}
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment