DEV Community

loading...

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

prayatna profile image Prayatna Bhattarai ・1 min read

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.

Discussion

pic
Editor guide