Categories

Thursday, June 13, 2024
#919814419350 therichposts@gmail.com
Angular 8Angular 9Angular7

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

Angular 9, Angular 10

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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.