Angular 2 Downgrade Component with Output Parameter to Angular 1

Question

I successfully managed to downgrade Angular 7 component to Angular 1, but I faced a little problem which I have tried to solve many ways.

My downgraded component has output parameter as follows:

@Output()isValid = new EventEmitter<boolean>();

and it is triggered as follows:

this.isValid.emit(false);

In my Angular 1 component, I used it after downgrading it as follows:

• in template:

<downgrade-employee-selector (is-valid)="{{vm.validateEmployeeSelector($event)}}"> </downgrade-employee-selector>

• in ts:

self.validateEmployeeSelector = ($event) => {console.log($event);}

It is working fine but in the Angular 1 function $event value is always undefined and I can not understand how it is working.

Veronaveronese

Answer 1

I found a solution for my problem as follows:

• define my components inputs and ouputs:

directive('downgradeEmployeeSelector', downgradeComponent({
        component: EmployeeSelectorComponent,    
        inputs: ['selectedEmployeesIds', 'multiSelect', 'required'],
        outputs: ['isValid', 'selectedEmployeesIdsChange']
      })

• call outputs and inputs in Angular 1 html page:

<downgrade-employee-selector name="empSelector" [selected-employees-ids]="vm.selectedEmployeeIds" [required]="true" (is-valid)="vm.validateEmployeeSelector($event)"></downgrade-employee-selector>

Veronaveronese

Answer 2

Actually the problem with your original implementation comes with the syntax on your AngularJS html.
I believe adding the specification of inputs and outputs in the downgradeComponent method (as per your own solution) does not change things.
However, if you properly specify your output's name in AngularJS standard (hyphenated instead of camel case), and you bind your controller's method without interpolation, it works like a charm.

Solution:

In Angular component:
@Output() isValid = new EventEmitter<boolean>();

In AngularJS template:
<downgrade-employee-selector ... (is-valid)="vm.validateEmployeeSelector($event)"></downgrade-employee-selector>

When downgrading:
directive('downgradeEmployeeSelector', downgradeComponent({ component: EmployeeSelectorComponent })

Calculous

Answer 3

Had the same problem. There is an extra thing to notice: If your method has the name, for example: "onChange", it won't work.

So just replace it and use the same pattern described above.

 <component
 (on-change-abc)="callMethod()" />

Spheno