Transfer the value of input (search bar) between non-child components Angular 2

Question

I want to create a list of users with input filter. My app.component.html like this:

<header>
  <app-header></app-header>
</header>

<div class="col-md-3">
  <app-left-menu></app-left-menu>
</div>
<div class="col-md-8">
  <router-outlet></router-outlet>
</div>

Header is like

<div class="col-md-4">
    <input type="text" [(ngModel)]="headerFilter">
  </div>

How can I use a headerFilter in my userList componenet?

I know about @Pipe and i try:

Pipe

   export class BuildPipe implements PipeTransform {

  transform (values: any[], field: string, value: string): any[] {
    if (!values || !values.length) {
      return [];
    }
    if (!value) {
      return values;
      }
    return values.filter(it => it[field].indexOf(value) >= 0 );
  }
}

and UserList.componenet:

<div class="item" *ngFor="let user of users | build: 'firstname': filter">

but how should i transfer value from header input to userList?

you could use an injectable service, to move and store the value? — mast3rd3mon, Jan 09 '18 at 09:58
You can use `@Input` see this link https://stackoverflow.com/questions/34088209/how-to-pass-object-from-one-component-to-another-in-angular-2?noredirect=1&lq=1 — hrdkisback, Jan 09 '18 at 10:37
Possible duplicate of [How to pass object from one component to another in Angular 2?](https://stackoverflow.com/questions/34088209/how-to-pass-object-from-one-component-to-another-in-angular-2) — Peter, Jan 09 '18 at 11:01
have a look here: https://stackoverflow.com/questions/46047854/how-to-update-a-component-without-refreshing-full-page-in-angular/46049546#46049546 — FAISAL, Jan 09 '18 at 11:33

score 1 · Answer 1 · edited Jan 09 '18 at 11:33

You can use @Input decorator if there is parent child relationship between components. Else make use of Services or BehaviourSubject. These are the following approaches based on priority:

Using Services(Most Recommended) [ example ].
Using Behavior Subjects from RxJS library.
Use Redux for state management.
Using browser storage(session/local) but least recommended as prone to data security.

score 0 · Accepted Answer · answered Jan 09 '18 at 12:29

Thanks for all answers!

finally i use service

   import { Injectable } from '@angular/core';

@Injectable()
export class FilterService {
  headerFilter: string;

  constructor() { }

  public getFilter(): string {
    return this.headerFilter;
  }

  public setFilter(filter): void {
    this.headerFilter = filter;
  }
}

and search-box component in header

    <div>
  <input #input type="text" (input)="update(input.value)">
</div>

searchbox.ts

   update (value) {
    this.filter.setFilter(value);
  }

and list like

 <div class="item" *ngFor="let user of users | build: 'firstname': filterServ.getFilter()">

where build is name of pipe

Transfer the value of input (search bar) between non-child components Angular 2

2 Answers2