How to pass object from one component to another in angular2?

Question

I have 1 component that contains some projects. When I clicked on project I want to display him content in another component. How I can do this? Thanks.

Answer 1

There are several ways to do this.

1. Provide the "projects" objects via a service and inject that service into both components and use a route parameter via the angular2 router. You can then use the ActivatedRoute Params (import { ActivatedRoute, Params } from '@angular/router';) to retrieve the "project" via the index of the "project" from the service.

2. Create an global object the can hold a "project". Use a service to return an Observable to that object and inject it into both components. The you can store the set and retrieve the object from your observable.

3. Some combination of the two would be best depending on your exact needs

Code:

@Injectable()
export class ProjectsService {
  getProjects(): Observable<Project[]> {
    return Observable.of(PROJECTS);
 }
}
const PROJECTS = [/*your projects here*/]

In short, you need to create a service to handle the data.