CODEWITHSUNDEEP
angular
Roula Halabi
Roula Halabi

Reputation: 268

Passing data between unrelated components

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

Answers (1)

Bohdan Khodakivskyi
Bohdan Khodakivskyi

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

Related Questions