TIL: How to pass data to parent component on a hybrid Angular project

Unlike my previous post where we passed data to a child component, we will pass data from a child component to an AngularJS (parent) component.

As with an Angular component, I use an event emitter to emit as @Output like

@Output() 
totalCountEvent = new EventEmitter<number>();

So, I'm trying to get the total count to the parent component (AngularJS component) subject and we place the listing component to the subject.component.html as

<div>
 ...
  <subject-listing 
   (total-count-event)= 
        "updateTotalEarnablePoints($event)">
  </subject-listing>
</div>

This is the same way we do it on any of the Angular components, but the only difference is (total-count-event). We have to use kebab-casing.

And on our angularjs module, we downgrade the subject-listing.component.ts as

.directive("subjectListing", downgradeComponent({ component: SubjectListingComponent, outputs: ['totalCountEvent'] } as any));

With that, you can easily use the totalCountEvent on the AngularJS subject.component.html component.

Comments

[Dorian N.]

Thanks for sharing ! 🎉