Passing Properties to a Component

The component doesn't access the property directly in the template scope. Therefore, just declare the property at the time of component deceleration (ex: {{component-name title=title}}). The title property in the outer template scope is available inside the component's template.

Syntax

{{post-action title=title}}

In the above code, the 'post-action' component has the 'title' property and initialized with the same name as of property name ('title').

Example

The example given below describes how to pass properties to a component.Create a route with the name as post-action and open the router.js file to define the URL mappings −

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('post-action');
});

//It specifies Router variable available to other parts of the app
export default Router;  

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

<p>Enter your data: {{input type = "text" value = title}}</p>
<p>The details of the object passed are : {{title}}</p>
{{yield}}

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

{{post-action title=title}}
{{outlet}}

Open the file post-action.js file created under app/routes/ with the following code −

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function() {
      //assigning the default value for 'title' property
      return {
         title: ""
      };
   }
});

Output

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