Angular passing variable between two directives with EventEmitter

Question

I want to pass variable between two directives in Angular 7

the edit code : https://stackblitz.com/edit/angular-ct49bn

The problem is when I select a customer in the list, the emitter cannot communicate with the other directive (customer_info.directive.ts)

the error is : Cannot read property 'myValueChange' of undefined The function "myValueChange" is well defined in customer_info.directive.ts

in app.module.ts the directives are declared (import + NgModule)

Answer 1

Please refer https://stackblitz.com/edit/angular-zgyubq?file=src/app/app.component.html

In component -

@ViewChild('custInfo', { static: false }) CustomerInfo: CustomerInfoDirective; 

In template -

<p>
  Choose a customer :
  <selectcustomer 
    (EventCustomerListdirective)="CustomerInfo.myValueChange($event)"> 
  </selectcustomer>
  <CustomerInfo #custInfo></CustomerInfo>
</p>

I think Angular way would be to get the instance of the directive with @ViewChild decorator in the component and use it in the template instead of adding it through dependency injection.

Answer 2

Hi your problem is it's not telling you the myValueChange is undefined, it's telling you 'myValueChange' of undefined which means the CustomerInfo object is undefined. you have only bad naming here... the CustomerInfo.myValueChange($event) shoud be CustomerInfoDirective.myValueChange($event)

because you gave it that name in constructor:

constructor(
  private CustomerListDirective: CustomerListDirective,
  private CustomerInfoDirective: CustomerInfoDirective 
){}

then it should work as you wish :)