In this post, you will learn about three methods to pass data between components in Angular and which is the best approach depending upon the scenario.
Consider that we are navigating from one page to another in which the previous page is destroyed and we are landing on another page. If there’s not a lot of data to pass through (e.g., id of an object), we can use the URL to pass the data.
There are two ways to pass the data through URLs in Angular:
If the parameter is mandatory for the component then we have to use router parameter. Otherwise, we can use query params.
Router parameters are required parameters. We have to register the parameter with the URL in the router module like this:
const routes: Routes = [
{ path: 'list/:id', component: AppListComponent }
];
In this example, list
is the route URL and :id
is the router param that is mandatory to pass and AppListComponent
is the component to mount on that route.
routerLink
Directive<button
type="button"
[routerLink]="['/list', id]"
>
Show List
</button>
In this example, id
is the variable initialized in that component’s code and the /list
is the route on which we want to navigate.
route
Serviceid = 28;
constructor (private router: Router) {}
route() {
this.router.navigate(['/list', this.id]);
}
Here’s how to read a router parameter from the component routed to:
constructor(
private activatedroute: ActivatedRoute
) {
this.activatedroute.params.subscribe(data => {
console.log(data);
})
}
Query params are optional params. There is no need to register a separate URL for the query params.
const routes: Routes = [
{ path: 'list', component: AppListComponent }
];
In this example, list
is the route URL and AppListComponent
is the component.
routerLink
Directive<button
type="button"
[routerLink]="['/list']"
[queryParams]="{id: '24'}"
>
Show List
</button>
In this example, id
is the key and 24
is the static value. You can also pass dynamic value through a variable.
route
Serviceid = 28;
constructor (private router: Router) {}
route() {
this.router.navigate(['/list'], {queryParams: {id: this.id}});
}
constructor(
private activatedroute: ActivatedRoute
) {
this.activatedroute.queryParams.subscribe(data => {
console.log(data);
})
}
Note: Get more details on Angular router params in this article.
@Input
and @Output
If we want to pass data from a child to a parent or a parent to a child component we can use @Input
and @Output
.
<app-child
[jsonData]="data"
(outputData)="data = $event"
></app-child>
Here data
is a variable initialized in the component’s code.
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: ''
})
export class AppChild implements OnInit {
@Input()
jsonData;
@Output()
outputData = new EventEmitter();
constructor() {}
ngOnInit() {
console.log(this.jsonData);
}
emitData(data) {
this.outputData(data);
}
}
In this way, we can pass data from child to parent and from parent to child.
Note; Get more detail on @Input()
in this article and on @Output()
in this article.
If two components are siblings or the level of a component in the hierarchy is more distant, then it’s good to use a service for passing the data using observables.
This example uses RxJS subject for creating an observable:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({providedIn: 'root'})
export class AppService {
observer = new Subject();
public subscriber$ = this.observer.asObservable();
emitData(data) {
this.observer.next(data);
}
}
To emit the data you can call the emitData
method of this service and for getting the data you have to subscribe to subsciber$
like this:
constructor(private appService: AppService) {}
ngOnInit() {
this.appService.subscriber$.subscribe(data => {
console.log(data);
});
}
And that’s it for now, three ways to pass data back and forth between your components in Angular. Now go on and build some awesome components!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Hello, first of all, thank you for this tutorial. I’m trying to implement the 3rd solution, but i’m not getting this to work. I have Page A which modifies the value of the variable inside my service “SharedService” by calling the emitData function. After modifying the value in the same page i confirmed the variable subscriber$.subscribe(…) have the new value.
When i move to Page B, loading le variable from my service SharedService in got a empty result. Can you please help? Thank you
This “tutorial” is not complete. It’s not possible to understand how we get data from child component to the parent’s one.