Angular2 pass data to another component on click of a button

Question

I have list of tasks being displayed in the UI using ngFor.

How can I pass data to another page when I click edit in the following. It has to pass the data corresponding to the datacard on which the Edit button is clicked.

<div *ngFor="#task of tasks">
    <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
        <h2 class="mdl-card__title-text">{{task.taskname}}</h2>
    </div>
    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
        {{task.taskdesc}}
    </div>
    <div class="mdl-card__actions mdl-card--border">                
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a>
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Mark Completed</a>
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">EDIT</a>
    </div>
</div>

when I click the Edit button, I want to display a page where I can edit the task. — user2180794
– user2180794, Commented May 31, 2016 at 4:51

Pardeep Jain · Accepted Answer · 2016-05-31 06:06:09Z

2

If you want to pass data to the another page on click of some button than you have to use routing first, then pass the required data as RouterParams at the time of routing like this :-

<div *ngFor="#task of tasks">
    <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
        <h2 class="mdl-card__title-text">{{task.taskname}}</h2>
    </div>
    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
        {{task.taskdesc}}
    </div>
    <div class="mdl-card__actions mdl-card--border">                
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a>
        <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Mark Completed</a>
        <a [routerLink]="['/Edittask', {data: task.taskname}]" class="mdl-button mdl-js-button mdl-js-ripple-effect">EDIT</a>
    </div>
</div>

than at the receiving end use RouteParams to get the values that you send on the button click. see here for more about RouteParams.

https://angular.io/docs/js/latest/api/router/RouteParams-class.html

Working Example of ROuting with Params

edited May 31, 2016 at 6:06

answered May 31, 2016 at 5:59

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2180794 Over a year ago

Thanks, It works. But how do i pass multiple fields ? I did <a [routerLink]="['/EditTask', {data: task.taskname, data2: task.taskdesc} .. it works, but doesn't seem like an ideal way to it.

Pardeep Jain Over a year ago

if you have two or three values to pass than its okay, you can do using this method, but if you have array or Object to pass using RouteParams than you can use common service to transfer data because there is no way to pass Object/Array using RouteParams according to officials, RouteParams only suppors string yet, see here angular.io/docs/ts/latest/api/router/…

Collectives™ on Stack Overflow

Angular2 pass data to another component on click of a button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related