angular 2 access child component property from parent component

Question

Need to access to property children element. Parent:

<div>    <shipment-detail #myCarousel ></shipment-detail> </div> 

@Component({   selector: "testProject",   templateUrl: "app/partials/Main.html",   directives: [ShipmentDetail] }) class AppComponent {    getChildrenProperty() {   // I want to get access to "shipment"    } } 

Children:

@Component({   selector: "shipment-detail", })  export class ShipmentDetail  {   shipment: Shipment; } 

Answer 1

See the Component Interaction cookbook. So, use @ViewChild() and add a method to ShipmentDetail that the parent can call to retrieve the shipment value, or just access the property directly, as I show below (because I was lazy and didn't want to write an API/method):

@Component({   selector: "testProject",   templateUrl: "app/partials/Main.html",   directives: [ShipmentDetail]  }) export class AppComponent {    @ViewChild(ShipmentDetail) shipmentDetail:ShipmentDetail;   ngAfterViewInit() {       this.getChildProperty();   }   getChildProperty() {      console.log(this.shipmentDetail.shipment);   } } 

Plunker