By default a component does not have access to properties in the
template scope in which it is used.
For example, imagine you have a `blog-post` component that is used to
display a blog post:
```handlebars {data-filename=app/templates/components/blog-post.hbs}
Component: {{title}}
Lorem ipsum dolor sit amet.
```
You can see that it has a `{{title}}` Handlebars expression to print the
value of the `title` property inside the ``.
Now imagine we have the following template and route:
```javascript {data-filename=app/routes/index.js}
export default Ember.Route.extend({
model: function() {
return {
title: "Rails is omakase"
};
}
});
```
```handlebars {data-filename=app/templates/index.hbs}
Template: {{title}}
{{blog-post}}
```
Running this code, you will see that the first `` (from the outer
template) displays the `title` property, but the second `` (from
inside the component) is empty.
We can fix this by making the `title` property available to the
component:
```handlebars
{{blog-post title=title}}
```
This will make the `title` property in the outer template scope
available inside the component's template using the same name, `title`.
If, in the above example, the model's `title` property was instead
called `name`, we would change the component usage to:
```handlebars
{{blog-post title=name}}
```
In other words, you are binding a named property from the outer scope to
a named property in the component scope, with the syntax
`componentProperty=outerProperty`.
It is important to note that the value of these properties is bound.
Whether you change the value on the model or inside the component, the
values stay in sync. In the following example, type some text in the
text field either in the outer template or inside the component and note
how they stay in sync.
You can also bind properties from inside an `{{#each}}` loop. This will
create a component for each item and bind it to each model in the loop.
```handlebars
{{#each model as |post|}}
{{blog-post title=post.title}}
{{/each}}
```