How to pass an object from one Component to another in Angular

Question

I am working on angular2 version. I have a grid in which i have edit button. I need to implement whenever i click on edit it should display other component and that object should be passed to that component. My view is as below:

  <table class="table table-striped" width="50%">
  <tr> 
     <td>User Name</td>
     <td>Email</td>
     <td>Gender</td>     
     <td></td>
  </tr>
  <tr *ngFor="let user of Users">
     <td>{{user.UserName}}</td>
     <td>{{user.Email}}</td>
     <td>{{user.Gender | transformgender }}</td>
     <td><a  routerLink="/edituser" routerLinkActive="active">Edit</a></td>  
  </tr>
</table>
<a class="btn btn-primary" routerLink="/adduser" routerLinkActive="active">Add User</a>

Now how can a pass user object to other component called edituser.component.ts. Please suggest.

yes we need pass with route. when we will click on edit it will show different route and component on that route should get that object — manish kumar
– manish kumar, Commented May 12, 2017 at 11:45

Reşit Körsu · Accepted Answer · 2017-05-12 16:34:33Z

Instead of this:

<td><a  routerLink="/edituser" routerLinkActive="active">Edit</a></td>

You need to just bind a funcion to that 'a' tag and do all the navigation and other user selection in that function like this;

in the users.component.html:

<td><a  (click)="editThisUser()" routerLinkActive="active">Edit</a></td>

in the users.component.ts:

`

// add Router to the top of the component
   import { Router } from '@angular/router';
 //...... some other codes....//
 //in the component class 
   constructor(private router: Router) {}
 //and define the function that you bind in the users.component.html
   editThisUser(): void {
     this.router.navigate(['/edituser', this.selectedUser.id]);
   }`

for further information i suggest you to check the official angular heroes tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

Thanks for suggestion but i got same thing using link as well. Please see <a class="fa fa-edit" [routerLink]="['/edituser', user.UserId]" routerLinkActive="active"></a>

Joe Keene · Accepted Answer · 2017-05-12 12:26:14Z

Setup a very basic service that hold data? :-

import { Injectable } from '@angular/core';
import { Component, OnInit } from '@angular/core';

@Injectable()
export class UserSelectedService {
    public userSelected: any = {}; 
}


@Component({
    selector: 'user-view',
    templateUrl: 'user-view.html',
    styleUrls: ['user-view.scss']
})

export class UserViewComponent implements OnInit {

    public user: any;

    constructor(private _userSelectedService: UserSelectedService) {}

    public ngOnInit() {
        this.user = this._userSelectedService.userSelected;
    }

}

Then edit html so that when clicked to set the user (click)=setUserSelected(user).

Collectives™ on Stack Overflow

How to pass an object from one Component to another in Angular

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related