EmberJS - Wrapping Content in a Component

You can wrap the content in a component by using the templates. Consider we have one component called {{my-component}}, which can be wrapped in component by passing properties to it in another template as shown below −

{{my-component title = title action = "funcName"}}

You can share the component data with its wrapped content. For more information, click this link.

Example

The example given below specifies how to wrap content in a component. Create a component with the name post-action, which will get define under app/components/.

Open the post-action.js file and add the following 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 following code −

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

Open the index.hbs file and add the following code −

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

Output

Run the ember server; you will receive the following output −

When you click on button, the compFunc() function will get trigger and it will further display the following output −