How to pass data from one component to another component in Angular 9?

Hello to all, welcome on therichpost.com. In this post, I will tell you, How to pass data from one component to another component in Angular 9?

Post Working:

In this post, I will tell you, How to pass data from one component to another component in Angular 9? I am passing data between components with query parameters.

Here is the working code snippet and please use carefully:

1. Here is the code for First Component and that I have added into my app.firstcomponent.ts file:

Here I am setting data

...
import { Router } from '@angular/router';
...

export class FirstComponent implements OnInit {
 ...
adduserdata = "First Component";
constructor(private router: Router) { }

//Button click function or you can try it with api callig also
buttonclick()
{
 this.router.navigate(['secondcomponenturl'], {queryParams: {data : this.adduserdata}});
}
...
}

2. Here is the code for Second Component and that I have added into my app.secondcomponent.ts file:

Here I am getting the data

...
import { ActivatedRoute, Router, NavigationEnd  } from '@angular/router';
...

export class SecondComponent implements OnInit {
constructor(private route: ActivatedRoute) {}

...
ngOnInit(): void {
   console.log(this.route.snapshot.queryParams.data);
  }
...
}

If you have any kind of query then please let me know.

Jaasa

Thank you