Angular 2: Pass a variable from one component to another

Question

I am learning Angular 2. Trying to pass a variable from one component to another. First my landing page contains list of items. Like this

JSON

items = [{
        "id": "1",
        "name": "Item1",
        "price": 100,
        "type": 101,
        "status": 0
    }, {
        "id": "2",
        "name": "Item2",
        "price": 100,
        "type": 102,
        "status": 1
    }]

First Component

@Component({
    selector: 'items-cmp',
    templateUrl: 'items.component.html'
})

export class ItemsComponent {
  constructor(private itemsDetails: ItemDetails, private router: Router){}
  getItemsList() {
    this.itemsDetails.listOfItems()
      .subscribe((resp: any) => {
        this.items = resp;
      });
  }
  this.getItemsList();

  routeTo(itemId: string) {
    this.router.navigate(['/dashboard', 'items', itemId, 'general']);
  }
}

items.component.html

<table>
    <thead>
        <th class="avatar-th"></th>
        <th>ItemName</th>
        <th>Price</th>
        <th>Type</th>
    </thead>
    <tbody>
        <tr *ngFor="let item of items" (click)="routeTo(item.id)">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.type}}</td>
        </tr>
    </tbody>
</table>

Here, the list of items will be shown. When I click on any item it will redirects to second page. This second page contains three icons. Here two icons are default but third icon should display only if Item status = 1

Second Component

@Component({
    selector: 'item-cmp',
    templateUrl: 'item.component.html'
})

export class ItemComponent { }

item.component.html

<div class="icons">
    <ul class="cicons">
        <li title="first" (click)="routeTo('first')"><i class="fa fa-male fa-lg"></i></li>
        <li title="second" (click)="routeTo('second')"><i class="fa fa-file-text fa-lg"></i></li>
        <li title="third" (click)="routeTo('third')"><i class="fa fa-female fa-lg"></i></li>
    </ul>
</div>

Here, the issue is how to pass the status of the item to next component?

Edit

I tried this

shared service

private _stream$ = new BehaviorSubject("");
    public stream$ = this._stream$.asObservable();

    send(msg: any) {
        this._stream$.next(msg);
    }

firstComponent:

hideIcon: boolean = false;
showIcon(show: any) {
    if (show)
      this.hideIcon = true;
    else
      this.hideIcon = false;
    this._evt.send(this.hideIcon);
  }

Second Component

_hideIcon: boolean = false;
ngOnInit() {
    this.getItem();

    this._evt.stream$.subscribe(this.receiveMessage.bind(this));
}

receiveMessage(msg: any) {
    this._hideIcon = msg;
    console.log("this._hideANCVisit :",this._hideANCVisit);
}

If status=1 it is showing up icon. At the same time when I refresh that page icon is disappearing.