DEV Community

Prayatna Bhattarai
Prayatna Bhattarai

Posted on • Updated on

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>();
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
dorian_naa profile image
Dorian N.

Thanks for sharing ! 🎉