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.
Top comments (1)
Thanks for sharing ! 🎉