Angular2 Share data between components

Question

Hello i would like to share title between components. I have component app.component which declare title property and all another components are children. I have page-header.component which write title to html and dashboard.component which set title property and title dont show. Here is my code:

app.component

export class AppComponent implements OnInit {
  title: string;

  ngOnInit(): void {

  }
}

page-header.component

export class PageHeaderComponent extends AppComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
  }

}

page-header.component.html

<h1>{{title}}</h1>

dashboard.component

export class DashboardComponent extends AppComponent {

  constructor() {
    super();
  }

  ngOnInit() {
    super.ngOnInit();
    this.title = "Dashboard";
  }
}

For greater clarity i added image:

I would like to easy set title in any component (child of AppComponent) and title will be write to page header component

you can create a common-component and use it across the page by having the other components as child — Aravind
– Aravind, Commented May 25, 2017 at 8:29

Hamed Baatour · Accepted Answer · 2017-05-25 09:20:40Z

3

you are overcomplicating things you have two ways to share data in angular whether by using a service or by using the @Input decorator just like this

in the page-header.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <h1>{{title}}</h1>
  `
})
export class PageHeaderComponent {
  @Input() title: string;
}

in the parent component of page-header.component.ts which is app.component.ts you do the following

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [title]="parentTitle"</app-child>
  `
})
export class AppComponent {
 @Input() parentTitle: string;
}

and in the parent component of app.component.ts which is the dashboard.component.ts you do

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

@Component({
selector: 'app-parent-parent'
template : `
<app-parent [parentTitle] = "parentParentTitle"</app-parent>
`
})
  export class DashboardComponent {
 parentParentTitle = "Dashboard";     
 }

alternatively, you can create a service with a setter and getter methods and you inject it in the three components to set or get data between all of them.

edited May 25, 2017 at 9:20

answered May 25, 2017 at 8:37

Hamed Baatour

6,9823 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bluray Over a year ago

But when I create child from AppComponent and in ngOninput i set this.parentTitle, dont change in page-header.component

Hamed Baatour Over a year ago

your question is not that clear but can you try to set the parentTitle in the constructor of the AppComponent not in the ngOnInit() method

Hamed Baatour Over a year ago

@bluray yes it's clear now, I have also updated my answer showing you how you can do it with a parent- child relation method but if you want to use the second method to create a service just let me know and I will write the full 3 components for you

Yoav Schniederman · Accepted Answer · 2017-05-25 09:01:08Z

you can use ngRedux :

run from you cmd
```
npm install --save-dev ng2-redux redux
```

at your app.module.ts add ngRedux at your constructor

export class AppModule {
 constructor(ngRedux : NgRedux<IAppState>){
    ngRedux.configureStore(rootReducer, INITIAL_STATE);
 }
}

create store.ts file and decleare ther all your share data

export interface IAppState {
  globalData?: Data;
}

export const INITIAL_STATE: IAppState = {
  globalData: null
};

export function rootReducer(state: IAppState = INITIAL_STATE, action: Action): IAppState {

switch (action.type) { case UPDATE_DATA: return Object.assign(state, state, (action)); default: return state; } }

Create action.ts file

 export const UPDATE_DATA = 'UPDATE_DATA';

 export interface UpdateGlobalAction extends Action {
   globalData: Data;
 }

at your components constructor inject ngRedux

 constructor(private ngRedux : NgRedux<IAppState>) {

 }

 //call to share data
 this.ngRedux.getState().globalData

you can update you share data with

 this.ngRedux.dispatch({type : UPDATE_DATA, globalData : data} as UpdateGlobalAction);

Mohanad Inairat · Accepted Answer · 2017-05-25 08:33:58Z

0

Services is a good solution you can use it for example like this :

app.component.ts

import {Component} from 'angular2/core';
import {MySecondSvc} from '../services/MySecondSvc';
@Component({
  selector: 'my-app',
  template: '{{title}}'
})
export class AppComponent {
  title = "Angular 2 beta";
  constructor(private _secondSvc:MySecondSvc) { console.clear(); }
  ngOnInit() {
    this.title = this._secondSvc.getValue();
  }
}

MySecondSvc.service.ts

import {Injectable} from 'angular2/core';

@Injectable()
export class MySecondSvc {
  title = "Hello";
  getValue() {
    return this.title;
  }
}

live

answered May 25, 2017 at 8:33

Mohanad Inairat

817 bronze badges

1 Comment

bluray Over a year ago

Thanks, but when I use this solution, I must inject MySecondSvc to all components. I would like only call this.title property.

bluray · Accepted Answer · 2017-05-25 09:12:59Z

0

I was create simple example. My problem is app.component.html dont update property title.

extend class AppCoponent {
 title: string;
 constructor(){this.title = "App"}
}

app.component.html:

<h1>{{title}}</h1>

DashboardComponent

  extend class DashboardComponent extend AppComponent{
     constructor(){
     this.title = "Dashboard";
    }
    }

In title is allways App instead of Dashboard

answered May 25, 2017 at 9:12

bluray

1,9736 gold badges40 silver badges74 bronze badges

Collectives™ on Stack Overflow

Angular2 Share data between components

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related