Two way data bining between components

Question

I have 2 components: MenuComponent and HeaderComponent. In my HeaderComponent I have a select and when customer choose an option I need to show/hide a div element in MenuComponent.

Is there an example that can help me?

Here is my code:

header.component.html

 <div class="select-style">
        <select>
          <option value="" disabled selected> Role </option>
          <option value="admin">Administrator</option>
          <option value="user">Employee</option>
        </select>
  </div>

header.component.ts

import { Component, OnInit,  EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'ca-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Did you try and find other posts, there are plenty of questions here on SO regarding this. Here are two: https://stackoverflow.com/questions/35884451/angular-2-sibling-component-communication and https://stackoverflow.com/questions/31026886/how-do-i-share-data-between-components-in-angular-2 — AT82, Feb 12 '18 at 08:36
I think its easier to create service and use it to share state across these component. — bhanu, Feb 12 '18 at 08:37

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

There are multiple ways you can resolve this, first one and maybe the best is creating a shared service that will be injected into your root module which is probably app.module.ts and then inject it inside of your components. Second solution is if your menu component contains header component inside then you can achieve the same thing with @Output decorator inside of your header component. Since you didn't provide enough code for me to show you a working solution, I will show you both examples and explain what we did there:

Shared service approach (Best approach if your header component is not inside menu component)

app.module.ts

...
import { MySharedService } from 'XXXXXXXX';
import { MenuComponent } from 'XXXXXXXX';
import { HeaderComponent} from 'XXXXXXXX';
...
@NgModule({
     ...
     declarations: [
         MenuComponent,
         HeaderComponent,
     ],
     ...
     providers: [
         ...
         MySharedService,
     ]
})

my_shared_service.service.ts

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

/**
 * App service with shared data on global scope of the app
 */
@Injectable()
export class MySharedService {
   /**
    * Currently selected item
    * from header component
    */
    private itemSelected: any = null;

    constructor() {}

    /**
    * Setter for selected item
    */
    public setItem(item: any): void {
        this.itemSelected = item;
    }
}

And finally this is how your components can use the MySharedService:

header.component.ts

import { MySharedService } from 'XXXXXXX';
...
export class HeaderComponent implements OnInit {
     ...
     constructor(private _mySharedService: MySharedService) { }

     itemSelected(e: any) {
         this._mySharedService.setItem(e.target.value);
     }
     ...
}

header.component.html

<div class="select-style">
    <select name="roles" (change)="itemSelected($event)">
      <option value="" disabled selected> Role </option>
      <option value="admin">Administrator</option>
      <option value="user">Employee</option>
    </select>
</div>

menu.component.ts

import { MySharedService } from 'XXXXXXX';
...
export class MenuComponent implements OnInit {
     ...
     constructor(private _mySharedService: MySharedService) { }
     ...
}

menu.component.html

<div *ngIf="_mySharedService.item">
    Header component has a selected item, show this content.
</div>

In case your menu component contains header component inside of it, then you can do Output the value each time it changes the value and your MenuComponent can listen for these changes and do certain tasks depending on the received result:

@Output approach (if menu component contains header component)

header.component.ts

import { ..., EventEmitter, Output } from '@angular/core';
...
export class HeaderComponent implements OnInit {
     ...
     @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
     ...
     itemSelected(e: any) {
         this.onChange.emit(e.target.value);
     }
     ...
}

header.component.html

<div class="select-style">
    <select name="roles" (change)="itemSelected($event)">
      <option value="" disabled selected> Role </option>
      <option value="admin">Administrator</option>
      <option value="user">Employee</option>
    </select>
</div>

menu.component.html

...
<ca-header (onChange)="itemChanged($event)"></ca-header>
...
<div *ngIf="_item">
    Header component has a selected item, show this content.
</div>

menu.component.ts

...
export class MenuComponent implements OnInit {
     ...
     private _item: any;
     ...
     itemChanged(value: any) {
         this._item = value;
     }
     ...
}

Two way data bining between components

1 Answers1