CODEWITHSUNDEEP
angular
user3355603
user3355603

Reputation: 1171

Passing data to component angular2

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);
  }

}

Upvotes: 0

Views: 449

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202176

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.

Upvotes: 1

Related Questions