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
