We started rendering components with static HTML content, and then moved on to passing the data to our components. Now, what if we want to use our components as layouts, and provide them the HTML content that should be rendered within the component at a designated place?

Let's make it more clear with an example. We will continue with the previous example, in which we passed in the data for product description to our component. Till now, we have been showing the product MRP, price, and sale values, but now we want to add the product information. The problem with product information is that the information format might change, based on the type of product we are using. Our component should be flexible enough to accommodate different product information formats.

Components also have the ability to be used in block forms. Block form is very similar to handlebars {{#if}}. We discussed blocks in Chapter 3, Rendering Using Templates. The block form of a component starts with {{#component-name}}, and ends with {{/component-name}}.

In order for components to be usable in block form, we have defined the components in such a way that they capture the data that is present inside the component block. Ember.js framework lets you do that with the yield Handlebars.js helper method.

Let's see how we can use the yield helper to capture the product information of any product:

<h4>
    <span> {{name}} </span>
</h4>
<div>
  <table>
    <tr>
      <td> M.R.P </td>
      <td> {{MRP}}</td>
    </tr>
    <tr>
      <td> Price </td>
      <td> {{price}}</td>
    </tr>
    <tr>
      <td> You Save </td>
      <td> {{sale}} </td>
    </tr>
  </table>
  <div class="information">
    {{yield}}
  </div>
</div>

As you may have noticed, we have added an additional block to contain the product information. This div is assigned a class, information, which controls the UI properties of the information block, and has a {{yield}} helper inside it. This yield helper method tells the component that the content will be provided by the template that is using this component. The yield helper will capture the content that is present inside the component tag when it is used in block form.

Now we can use the {{product-description}} component in our template in block form and provide in the HTML for product information within it, as follows:

{{#product-description name="Product Name"  MRP="$ 100" price="$80" sale="$20"}}
  <ul>
    <li> Info 1</li>
    <li> Info 2</li>
    <li> Info 3</li>
    <li> Info 4</li>
  </ul>
{{/product-description}}

This will result in product page, which looks like this:

The Index template providing HTML content to the product description component