EmberJS - Sharing Component Data with Wrapped Content

---

---

Description

You can share the component data with its wrapped content. Consider we have one component called {{my-component}} for which we can provide style property to write the post. You can write as −

{{#my-component editStyle="markdown-style"}}

The component is provided with the hash and supplied to the template. The editStyle can be used as an argument to the component helper.

Example

The below example specifies sharing the component data with its wrapped content. Create a component with the name post-action which will get define under app/components/.

Open the post-action.js file and add the below code −

import Ember from 'ember';

export default Ember.Component.extend({
   actions: {
      compFunc: function () {
         this.set('title', "Tutorialspoint...");
         //this method sends the specified action
         this.sendAction();
      }
   }
});

Now open the component template file post-action.hbs with the below code −

<input type="button" value="Click me" {{action "compFunc" bodyStyle="compact-style"}} /><br/>
//wrapping the 'title' property value
<p><b>Title:</b> {{title}}</p>
{{yield}}

Open the index.hbs file and add the below code:

<b>Click the button to check title property value</b>
{{post-action title=title action="compFunc"}}
{{outlet}}

Output

Run the ember server and you would get the below output −

When you click on button, the compFunc() function will get trigger and displays the below output −