Component data transfer angular 6

Question

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

Muthu Kumar · Answer

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.

Sivakumar Koneti · Answer

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

Sanjit Kumar Singh · Answer

Share it via Service.

Mohd Kashif · Answer

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/

Vivek Kumar · Answer

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/

Abhishek Mishra · Answer

Hello Sandeep You can transefer data between componet using following two ways 1. @Input , @Output parameter. 2. Shared service

Ketan Mokariya · Answer

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/

Component data transfer angular 6

Answers (7)