Reputation: 268
I have three components (news-feed, comment, reply) in my news-feed.component
I,m doing this:
<div *ngFor="let item of data" id="{{item.post_id}}" class="post_{{item.post_id}}">
//news feed data is fine here but without comments and replys
</div>
I'm looking for this idea:
<div *ngFor="let item of data" id="{{item.post_id}}" class="post_{{item.post_id}}">
<app-comment>
<app-reply></app-reply>
</app-comment>
<div>
How can I pass the {{item.post_id}}
to other components.
Note: comment and reply components are not child of news-feed.
Upvotes: 1
Views: 344
Reputation: 632
What you're looking for is @Input decorator. in your child components use it like this:
// app-comment.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component(...)
export class AppCommentComponent implements OnInit {
@Input('someKey') someKey: any;
constructor() {}
ngOnInit() {
console.log(this.someKey);
}
}
And you'll be able to pass data to it like so:
<app-comment [someKey]="'someValue'"></app-comment>
Upvotes: 2