Passing information between components in Angular 2 using a shared service

Question

Passing information between components in Angular 2 using a shared service

After capturing data from one component, I am attempting to transfer it to another component through a service.

Component1 (Start) : radio box View

                <md-radio-button
                    *ngIf="item.id===1"
                    value="{{item.value}}"
                    class="{{item.class}}"
                    checked="{{item.checked}}"
                    (click)="onSelectType1(item)"> //capturing the value here
                {{item.label}}
            </md-radio-button>

ts code

public  onSelectType1(selected:any){
        this.formeService.type1Change(selected.nb)
}

SERVICE :

@Injectable()
export class FormeService{
public type1S : any;

public  type1Change(selected):any

{

    this.type1S=selected;  //storing it in the service here

 }

Component 2 : (End) : Simple View

ts code

export class ContentComponent{

constructor(public BackService : BackgroundService ,
                public formeService: FormeService)
    {
        console.log(this.formeService.type1S) 



////// displays as undefined in the console !!!!!!!!!!!!!!!!! 


The issue lies HERE: how can I access the value of my variable in this section?



}

!!!!!!!! and meanwhile in the view it shows me the value:

{{formeService.type1S}}  // normal functionality here

Can someone advise on how I can display the data value in the "end component ts code"?

typescript angular angular2-routing angular2-directives angular2-services

Answer 1

Answer №1

Here's a complete example with a Plunker

import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';

@Injectable()
export class DataService {
  public dataStream$:BehaviorSubject<number> = new BehaviorSubject<number>(null);

  // notify subscribers when new values are set
  set data(value:number) {
    this.dataStream$.next(value);  
  }
}

@Component({
  selector: 'content-comp',
  template: `
<div>{{value}}</div>
`})
export class ContentComponent {
  value:number;

  constructor(public dataService: DataService) {
    // subscribe to updates
    this.dataService.dataStream$.subscribe(val => {
      this.value = val;
    });
  }
} 

@Component({
  selector: 'other-comp',
  template: `
<button (click)="clickHandler()">update counter</button>
`})
export class OtherComponent {
  counter:number = 0;
  constructor(private dataService: DataService) {}

  // update the counter      
  clickHandler() {
    this.dataService.data = this.counter++;
  }
} 

@Component({
  selector: 'my-app',
  providers: [DataService],
  directives: [ContentComponent, OtherComponent]
  template: `
  <h2>Hello {{name}}</h2>
  <content-comp></content-comp>
  <other-comp></other-comp>
`
})
export class App {

}

Answer 2

Here's a complete example with a Plunker

import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';

@Injectable()
export class DataService {
  public dataStream$:BehaviorSubject<number> = new BehaviorSubject<number>(null);

  // notify subscribers when new values are set
  set data(value:number) {
    this.dataStream$.next(value);  
  }
}

@Component({
  selector: 'content-comp',
  template: `
<div>{{value}}</div>
`})
export class ContentComponent {
  value:number;

  constructor(public dataService: DataService) {
    // subscribe to updates
    this.dataService.dataStream$.subscribe(val => {
      this.value = val;
    });
  }
} 

@Component({
  selector: 'other-comp',
  template: `
<button (click)="clickHandler()">update counter</button>
`})
export class OtherComponent {
  counter:number = 0;
  constructor(private dataService: DataService) {}

  // update the counter      
  clickHandler() {
    this.dataService.data = this.counter++;
  }
} 

@Component({
  selector: 'my-app',
  providers: [DataService],
  directives: [ContentComponent, OtherComponent]
  template: `
  <h2>Hello {{name}}</h2>
  <content-comp></content-comp>
  <other-comp></other-comp>
`
})
export class App {

}

Passing information between components in Angular 2 using a shared service

Answer №1

Similar questions

"Learn how to automatically limit date selection to a maximum of 3 days after choosing a date with the nb-rangepicker rangep

Decorators are not allowed in this context, the Angular component constructor may not include them

Tips for utilizing express in your typescript projects

'The object of type '{}' does not support indexing with a 'string'

Combining Power BI with Spring Angular for Seamless Integration

Ensuring proper validation of sinon stub parameters in TypeScript

Encounter a Typescript error when dealing with "app.ws" while using express-ws

Encountered difficulty locating the module path 'stream/promises'

Can you explain the significance of 1x, 3x, etc in the Karma code coverage report for Angular unit testing?

Embracing the power of Typescript with Node and Express?

Organizing Array Elements in Sequence with Various Data Types Using Typescript

Setting up the view for 2-factor authentication in Umbraco 10: A guide for Angular or C# users

Errors caused by Typescript transpilation only manifest on the production server

rxjs iterates through an array executing each item in sequential order

Unable to access structuredClone on the global object within a Node.js application

Tidying up following the execution of an asynchronous function in useEffect

The combination of MUI pickers and date-fns led to a TypeError: the function utils.getYearText is not defined

Connecting to Multiple Databases in NestJS with MySQL Without Defining Entities

Unusual problem with [(ngModel)] not updating after Apollo subscription

Modifying preset values in settings.json within the [Extension Development Host] environment