Use angularjs expression bindings with downgraded angular

Question

Say i have a checkbox directive i'm rewriting to angular from angularjs

checkbox.directive.js (angularjs)

template: `<some html> ...`,
scope: { checked: '=', onChecked: '&' }

checkbox.component.ts (angular)

@Component({
  selector: 'checkbox',
  templateUrl: '<some html> ...',
  ...
})
export class CheckboxComponent implements OnInit {
  @Input() checked: boolean;
  @Output() checkedChange = new EventEmitter<boolean>();
  @Output() onCheckedChange = new EventEmitter<boolean>();
  ...

How can i bind to the expression binding (&) from not yet upgraded components?

not-yet-upgraded.directive.js (angularjs)

template: '<checkbox (onChecked)="foo()"> ...',
controller: function($scope) { 
   $scope.foo = function() { console.log("change happened"); }   
}

score 2 · Answer 1 · answered Jul 07 '17 at 13:18

As it turns out, I had two mistakes

Outputs of events doesn't need the Change-suffix unless it's a two-way binding
The angularjs consumer uses kebab-casing

so:

1. angular component @Output() onChecked~~Change~~ = new EventEmitter();

2. angularjs dom <checkbox (on-checked)="foo()"> ...

Use angularjs expression bindings with downgraded angular

1 Answers1