How to propagate value from one custom element to another in Polymer 1.0?

Question

I have two custom elements. student-details.html and student-service.html

student-details.html looks like this

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="student-service.html">
<dom-module id="student-details">
<style>
</style>
<template>
	<h1>Student Details</h1>
<h1>{{studentId}}<h1> //This value is printed properly
	<student-service   user-data={{studentId}} service-name="StudentDetails"  response-data={{responseData}} ></student-service>



    	<h1>{{responseData.name}}</h1>
    	<img width="70" height="70" src="{{responseData.image}}" />
    	<h1>{{responseData.qualification}}</h1>

    	<h1>{{responseData.speciality}}</h1>
    	<h1>{{responseData.phone}}</h1>

    	<h1>{{responseData.email}}</h1>

    	<template is="dom-repeat" items="{{responseData.addresses}}">
    	<h1>{{item.street}}</h1>
    	<h1>{{item.area}}</h1>
    	</template>

</template>
<script>
Polymer({
is:'student-details',
properties:{
	studentId: String,
	notify: true
}

});

</script>
</dom-module>

the student-service takes input as studentId and returns a response in responseData.

If I access the value studentId in the student-details.html itself using {{studentId}} it displays, but I am not able to send the same value to user-data input in student-service element.

Note: If I hardcode the studentId, it works well. I think I am not following the proper way of passing value. Kindly suggest

Answer 1

The code does not look wrong. It could well be that the student-service is being called before the studentId is set.

Try to see the flow of your code and make sure, the service is only called after the studentId is set.