passing data from one typescript file to another in angular [duplicate]

Question

I have A component which has the following template

<div> This is A component </div>
    <router-outlet></router-outlet>

If I use url

site.com/A/B

then angular loads A component and puts B inside A's template.

A component has:

export class SettingsComponent implements OnInit {
  someVar;

 ngOnInit() {
this.someVar = "TEST"

How can I get this variable while starting B component ???

EDIT I don't want to use service for each of them because that TEST I get from API. And I think I will load server twice with such request. Instead of that I want to get it only once. Like in this example suppose I get reply from server and put it inside this.someVar = "TEST" So second component should only use first component data not touching the backend server API.

Not clear! How site.com/A/B supposed to be work? can you provide stackblitz? — Prashant Pimpale
– Prashant Pimpale, Commented Sep 16, 2019 at 12:28
U just get some page. where one part is from component A, and the rest html is from B. While A component loads, it gets data from backend API. And I want B component to use the same data from component A without use of service. Because I think then service loads backend API twice — David
– David, Commented Sep 16, 2019 at 12:35
@David why would API be called twice? If service is provided in root (as in answer below) this will be a singleton so API calls will be entirely determined by number of calls service makes — Andrew Allen
– Andrew Allen, Commented Sep 16, 2019 at 12:41

Yash · Accepted Answer · 2019-09-16 12:29:39Z

Use shared service

Working example: https://stackblitz.com/edit/angular-fgut7t

Service:

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
    providedIn: "root"
})
export class DataService {

  dataUpdated:EventEmitter<any> = new EventEmitter();

  constructor() { }

  setLatestData(data) {
    this.dataUpdated.emit(data);
  }

}

Child:

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../data-service.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() allData: [];
  latestData: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.dataUpdated.subscribe((data) => {
      this.latestData = data;
    });
  }

}

Parent:

import { Component } from '@angular/core';
import { DataService } from './data-service.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  dataArr = [];

  constructor(private dataService: DataService){}

  onAddTimestamp() {
    let timestamp = new Date();
    this.dataArr.push(timestamp);
    this.dataService.setLatestData(timestamp);
  }

}

Collectives™ on Stack Overflow

passing data from one typescript file to another in angular [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related