Displaying row data from Angular Material Table into another component

Question

I have two components. The first component contains Angular Material Table while the second one going to display the details of the row clicked in table.

The first component:

    const ELEMENT_DATA: GoodsList[] = [
    {initial: 'J', eta: '20-01-2020', src: 'IN'},
    {initial: 'N', eta: '20-01-2020', src: 'ON''}
]
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="ordered">
        <th mat-header-cell *matHeaderCellDef> Initial </th>
        <td mat-cell *matCellDef="let element"> {{element.initial}} </td>
    </ng-container>

    <ng-container matColumnDef="eta">
        <th mat-header-cell *matHeaderCellDef> ETA </th>
        <td mat-cell *matCellDef="let element"> {{element.eta}} </td>
    </ng-container>

    <ng-container matColumnDef="srt">
        <th mat-header-cell *matHeaderCellDef> SRC </th>
        <td mat-cell *matCellDef="let element"> {{element.src}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></tr>
</table>

Now the function getRecord() is working as intended.

    getRecord(row: GoodsList){
    console.log(row);
    }

The data is captured inside row variable but now how can I pass it into another component based on what I clicked?

Does your "other component" is a child ? a parent ? Or maybe you have a <router-outlet> ? — Emilien
– Emilien, Commented Jan 29, 2020 at 8:46
@Emilien both of the components are on the same level, so it's not parent-child relation — OreoFanatics
– OreoFanatics, Commented Jan 29, 2020 at 8:51
Maybe you can store your row into a service with a Subject. After that, you inject this service in both component. — Emilien
– Emilien, Commented Jan 29, 2020 at 8:52
@Emilien can you elaborate with example? Subject is still new for me :) — OreoFanatics
– OreoFanatics, Commented Jan 29, 2020 at 8:56

Emilien · Accepted Answer · 2020-01-29 09:02:26Z

2

Here is an example of using a service (The example is about users managment) :

In your UserService, declare a property user with type Subject.

user: Subject<User> = new Subject();

Expose it to outside as observable:

user$: Observable<User>
...
this.user$ = this.user.asObservable();

Login function will update the private user Subject.

login(userName: string, password: string) {
  //...
  this.user.next(new User("First name", "Last name"));
}

In your UserComponent, subscribe to UserServive's user$ observable to update view.

this.userService.user$.subscribe((userData) => {this.user = userData;});

In your view, simply use string interpolation:

{{user?.firstName}} {{user?.lastName}}

Here is the working plunker: http://plnkr.co/edit/qUR0spZL9hgZkBe8PHw4?p=preview

answered Jan 29, 2020 at 9:02

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Displaying row data from Angular Material Table into another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related