Bind data to parent

Question

I have angular 5 project with the following structure:

app.component.html

<app-header></app-header>
<app-list-view></app-list-view>
<app-footer></app-footer>

In my <app-header> component I have a <app-search></app-search> component:

<div id="headerContent">
    <div id="logo">
        <img src="../../../assets/images/logo.png"/>
    </div>

    <app-search></app-search>
</div>

In this search.component.html I have:

<div id="searchContent">
  <input [(ngModel)]="queryString" type="text" placeholder="Bijv. PHP developer, AngularJs"/>
  <button>Zoeken</button>
</div>

I would like to pass the data from the input field from the app-search component to the app-list-view component.

What would be the best way to do this?

score 2 · Accepted Answer · answered Nov 15 '17 at 14:42

2

The easiest way to achieve communication between components that are not nested (aka parent-child) it to use a service. A useful example is the on in Angular docs.

answered Nov 15 '17 at 14:42

tasos

369
1
9

Yea just found this plunkr: http://plnkr.co/edit/60ncOxHwiOy8biiUc9mt?p=preview worked pretty good :) – Peter Boomsma Nov 15 '17 at 14:46
Yeap, it is the same. Also take a look at this [answer](https://stackoverflow.com/a/36251635/1729287). – tasos Nov 15 '17 at 14:50
Oh yea that's better! – Peter Boomsma Nov 15 '17 at 14:52

Bind data to parent

1 Answers1