angular 2 share data between components

Question

I am using Angular 2 rc1. I have a component that shows a post and a component with slider-template. How do I pass data from the post component to the slider component

PortfolioDetail.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Router, RouteSegment } from '@angular/router';

import { PortfolioService } from './portfolio.service';
import { Helper } from '../../Services/helper.service';
import { SliderComponent } from './SliderComponent';

@Component({
  'selector': 'portfolio',
  'templateUrl': '/api/templates/PostComponent.portfoliodetail',
  'providers': [PortfolioService, Helper],
  'directives': [ROUTER_DIRECTIVES, SliderComponent],
  'encapsulation': ViewEncapsulation.None,
  'styleUrls': ['assets/css/post.css']
})

export class PortfolioDetailComponent implements OnInit {
  public post;
  public categories;
  public active = 0;

  constructor(
    private _portfolioService: PortfolioService,
    private _http: Http,
    private _router: Router,
    private _segment: RouteSegment,
    public helper: Helper
  ) {
  }

  ngOnInit() {

    let slug = this._segment.getParam('slug');

    this._portfolioService.getPost(slug)
      .subscribe(data => this.post = data);

    this._portfolioService.getCategories()
      .subscribe(data => this.categories = data);
  }

  setActive(i) {
    this.active = i;
  }
}

Slider Component

import { Component, ViewEncapsulation } from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { withType } from '../../Services/withType.pipe';

import { PortfolioService } from './portfolio.service';

@Component({
    'selector': 'slider',
    'templateUrl': '/api/templates/PostComponent.slider',
    'pipes': [ withType ]
})

export class SliderComponent {
  constructor() {
    // How do I obtain "this.post" from PortfolioDetail Component
  }
}

portfolio detail template

<div class="container">
  <article class="post-content" itemscope itemtype="http://schema.org/Article">
    <header class="page-head">
      <h1 itemprop="headline">@{{ post?.title }}</h1>
      <h5 class="published" *ngIf="post != null"><i class="glyphicon glyphicon-time"></i> @{{ helper.dateObject(post?.published_at) | date }}</h5>

      <ul>
        <li *ngFor="let categorie of post?.categories">
          <a [routerLink]="['/blog/categorie/', categorie.slug]">@{{ categorie.name }}</a>
        </li>
      </ul>
    </header>

    <div class="body" itemprop="articleBody">
      <div class="row">
        <div class="col-xs-12 col-md-6" *ngIf="post != null">

          <slider></slider> <!-- the slider selector -->

        </div>

        <div class="body col-xs-12 col-md-6 sticky-content" [innerHTML]="post?.content">
        </div>
      </div>
    </div>
  </article>
</div>

slider template

<div class="gallery" *ngIf="(post.images | withType:'gallery').length > 0">
  <ul class="gallery-items clearfix">
    <li *ngFor="let image of (post.images | withType:'gallery'); let current = index" [ngClass]="{active:(current == active)}">
      <img alt="@{{ image.alt }}" src="media/640/@{{ image.file }}" width="640" />
    </li>
  </ul>

  <ol class="gallery-nav" *ngIf="(post.images | withType:'gallery').length > 1">
`     <li *ngFor="let image of (post.images | withType:'gallery'); let i = index" [ngClass]="{active:(i == active)}" (click)="setActive(i)">
      <img alt="@{{ image.alt }}" src="media/250/@{{ image.file }}" width="100" />
    </li>
  </ol>
</div>

Answer 1

To pass data from a component to components in its template you can use data-binding. The receiving component needs an input like:

@Component({
    'selector': 'slider',
    'templateUrl': '/api/templates/PostComponent.slider',
    'pipes': [ withType ]
})
export class SliderComponent {
  @Input() post;
  ngOnInit() {
    console.log(this.post);
  }
}

In the template of the parent component (portfolio) post can be bound to the post input of slider like:

<slider [post]="post"></slider> <!-- the slider selector -->

Answer 2

Most of the time, we use a shared service for this. This service allows you to share data.

export class SharedService {
  currentPost:any;
}

You can specify the corresponding provider when bootstrapping your application:

bootstrap(AppComponent, [ SharedService ]);

See this link for more details:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service