I have been working on a project that is in the process of transitioning from AngularJS to Angular. We are using the hybrid approach of having both versions on the same project and slowly migrating components to the new Angular version.
The Problem
Parent component is an AngularJS component - messageListingComponent
and the child component is an Angular component - postMessageComponent
. I need to pass an id
from the parent to the child component.
AngularJS way of using the binding to pass the data
message-listing-component.html
<post-message post-id="$ctrl.id"></post-activity>
The postMessageComponent
is an AngularJS component
Solution
With few google searchs and going through stackoverflow I found a way to do this:
Angular way of using the binding to pass the data
message-listing-component.html
<post-message [post-id]="$ctrl.id"></post-activity>
The postMessageComponent
is an Angular component. Notice the []
? Even on an Angular template, we use the []
to wrap the input.
My postMessageComponent looks like this:
post-message.component.html
@Component({
selector: 'post-message',
templateUrl: './post-message.component.html'
})
export class PostMessageComponent implements OnInit, OnDestroy {
@Input() postId: number;
// Rest of the code
}
It takes postId
as input which is why we have [post-id]
on the template.
As this is a hybrid project, in order for AngularJS to understand the postMessageComponent
we need to downgrade our component. I don't want to go into details about downgrading the component but you have to add this line for your AngularJS app module
.directive("postMessage", downgradeComponent({ component: PostMessageComponent, inputs: ['postId'] } ))
The key here is to define the inputs that are used on the PostMessageComponent
. If the component has Outputs()
then that goes in there too.
And that's it. Hope that helps.
Top comments (0)