Passing data to component angular2

Question

Trying to pass data to a child component, I can attach the property into the template, but cant seem to access the id inside the class of the component. Any ideas?

---PARENT---

   <related-products [id]="product.id"></related-products>

--CHILD---

import {Component, OnInit, Input} from 'angular2/core';
import {RouteParams, Router} from 'angular2/router';
import {ProductService} from '../products/product.service.js';

@Component({
  selector: 'related-products',
  templateUrl: "wp-content/themes/f2/app/views/directives/related-products-template.html",
  inputs: ['id'],
  providers: [ProductService]
})
export class RelatedProductsComponent implements OnInit {

  products: any[];
  errorMessage: string; 
  id: number;

  constructor(
    private _service: ProductService,
    private _router: Router,
    private _routeParams: RouteParams
  ) {}

  ngOnInit() {

    console.log(this.id);
  }

}

Thierry Templier · Accepted Answer · 2016-04-26 13:16:01Z

1

You could try to use @Input for the id property:

export class RelatedProductsComponent implements OnInit {
  products: any[];
  errorMessage: string;   
  @Input() // <------------
  id: number;

  (...)
}

but it should work with the inputs attribute and you should have access to the value in the ngOnInit hook method. Are you sure that the provided expression product.id returns something defined?

See this plunkr: https://plnkr.co/edit/aG4TdHbAls3cu04AAt64?p=preview.

edited Apr 26, 2016 at 13:16

answered Apr 26, 2016 at 13:08

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

6 Comments

user3355603 Over a year ago

I think its the fact that i am making a ajax call to get the data, and this inturn means the data is not ready in the child component yet. How do i wait for the child component to be built so i know the data is available

Thierry Templier Over a year ago

You get the product directly or it's an element within a loop?

user3355603 Over a year ago

Its the single detail page, so I make the call and get the data and I have the child component (Related Products( which needs the id from the parent component (Product Detail)

user3355603 Over a year ago

parents data is not ready when the child component fires. Need a way of accessing the parent data from the child component when the data is available

Thierry Templier Over a year ago

And you don't have any error on the product.id expression? ;-) I think that product is initially undefined. Perhaps the Elvis operator could help you: product?.id. The value will be received later. Try to display it in the sub component into the ngOnChanges hook method...

|

Collectives™ on Stack Overflow

Passing data to component angular2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related