Component data transfer angular 6

San

Any way to Component data transfer from one to another or parent component to child components without using @output and @input in angular 6 please send any demo examples

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sivakumar Koneti7y ago
Hello Sandeep Jamkar,

In Angular @Input() and @Output() are used to pass the data from one component to another , your requirement is without using Input() and Output() i.e at situation we can use a service to share data or else another scenario use global variable in angular

I hope we understood

Read once

https://angular.io/guide/dependency-injection#angular-dependency-injection
+1
Sanjit Kumar Singh7y ago
Share it via Service.
0
Mohd Kashif7y ago
Hi Sandeep,

You can share data between component in different different way and its based on relationship of your component :-
1) Parent to Child component : sharing data via Input
2) Child to Parent component : sharing data via ViewChild
3) Child to Parent component: Sharing data via Output and Event Emitter
4) Unrelated component(sibling component): Sharing data with a service

For more details you can refere below link:-

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/
+1
Vivek Kumar7y ago
Hi,
Have a look to below links for your reference.

https://medium.com/datadriveninvestor/angular-7-share-component-data-with-other-components-1b91d6f0b93f

http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

https://www.c-sharpcorner.com/article/pass-data-between-components-using-outputinput-and-eventemitter-in-angular/
0
Muthu Kumar7y ago
HI Sandeep,

Here i have posted answer related to you It's accepted answer,

https://stackoverflow.com/questions/46655954/passing-a-variable-between-two-components-without-inheritance-angular-2/46661346#46661346

First Method:-(Global Variable Set and Get Example)

Step 1:

Declare a Global Variable in app.component.ts

export class AppComponent {

public static dataNavigate;

}

Step2:

import a App Component in Your Value Set Component(first.component.ts)

import {AppComponent} from '../app.component.ts';

AppComponent.columnVars = Object.keys(this.settings.columns);

//Your Value Set here

Now you can access every component in your app.

second.component.ts

import {AppComponent} from './app.component';

constructor(){

console.log(AppComponent.columnVars);

}

Second Method:-(Common Service)

Step 1:

Create a Service

dataService.ts

---------

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

@Injectable()

export class DataService {

constructor(){

}

public columnVars:any;

}

Step 2:

Import app.module.ts file

import {DataService} from './data.service';

providers:[DataService]

Step 3:

Set the Value to the Common Service Variable

first.component.ts

import {DataService} from './data.service';

constructor(dataService:DataService){

this.dataService.columnVars="whatever maybe json or object etc..";

}

Step 4:

Access that you can do same way step3

second.component.ts

import {DataService} from './data.service';

constructor(dataService:DataService){

console.log(this.dataService.columnVars);

}

Other way is use localStorage.
+2
Abhishek Mishra7y ago
Hello Sandeep
You can transefer data between componet using following two ways
1. @Input , @Output parameter.
2. Shared service
+1
Ketan Mokariya7y ago
Hello Sandeep,

Following article is useful please refer .You can pass data in multiple component using service.

https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/
+1