CODEWITHSUNDEEP
javascriptangularcomponents
yer
yer

Reputation: 1532

data from one component to other component in angular 4

I want to share data from one component to other component.

I have a table in list.component (url path: settings/list) like this

enter image description here

When I click on View/Edit button, it takes to other component selected.component (url path: settings/selected) which shows the details of the selected row like their name, email address.

list.component.ts

  getAccountsList() {
    this.http.get<Company>(environment.company,
      { headers: new HttpHeaders({ 'Authorization': 'bearer localStorage.getItem("jwt_token")' }) })
      .subscribe(data => {
        this.company = data;
        console.log(data);
      });
  }

  // Memory optimization trick
  userThumb(index, company) {
    return company ? company.id : undefined;
  }

list.component.html 

    <tr *ngFor="let companyData of company?.companies.data; trackBy: userThumb">
                                <td class="text-truncate">{{companyData?.name }}</td>

</tr>

Upvotes: 0

Views: 65

Answers (1)

BELLIL
BELLIL

Reputation: 765

For the case of list of items to item selection, i personally prefer to pass the id of the selected item on the path. It's simple clean and well explained in Angular docs.

What you need to do

On the list component: - when you select ViewEdit, you get the id of the selected item and put it on the path

 goToItemDetails(id) {
  this.router.navigate(['/item-details', id]);
}

On the details Component: when you init the component, you get the setted id

ngOnInit() {
   this.route.params.subscribe(params => {
       this.id = +params['id'];
       // a service that calls item by it's id from the database
    });

You can find more details on this link

Upvotes: 1

Related Questions