CODEWITHSUNDEEP
angularangular7
BiancaC
BiancaC

Reputation: 68

Angular 7 - Sharing Data

What is the best way to share data between components in Angular 7?

Can I use @Input and @Output only for components that are in the relation of child and parent?

Upvotes: 5

Views: 948

Answers (7)

Nilesh Bunde
Nilesh Bunde

Reputation: 167

1. Parent-child

If components having Parent-child relation

  • @Input, @Output, EventEmitter is good option

Eg.

In Child Component

@Input() private dataFromParent: object;

@Output() dataToParentE = new EventEmitter<Event>();

this.dataToParentE.emit(data);

In Parent

<child-comp [dataFromParent]='dataFromParent' (dataToParentE)="dataToParentE($event)></child-comp>

2. Not related

We you can use a shared service

Create a service in angular add getter and setters or fetch the data from server using http

And In the components (in which you want data communication) inject this common service in the constructor and use the methods in service to get or update the data

constructor( private commonService: CommonService ) {}

Upvotes: 0

S. Catalin
S. Catalin

Reputation: 31

Data sharing works by using the @Input() decorator or @Output() and EventEmitter, as much as i know :D , i'm new at using angular .

Upvotes: 1

shrestha rohit
shrestha rohit

Reputation: 2940

if your component is not related, there are two-way of doing this.

  1. using shared Service
  2. using state (new in angular 7.2) in state, you can pass data using state parameter using router this.router.navigate(['/'], { state: { data: 'value' } });

or RouterLink

<a routerLink="/" [state]="{ data: 'value' }">Click here</a>

and catch the data in NavigationStart Event

router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.getCurrentNavigation();
  const data = navigation.extras.state.data ;
});

Upvotes: 0

Shilpa Soni
Shilpa Soni

Reputation: 306

The best way you can share data via following ways:

  1. Using the input() decorator for parent child sharing of data.
  2. Using @ViewChild() and output() decorators for child parent sharing of data.
  3. Also EventEmitter for child parent sharing of data.
  4. For unrelated Components you can use sharing of data with a service.

Upvotes: 1

Nilesh Bunde
Nilesh Bunde

Reputation: 167

1. If you want to communicate between parent component and child component. => i. For child

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";

Inside class add @Input() private dummyData: object; for getting data from parent

and

@Output() dataSelected = new EventEmitter<Event>();

and emit an event with data to be passed to parent using

this.dataSelected.emit(dataToPass);

ii. For Parent

In component div

<child-comp [dummyData]='dummyData' (dataSelected)="dataSelected($event)></child-comp>

2. If you want to communicate between components at the same level

=> Use shared service approach for communication Create a service with useful functions and import that service in the components where you want communication to happen.

For more info regarding this type of communication refer to this URL: http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

Upvotes: 0

rcanpahali
rcanpahali

Reputation: 2643

You can also directly use a function in another component.

For example,

After that injection, you can use childComponent's function inside your parent component.

in parent.component.ts

@ViewChild(childComponent) childComponentRef: childComponent;
this.childComponentRef.myFunc();

Upvotes: 0

Eduard Vintu
Eduard Vintu

Reputation: 66

If your components are not related,there are two solutions: you can use a shared service(using observable) or you can use ngrx/store.

Upvotes: 5

Related Questions