Pass function from angular1 to downgraded angular2 component

Question

Problem:

I am unable to get a function to pass successfully to a downgraded Angular 2 component. I've tried just about every way I can think to pass things in but I am only able to get strings passed in via string interpolation -> some-attribute={{controller.property}}. Here are some of the things I've tried (yes, I know some of them don't make sense...)

some-function="controller.function";
some-function="{{controller.function}}";  //<-- works for data, not functions
[some-function]="{{controller.function}}";
[someFunction]="controller.function";
[(someFunction)]="controller.function";

Setup:

Here is my existing setup which is working for data but not for functions:

Angular 1 usage

<my-component data-input-name="{{controller.name}}"></my-component>

Upgrade/Downgrade adapter

angular.module('myModule').directive('myComponent',
    downgradeComponent({
      component: MyComponent, 
      inputs: ['inputName']
    }) as angular.IDirectiveFactory);

Angular 2 definition

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {

  @Input() inputName: any;

  constructor() {}
}

The Angular docs even show how to set it up but they don't give any examples of actual usage. Am I missing something or can this just not be done?

Eskei · Accepted Answer · 2017-06-20 11:45:43Z

3

Use AngularJS kebab case like this, seems to work for me:

<my-component [data-input-name]="controller.name">
</my-component>

answered Jun 20, 2017 at 11:45

Eskei

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass function from angular1 to downgraded angular2 component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related