Angular 2 passing object to component

Question

I'm trying to pass an object to another component.

Request-list.html

<tr [routerLink]="['Request', { id: request.id }]" *ngFor="let request of requests" [req]="request">
                        <td class=" ">{{ request.datum }}</td>
                        <td class=" ">{{ request.artist.name }} </td>
                        <td class=" ">{{ request.artist.user.first_name }}
                        <td class=" ">{{ request.user.first_name }}</td>
                        <td class=" ">{{ request.duration.price }}</td>
                        <td class=" ">{{ request.created_at }}</td>
                        <td class=" ">{{ request.rejected_at }}</td>
                    </tr>

RequestListComponent

import {Component} from '@angular/core';
import {Service} from './../services/service.service';
import {Request} from './../classes/request';
import {RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {RequestComponent} from './request.component';

@Component({
  directives: [ROUTER_DIRECTIVES, RequestComponent],
  templateUrl: 'partials/request-list.html'
})

export class RequestListComponent {
  requests: Request[];
  constructor(private _Service: Service) {}

  ngOnInit(){
    this._Service.getRequests().subscribe(data => this.requests = data);
  }
}

RequestComponent

import {Component, Input} from '@angular/core';
import {Service} from './../services/service.service';
import {Request} from './../classes/request';


@Component({
  templateUrl: 'partials/request.html'
})

export class RequestComponent {
  @Input() req: Request;

  constructor(private _Service: Service) {}
}

However I get the error: "Can't bind to 'req' since it isn't a known native property"

What am I doing wrong?

The problem is, that the RequestComponent is loaded with the router and not inside the RequestListComponent. Because of this, you can not use the @Input() to pass data into the RequestComponent. — Dinistro
– Dinistro, Commented May 9, 2016 at 15:33

Dinistro · Accepted Answer · 2016-05-09 15:37:13Z

3

As I mentioned in my comment, you cannot use @Input() if your RequestComponent is loaded with the Router. Unfortunately it is not possible to pass RouteData with the RouteLink-Directive.

To solve this problem, I would load the Request inside the RequestComponent from the service, which you used to load the list of Requests. To reduce the traffic to a backend, if you have one, you can build some caching mechanism.

export class RequestComponent {
    req: Request;

    constructor(private _Service: Service, routeParams : RouteParams) {
        this.req = _Service.getRequestById(routeParams.get('id'));
    }
}

answered May 9, 2016 at 15:37

Dinistro

5,7301 gold badge33 silver badges39 bronze badges

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

3 Comments

Ruben Over a year ago

Ah, thanks! Will look into this. There already is a service that handles http requests with the backend. Should I use that one, or is it a best practice to create a new service for requests?

Dinistro Over a year ago

@Ruben This depends on your service, difficult to say without the code.

Ruben Over a year ago

Ok, yeah I implemented it in the service we have for know. Working together with someone else and we will discuss it what would be best for us.

Collectives™ on Stack Overflow

Angular 2 passing object to component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related