<! DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
<meta name="ember-guides/config/environment" content="%7B%22modulePrefix%22%3A%22ember-guides%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22trailing-history%22%2C%22historySupportMiddleware%22%3Atrue%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-guides%22%2C%22version%22%3A%223.7.0%2Ba7598d50%22%7D%2C%22ember-meta%22%3A%7B%22description%22%3A%22Ember.js%20helps%20developers%20be%20more%20productive%20out%20of%20the%20box.%20Designed%20with%20developer%20ergonomics%20in%20mind%2C%20its%20friendly%20APIs%20help%20you%20get%20your%20job%20done%E2%80%94fast.%22%7D%2C%22guidemaker%22%3A%7B%22title%22%3A%22Ember%20Guides%22%2C%22sourceRepo%22%3A%22https%3A%2F%2Fgithub.com%2Fember-learn%2Fguides-source%22%7D%2C%22algolia%22%3A%7B%22algoliaId%22%3A%22Y1OMR4C7MF%22%2C%22algoliaKey%22%3A%225d01c83734dc36754d9e94cbf6f8964d%22%2C%22indexName%22%3A%22ember-guides%22%7D%2C%22showdown%22%3A%7B%22ghCompatibleHeaderId%22%3Atrue%2C%22prefixHeaderId%22%3A%22toc_%22%7D%2C%22deprecationsGuideURL%22%3A%22https%3A%2F%2Fwww.emberjs.com%2Fdeprecations%2F%22%2C%22metricsAdapters%22%3A%5B%7B%22name%22%3A%22GoogleAnalytics%22%2C%22environments%22%3A%5B%22production%22%5D%2C%22config%22%3A%7B%22id%22%3A%22UA-27675533-1%22%2C%22require%22%3A%5B%22linkid%22%5D%7D%7D%5D%2C%22infoBanner%22%3A%7B%22content%22%3A%22Ember%20Octane%20is%20here!%20A%20lot%20has%20changed%20since%20Ember%203.14%2C%20including%20these%20Guides.%20Read%20more%20in%20the%20%3Ca%20href%3D%5C%22https%3A%2F%2Fblog.emberjs.com%2F2019%2F12%2F20%2Foctane-is-here.html%5C%22%3EEmber%20Blog%3C%2Fa%3E.%22%7D%2C%22exportApplicationGlobal%22%3Afalse%2C%22fastboot%22%3A%7B%22hostWhitelist%22%3A%5B%7B%7D%5D%7D%2C%22ember-collapsible-panel%22%3A%7B%7D%7D" />
<!--  EMBER_CLI_FASTBOOT_TITLE -->  <meta name="ember-cli-head-start" content>  <title>Passing Properties to a Component - Components - Ember Guides</title>

  <meta name="description" content="Components are isolated from their surroundings, so any data that the component needs has to be passed in.  

For example, imagine you have a BlogPost component that is used to display a blog post: 

```handlebars...">

<meta name="referrer" content="unsafe-url">

<!---- >
<!---- >
<!---- >
<!---- >
  <meta property="og:title" content="Passing Properties to a Component - Components - Ember Guides">

<!---- >
  <meta property="og:description" content="Components are isolated from their surroundings, so any data that the component needs has to be passed in.  

For example, imagine you have a BlogPost component that is used to display a blog post: 

```handlebars...">

  <meta property="og:type" content="website">

<!---- >
<meta name="twitter:card" content="summary">

<!---- >
<!---- >
  <meta name="twitter:title" content="Passing Properties to a Component - Components - Ember Guides">

<!---- >
  <meta name="twitter:description" content="Components are isolated from their surroundings, so any data that the component needs has to be passed in.  

For example, imagine you have a BlogPost component that is used to display a blog post: 

```handlebars...">

<!---- >
<!---- >
<! ----><meta name="ember-cli-head-end" content>


    <link integrity="" rel="stylesheet" href="/assets/vendor-c5cdfdb224e40208d070a18942b32fd3.css">
    <link integrity="" rel="stylesheet" href="/assets/ember-guides-92dca9f7555a994d11fd3e94376c4753.css">
    <link rel="shortcut icon" href="/images/favicon.png" />

    
  </head>
  <body  class="application version show version-show">
    <script type="x/boundary" id="fastboot-body-start"></script><!---->

<header id="ember400352" class="es-header ember-view" role="banner"><div id="ember400353" class="ember-view"><div class="container">
<nav id="ember400354" class="navbar navbar-inverse navbar-expand-lg bg-inverse ember-view">      <a class="navbar-brand" href="https://www.emberjs.com">
      <svg width="94" height="37" viewBox="0 0 259 100" xmlns="http://www.w3.org/2000/svg"><title>Ember Logo 1c White</title><g fill="#FFF" fill-rule="evenodd"><path d="M253.97 68.576s-6.28 4.872-11.807 4.328c-5.528-.544-3.792-12.896-3.792-12.896s1.192-11.328-2.064-12.28c-3.248-.944-7.256 2.952-7.256 2.952s-4.984 5.528-7.368 12.576l-.656.216s.76-12.36-.104-15.176c-.648-1.408-6.608-1.296-7.584 1.192-.976 2.496-5.744 19.832-6.072 27.096 0 0-9.32 7.912-17.44 9.208-8.128 1.304-10.08-3.792-10.08-3.792s22.104-6.176 21.344-23.84c-.752-17.664-17.824-11.128-19.752-9.68-1.872 1.408-11.848 7.424-14.76 24.088-.096.56-.272 3.04-.272 3.04s-8.56 5.736-13.328 7.256c0 0 13.328-22.432-2.92-32.616-4.574-2.753-8.56-.216-10.929 2.11-1.451 1.425 19.705-21.718 14.825-42.422C151.635.08 146.707-.976 142.187.624c-6.864 2.704-9.464 6.712-9.464 6.712s-8.888 12.896-10.952 32.08c-2.056 19.176-5.088 42.368-5.088 42.368s-4.232 4.12-8.128 4.336c-3.904.208-2.168-11.6-2.168-11.6s3.032-17.984 2.824-21.024c-.224-3.032-.44-4.656-4.016-5.736-3.576-1.088-7.48 3.464-7.48 3.464s-10.288 15.6-11.152 17.984l-.552.984-.536-.656s7.256-21.24.328-21.56c-6.936-.328-11.488 7.584-11.488 7.584s-7.912 13.224-8.24 14.736l-.536-.648s3.248-15.384 2.6-19.184c-.656-3.792-4.224-3.032-4.224-3.032s-4.552-.544-5.744 2.384c-1.192 2.928-5.528 22.32-6.072 28.496 0 0-11.376 8.128-18.856 8.232-7.472.112-6.712-4.736-6.712-4.736s27.416-9.384 19.936-27.912c-3.36-4.768-7.256-6.264-12.784-6.16-5.528.112-12.384 3.48-16.824 13.448-2.128 4.752-2.896 9.272-3.336 12.68 0 0-4.792.984-7.392-1.184-2.608-2.168-3.944 0-3.944 0s-4.464 5.696-.024 7.424c4.448 1.736 11.376 2.544 11.376 2.544.64 3.032 2.488 8.192 7.904 12.296 8.128 6.176 23.72-.568 23.72-.568l6.392-3.584s.216 5.864 4.88 6.72c4.656.856 6.608-.016 14.736-19.736 4.768-10.08 5.096-9.536 5.096-9.536.536-.112-3.144 19.176-1.736 24.376 1.408 5.208 7.584 4.664 7.584 4.664s3.36.648 6.072-8.888c2.704-9.536 7.912-20.048 7.912-20.048.64 0-1.632 19.72 1.832 26.008 3.472 6.288 12.464 2.112 12.464 2.112s6.288-3.168 7.264-4.144c0 0 7.456 6.352 17.976 5.2 23.52-4.632 31.888-10.888 31.888-10.888s4.04 10.24 16.56 11.192c14.296 1.08 22.104-7.912 22.104-7.912s-.112 5.848 4.872 7.912c4.992 2.056 8.344-9.52 8.344-9.52l8.344-22.992c.76 0 1.192 14.952 9.432 17.336 8.232 2.384 18.96-5.584 18.96-5.584s2.6-1.432 2.168-5.768c-.44-4.336-4.336-2.72-4.336-2.72zM36.93 57.728c2.92 2.816 1.84 8.88-3.687 12.672-5.52 3.8-8.016 3.04-8.016 3.04.328-12.896 8.784-18.536 11.704-15.712zm107.817-44.536c1.84 9.752-16.144 38.792-16.144 38.792.216-6.504 6.608-28.496 6.608-28.496s7.688-20.048 9.536-10.296zM126.97 87.2s-1.408-4.768 2.6-18.096c4.016-13.328 13.44-8.128 13.44-8.128s6.504 4.984 1.408 18.312C139.33 92.616 126.97 87.2 126.97 87.2zm54.832-26.112c4.44-8.128 7.912-3.688 7.912-3.688s3.792 4.12-.544 10.296c-4.336 6.176-10.616 5.744-10.616 5.744s-1.192-4.232 3.248-12.352z"/><path d="M226.028 93.977v-1.555h.986c.137 0 .274.015.418.03.144.02.28.057.396.107.122.05.216.122.288.216.079.094.115.223.115.382 0 .36-.108.59-.324.684-.216.093-.497.136-.835.136h-1.044zm-1.174-2.47v5.92h1.174v-2.528h.734l1.44 2.527h1.231l-1.584-2.585a2.8 2.8 0 0 0 .612-.13c.187-.064.353-.158.49-.28.144-.122.252-.28.331-.475.086-.195.122-.425.122-.699 0-.64-.201-1.094-.597-1.353-.403-.267-.98-.396-1.72-.396h-2.233zm-1.88 2.967c0-.605.102-1.159.31-1.663.21-.504.49-.936.85-1.303a3.853 3.853 0 0 1 1.26-.864 3.93 3.93 0 0 1 1.562-.31c.548 0 1.066.101 1.548.31.49.209.908.497 1.268.864s.64.8.856 1.303c.21.504.317 1.058.317 1.663s-.108 1.16-.317 1.67c-.216.505-.496.951-.856 1.318-.36.375-.778.663-1.268.871-.482.21-1 .31-1.548.31a3.93 3.93 0 0 1-1.562-.31 3.765 3.765 0 0 1-1.26-.87 4.109 4.109 0 0 1-.85-1.318 4.366 4.366 0 0 1-.31-1.67zm-1.446 0c0 .814.15 1.541.446 2.19.302.654.698 1.209 1.195 1.67.504.46 1.08.813 1.735 1.058.656.245 1.34.367 2.052.367.72 0 1.404-.122 2.06-.367a5.282 5.282 0 0 0 1.735-1.059 5.234 5.234 0 0 0 1.195-1.67c.295-.648.44-1.375.44-2.189 0-.799-.145-1.526-.44-2.174a5.125 5.125 0 0 0-2.93-2.722 5.675 5.675 0 0 0-2.06-.374c-.712 0-1.396.122-2.052.374a5.125 5.125 0 0 0-2.93 2.722c-.295.648-.446 1.375-.446 2.174z"/></g></svg>
    </a>
    <button id="ember400355" class="navbar-toggler collapsed ember-view">  <span class="navbar-toggler-icon"></span>
</button>
<div id="ember400356" class="navbar-collapse collapse ember-view"><ul id="ember400357" class="mr-auto nav navbar-nav ember-view"><!----><li id="ember400358" class="dropdown nav-item ember-view">              <a href="#" id="ember400359" class="dropdown-toggle nav-link ember-view" role="button">Docs <span class="caret"></span></a>
<!---- >
</li>
<! ----><li id="ember400361" class="dropdown nav-item ember-view">              <a href="#" id="ember400362" class="dropdown-toggle nav-link ember-view" role="button">Releases <span class="caret"></span></a>
<!---- >
</li>
<li id="ember400364" class="nav-item ember-view">              <a href="https://emberjs.com/blog" class="nav-link">Blog</a>

</li><!---->
<! ----><li id="ember400365" class="dropdown nav-item ember-view">              <a href="#" id="ember400366" class="dropdown-toggle nav-link ember-view" role="button">Community <span class="caret"></span></a>
<!---- >
</li>
<! ----><li id="ember400368" class="dropdown nav-item ember-view">              <a href="#" id="ember400369" class="dropdown-toggle nav-link ember-view" role="button">About <span class="caret"></span></a>
<!---- >
</li>

</ul><ul id="ember400371" class="nav navbar-nav ember-view">              <form>
      <div id="ember400372" class="search-input ember-view">  <input id="search-input" placeholder="Search the guides" autocomplete="off" type="search">

<div id="ember400373" class="ds-dropdown-results ember-tether ember-view"><!----></div></div>
    </form>


</ul>
</div>
</nav></div>

</div>

</header>
<!---- >
  <div class="info-banner-wrapper">
    <div class="info-banner-container">
      <div id="ember400374" class="ember-view"><p>Ember Octane is here!  A lot has changed since Ember 3.14, including these Guides.  Read more in the <a href="https://blog.emberjs.com/2019/12/20/octane-is-here.html">Ember Blog</a>.</p>
</div>
    </div>
  </div>


<main class="container">
  <aside class="sidebar">
  <label for="version-select" class="visually-hidden">Guides version</label>

<div id="ember400375" class="ember-basic-dropdown ember-view">
<div aria-label="v3.7.0" aria-owns="ember-basic-dropdown-content-ember400375" tabindex="0" data-ebd-id="ember400375-trigger" role="button" id="ember400376" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-basic-dropdown-trigger--in-place ember-view">    <span class="ember-power-select-selected-item">            3.7 <!---- >

</span>
<! ----><span class="ember-power-select-status-icon"></span>
</div>
  <div id="ember-basic-dropdown-content-ember400375" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>

</div>

  <input id="toc-toggle" class="toc-toggle visually-hidden" type="checkbox">
  <label for="toc-toggle">Table of Contents <span class="visually-hidden">toggle</span></label>

  <nav class="toc-container versions" aria-label="table of contents">
    <ol id="ember400380" class="toc-level-0 ember-view"><!---->      <li class="toc-group toc-level-0">
<div id="ember400383" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/getting-started" id="ember400384" class="cp-Panel-toggle ember-view">              Getting Started
</a>
<div id="ember400385" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400387" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/tutorial" id="ember400388" class="cp-Panel-toggle ember-view">              Tutorial
</a>
<div id="ember400389" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400391" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/object-model" id="ember400392" class="cp-Panel-toggle ember-view">              The Object Model
</a>
<div id="ember400393" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400395" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/templates" id="ember400396" class="cp-Panel-toggle ember-view">              Templating
</a>
<div id="ember400397" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400399" class="cp-Panel cp-is-open ember-view"><a href="/v3.7.0/components" id="ember400400" class="cp-Panel-toggle ember-view">              Components
</a>
<div id="ember400401" class="cp-Panel-body cp-is-open ember-view">
    <div class="cp-Panel-body-inner">
                  <ol id="ember400402" class="toc-level-1 ember-view">      <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/defining-a-component" id="ember400404" class="ember-view">          Defining a Component
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/the-component-lifecycle" id="ember400406" class="ember-view">          The Component Lifecycle
</a>      </li>
          <li class="toc-link toc-level-1 selected">
<a href="/v3.7.0/components/passing-properties-to-a-component" id="ember400408" class="selected ember-view">          Passing Properties to a Component
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/wrapping-content-in-a-component" id="ember400410" class="ember-view">          Wrapping Content in a Component
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/customizing-a-components-element" id="ember400412" class="ember-view">          Customizing a Component's Element
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/block-params" id="ember400414" class="ember-view">          Using Block Params
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/handling-events" id="ember400416" class="ember-view">          Handling Events
</a>      </li>
          <li class="toc-link toc-level-1 ">
<a href="/v3.7.0/components/triggering-changes-with-actions" id="ember400418" class="ember-view">          Triggering Changes with Actions
</a>      </li>
    </ol>

    </div>

</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400420" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/controllers" id="ember400421" class="cp-Panel-toggle ember-view">              Controllers
</a>
<div id="ember400422" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400424" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/routing" id="ember400425" class="cp-Panel-toggle ember-view">              Routing
</a>
<div id="ember400426" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400428" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/models" id="ember400429" class="cp-Panel-toggle ember-view">              Ember Data
</a>
<div id="ember400430" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400432" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/addons-and-dependencies" id="ember400433" class="cp-Panel-toggle ember-view">              Addons and Dependencies
</a>
<div id="ember400434" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400436" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/testing" id="ember400437" class="cp-Panel-toggle ember-view">              Testing
</a>
<div id="ember400438" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400440" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/configuring-ember" id="ember400441" class="cp-Panel-toggle ember-view">              Configuration
</a>
<div id="ember400442" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400444" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/applications" id="ember400445" class="cp-Panel-toggle ember-view">              Application Concerns
</a>
<div id="ember400446" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400448" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/ember-inspector" id="ember400449" class="cp-Panel-toggle ember-view">              Ember Inspector
</a>
<div id="ember400450" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400452" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/contributing" id="ember400453" class="cp-Panel-toggle ember-view">              Contributing to Ember.js
</a>
<div id="ember400454" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400456" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/glossary" id="ember400457" class="cp-Panel-toggle ember-view">              Glossary
</a>
<div id="ember400458" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
      <li class="toc-group toc-level-0">
<div id="ember400460" class="cp-Panel cp-is-closed ember-view"><a href="/v3.7.0/reference" id="ember400461" class="cp-Panel-toggle ember-view">              Reference
</a>
<div id="ember400462" class="cp-Panel-body ember-view">
<!---- >
</div>
</div>      </li>
</ol>
  </nav>

</aside>

<article id="ember400463" class="chapter ember-view">  <div class="old-version-warning">
    <i class="icon-attention-circled"></i><strong>Old Guides - </strong>You are viewing the guides for Ember v3.7.0. 

    <a href="/release/components/passing-properties-to-a-component" id="ember400464" class="btn ember-view"> VIEW v3.15.0 </a>
  </div>

  <a href="https://github.com/ember-learn/guides-source/edit/master/guides/v3.7.0/components/passing-properties-to-a-component.md" target="_blank" class="edit-page icon-pencil" rel="noopener">
    Edit Page
  </a>

<h1>
  Passing Properties to a Component
</h1>
<hr>

<div id="ember400465" class="ember-view"><p>Components are isolated from their surroundings, so any data that the component
needs has to be passed in.</p>
<p>For example, imagine you have a <code>BlogPost</code> component that is used to
display a blog post:</p>
<pre><code class="handlebars language-handlebars"data-filename=app/templates/components/blog-post.hbs>&lt;article class="blog-post"&gt;
  &lt;h1&gt;{{this.title}}&lt;/h1&gt;
  &lt;p&gt;{{this.body}}&lt;/p&gt;
&lt;/article&gt;
</code></pre>
<p>Now imagine we have the following template and route:</p>
<pre><code class="javascript language-javascript"data-filename=app/routes/index.js>import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.store.findAll('post');
  }
});
</code></pre>
<p>If we tried to use the component like this:</p>
<pre><code class="handlebars language-handlebars"data-filename=app/templates/index.hbs>{{#each this.model as |post|}}
  &lt;BlogPost /&gt;
{{/each}}
</code></pre>
<p>The following HTML would be rendered:</p>
<pre><code class="html language-html">&lt;article class="blog-post"&gt;
  &lt;h1&gt;&lt;/h1&gt;
  &lt;p&gt;&lt;/p&gt;
&lt;/article&gt;
</code></pre>
<p>In order to make a property available to a component, you must pass it
in like this:</p>
<pre><code class="handlebars language-handlebars"data-filename=app/templates/index.hbs>{{#each this.model as |post|}}
  &lt;BlogPost @title={{post.title}} @body={{post.body}} /&gt;
{{/each}}
</code></pre>
<p>It is important to note that these properties stay in sync (technically
known as being "bound").  That is, if the value of <code>componentProperty</code>
changes in the component, <code>outerProperty</code> will be updated to reflect that
change.  The reverse is true as well.</p>
<p>In addition to making properties available, actions can be made available
to components.  This allows data to flow back up to its parent.  You pass actions
like this.</p>
<pre><code class="handlebars language-handlebars"data-filename=app/templates/index.hbs>  &lt;ButtonWithConfirmation
    @text="Click here to unsubscribe." 
    @onConfirm={{action "unsubscribe"}}
  /&gt;
</code></pre>
<p>It is important to note that actions can only be passed from a controller or another
component.  They cannot be passed from a route.  See <a href="../triggering-changes-with-actions/#toc_passing-the-action-to-the-component">passing an action to the component</a>
for more details on how to pass actions.</p>
<h2 id="toc_positional-params">Positional Params</h2>
<section aria-labelledby="toc_positional-params">
<p><em><strong>Note:</strong> Positional params are only supported with the classic invocation syntax.  To learn more, see the <a href="../../reference/syntax-conversion-guide/">Syntax Conversion Guide</a>.</em></p>
<p>In addition to passing parameters in by name, you can pass them in by position. 
In other words, you can invoke the above component example like this:</p>
<pre><code class="handlebars language-handlebars"data-filename=app/templates/index.hbs>{{#each this.model as |post|}}
  {{blog-post post.title post.body}}
{{/each}}
</code></pre>
<p>To set the component up to receive parameters this way, you need to
set the <a href="https://api.emberjs.com/ember/3.7/classes/Component/properties/positionalParams?anchor=positionalParams"><code>positionalParams</code></a> attribute in your component class.</p>
<pre><code class="javascript language-javascript"data-filename=app/components/blog-post.js>import Component from '@ember/component';

export default Component.extend({}).reopenClass({
  positionalParams: ['title', 'body']
});
</code></pre>
<p>Then you can use the attributes in the component exactly as if they had been
passed in like <code>&lt;BlogPost @title={{post.title}} @body={{post.body}} /&gt;</code>.</p>
<p>Notice that the <code>positionalParams</code> property is added to the class as a
static variable via <code>reopenClass</code>.  Positional params are always declared on
the component class and cannot be changed while an application runs.</p>
<p>Alternatively, you can accept an arbitrary number of parameters by
setting <code>positionalParams</code> to a string, e.g. <code>positionalParams: 'params'</code>.  This
will allow you to access those params as an array like so:</p>
<pre><code class="javascript language-javascript"data-filename=app/components/blog-post.js>import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  title: computed('params.[]',  function(){
    return this.params[0];
  }),
  body: computed('params.[]',  function(){
    return this.params[1];
  })
}).reopenClass({
  positionalParams: 'params'
});
</code></pre>
<!--  eof - needed for pages that end in a code block  -->
</section>
</div>

<footer id="ember400466" class="ember-view">  <a href="/v3.7.0/components/the-component-lifecycle" id="ember400467" class="previous-guide ember-view">The Component Lifecycle</a>

<a href="/v3.7.0/components/wrapping-content-in-a-component" id="ember400468" class="next-guide ember-view">      Wrapping Content in a Component
    </a></footer>
</article>


</main>

<footer id="ember400469" class="es-footer ember-view" role="contentinfo"><div class="footer responsive">
  <div class="container">

    


      <div id="ember400470" class="footer-info ember-view">
Copyright 2020
    <a href="http://tilde.io">Tilde Inc.</a>
      <br>
    <a href="https://emberjs.com/team">Team</a>
      |
        <a href="https://emberjs.com/sponsors">Sponsors</a>
      <br>
    <a href="https://emberjs.com/security">Security</a>
      |
        <a href="https://emberjs.com/legal">Legal</a>
      |
        <a href="https://emberjs.com/brand">Brand</a>
      <br>
    <a href="https://emberjs.com/guidelines">Community Guidelines</a>
<! ----></div>
      <div id="ember400471" class="footer-statement ember-view">
  <p class="footer-tagline">Ember.js is free, open source and always will be.</p>
  <div class="footer-social">
      <a href="http://twitter.com/emberjs" title="Twitter">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M939.5 227.941q-37 54-90 93v23q0 73-21 145t-64 139q-43 67-103 117t-144 82q-84 32-181 30-151 0-276-81 19 2 43 2 126 0 224-77-59-1-105-36t-64-89q19 3 34 3 24 0 48-6-63-13-104-62t-41-115v-2q38 21 82 23-37-25-59-64t-22-86q0-49 25-91 68 83 164 133t208 55q-5-21-5-41 0-75 53-127t127-53q79 0 132 57 61-12 115-44-21 64-80 100 52-6 104-28z"/></svg>
      </a>
      <a href="https://github.com/emberjs/ember.js" title="GitHub">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M392 643q0 22-7 45t-24 43q-17 20-40 19t-41-19q-18-18-24-43t-7-45q-1-20 7-46t24-43q16-17 41-19t40 19q15 21 24 43t7 46zm357 0q0 22-7 45t-24 43q-17 20-40 19t-41-19q-18-18-24-43t-7-45q-1-20 7-46t24-43q16-17 41-19t40 19q15 21 24 43t7 46zm90 0q0-67-39-114t-104-47q-23 0-109 12-40 6-88 6t-87-6q-85-12-109-12-66 0-104 47t-39 114q0 49 18 85t45 58q27 22 68 33t78 17q37 6 83 4h94q46 0 83-4t78-17q41-13 69-33t45-58q17-38 18-85zm125-99q0 116-34 185-22 43-59 74t-79 48q-42 17-95 27t-96 12q-43 2-93 3-43 0-79-2t-82-7q-46-5-85-17t-77-29q-38-17-67-45t-48-64q-35-69-35-185 0-132 76-221-15-45-15-95 0-64 28-121 61 0 106 22t106 69q82-20 172-20 83 0 157 18 58-46 104-67t105-22q29 57 29 121 0 49-15 94 76 89 76 222z"/></svg>
      </a>
      <a href="https://discordapp.com/invite/zT3asNS" title="Discord">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240"><path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.5 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
      </a>
  </div>
</div>
      <div id="ember400472" class="footer-contributions ember-view">
    <div class="contributor">
      <p>Hosted by:</p>
      <a href="https://www.heroku.com/emberjs">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.5 80.5" class="contributor-logo"><defs><style>.cls-1{fill:#999}</style></defs><path class="cls-1" d="M65.05.25H7.45a7.2 7.2 0 0 0-7.2 7.2v65.6a7.2 7.2 0 0 0 7.2 7.2h57.6a7.2 7.2 0 0 0 7.2-7.2V7.45a7.2 7.2 0 0 0-7.2-7.2zm-46.8 68v-16l9 8zm28 0V44.36c0-1.87-.94-4.11-5-4.11-8.13 0-17.26 4.09-17.35 4.13l-5.65 2.56V12.25h8V35a50.63 50.63 0 0 1 15-2.71c4.94 0 7.9 1.94 9.52 3.57a12.48 12.48 0 0 1 3.48 8.43v24zm2-43h-8a31.1 31.1 0 0 0 6-13h8a23.44 23.44 0 0 1-6 13z" id="black"/></svg>
      </a>
    </div>
    <div class="contributor">
      <p>CDN provided by:</p>
      <a href="https://www.fastly.com">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1626 640" class="contributor-logo"><defs><style>.cls-1{fill:#999}</style></defs><path class="cls-1" d="M1105.2 71.3v421.1h126.4v-64.3h-41.8V7.2h-84.7l.1 64.1zM6.9 428.1h43V224.9h-43V169l43-7.1v-56.6c0-68.5 14.9-98.2 102.3-98.2 18.9 0 41.2 2.8 60.8 6.3l-11.6 68.9c-13.3-2.1-19.8-2.5-28.2-2.5-30.8 0-38.6 3.1-38.6 33.1V162h63.9v62.9h-63.9V428h42.5v64.3H6.9zM1062.1 407.7c-13.2 2.8-24.8 2.5-33.2 2.7-34.8.9-31.8-10.6-31.8-43.5v-142h66.3V162H997V7.2h-84.7v377.3c0 74.1 18.3 107.9 98 107.9 18.9 0 44.8-4.9 64.4-9zM1588.2 428.4a32 32 0 1 1-32.1 32 31.95 31.95 0 0 1 32.1-32m0 58.9a26.75 26.75 0 1 0 0-53.5 26.75 26.75 0 0 0 0 53.5m5.9-11.2l-6.5-9.5h-4.5v9.5h-7.2v-31.4h13.1c7.8 0 12.6 3.9 12.6 10.9 0 5.1-2.6 8.6-6.6 9.8l7.8 10.8h-8.7zm-10.9-15.8h5.7c3.3 0 5.5-1.3 5.5-4.7s-2.2-4.6-5.3-4.6h-5.9v9.3zM806.6 224.8v-11.3c-25.6-4.7-51.1-4.7-64.9-4.7-39.4 0-44.2 20.9-44.2 32.2 0 16 5.5 24.7 48.2 34 62.4 14 125.1 28.6 125.1 106 0 73.4-37.8 111.3-117.3 111.3-53.2 0-104.8-11.4-144.2-21.4v-63.2h64.1v11.2c27.6 5.3 56.5 4.8 71.6 4.8 42 0 48.8-22.6 48.8-34.6 0-16.7-12.1-24.7-51.5-32.7-74.2-12.7-133.2-38-133.2-113.5 0-71.4 47.7-99.4 127.3-99.4 53.9 0 94.8 8.4 134.2 18.4v62.8h-64zM416.9 280.4l-6.4-6.4-32.7 28.5a15.53 15.53 0 0 0-5.3-.9 16.4 16.4 0 1 0 16 16.4 19.32 19.32 0 0 0-.7-4.9z"/><path class="cls-1" d="M546.6 407.7l-.1-263.6h-84.7v24.7a173.6 173.6 0 0 0-57.6-21.8h.5v-29.2H415V96.3h-85.3v21.5H340V147h.6A174.1 174.1 0 1 0 462 467.4l15.3 24.9h89.5v-84.7h-20.2zm-169.1-.1v-10h-10.1v9.9a89.59 89.59 0 0 1-84.2-84.7h10.1v-10.1h-10a89.55 89.55 0 0 1 84.1-84v10h10.1v-10a89.67 89.67 0 0 1 84.4 81.5v2.9h-10.2v10.1h10.2v2.8a89.6 89.6 0 0 1-84.4 81.6zM1446 162h174.7v62.9h-41.8l-107.1 263.6c-30.7 74-81.1 143.7-157.9 143.7-18.9 0-44-2.1-61.5-6.3l7.7-76.9a218.08 218.08 0 0 0 33.5 3.5c35.6 0 75.8-22.1 88.4-60.5l-108.6-267.1h-41.8V162h174.8v62.9h-41.7l61.5 151.3 61.5-151.3H1446z"/></svg>
      </a>
    </div>
    <div class="contributor">
      <p>Tested with:</p>
      <a href="https://percy.io">
        <svg viewBox="0 0 423 125" fill="none" xmlns="http://www.w3.org/2000/svg" class="contributor-logo"><path fill-rule="evenodd" clip-rule="evenodd" d="M400.648 112.355c-.232.748-.608 1.273-1.127 1.568l-.15.076c-.562.234-1.163.2-1.871.023-2.286-.574-12.884-1.789-8.645-14.407l2.514-7.485-.57-1.455-2.755-6.677-17.26-40.878c-.38-.848-.242-1.62.097-2.147.351-.549.971-.826 1.846-.842h9.821c.673 0 1.245.185 1.684.53.44.348.762.878 1.035 1.531l12.67 30.214 9.088-30.13c.195-.72.54-1.268 1.004-1.632.455-.355 1.037-.532 1.716-.532h10.487c.89 0 1.522.257 1.894.738.372.499.422 1.22.146 2.149l-14.103 45.12-5.44 17.506-2.081 6.73zM359.293 71.74h10.723c1.657 0 2.632 1.076 2.047 2.74-3.022 10.177-12.575 17.223-23.981 17.223-14.817 0-25.831-11.255-25.831-25.835s11.014-25.833 25.831-25.833c11.406 0 20.959 7.045 23.981 17.222.585 1.663-.39 2.74-2.047 2.74h-10.723c-1.268 0-2.145-.587-2.925-1.663-1.754-2.446-4.776-3.817-8.286-3.817-6.335 0-11.21 4.6-11.21 11.351 0 6.753 4.875 11.352 11.21 11.352 3.51 0 6.532-1.37 8.286-3.718.78-1.175 1.559-1.762 2.925-1.762zm-52.512-29.06v2.55c1.212-2.158 3.978-5.221 11.198-5.123.524.006.945.206 1.255.53.455.474.673 1.115.673 1.943v11.96c0 .812-.169 1.42-.522 1.826-.337.404-.842.608-1.497.608-1.431-.05-2.794.1-4.124.455a9.778 9.778 0 0 0-3.551 1.791c-1.043.845-1.881 1.98-2.49 3.362-.619 1.404-.933 3.108-.942 5.136l-.069 12.755c-.072 13.321-10.191 11.303-12.553 11.166-.806-.046-1.432-.219-1.868-.658-.438-.44-.657-1.065-.657-1.875V42.68c0-.81.219-1.436.657-1.875.437-.44 1.061-.658 1.868-.658h10.097c.807 0 1.431.219 1.868.658.438.44.657 1.064.657 1.875zm-43.748-2.622c3.564.017 6.835.666 9.816 1.951a23.428 23.428 0 0 1 7.758 5.398c2.185 2.326 3.886 5.04 5.085 8.161 1.198 3.122 1.814 6.536 1.83 10.243 0 .634-.016 1.252-.065 1.838a65.191 65.191 0 0 1-.129 1.772c-.097.78-.389 1.348-.842 1.707-.454.358-1.053.536-1.782.536h-32.457c.615 1.919 1.474 3.479 2.607 4.682a10.428 10.428 0 0 0 3.952 2.602c1.507.552 3.11.812 4.811.812 1.376-.016 2.704-.227 3.968-.665 1.247-.44 2.332-1.026 3.223-1.773.47-.39.94-.7 1.393-.927.47-.227 1.004-.341 1.619-.341l9.329-.097c.892.016 1.539.276 1.928.78.372.504.388 1.154.016 1.95-1.279 2.83-2.981 5.203-5.102 7.106-2.122 1.918-4.584 3.348-7.386 4.325-2.801.958-5.862 1.447-9.182 1.447-4.05-.018-7.694-.683-10.933-1.985-3.255-1.3-6.025-3.104-8.324-5.446-2.317-2.324-4.082-5.057-5.313-8.161-1.23-3.122-1.847-6.504-1.863-10.162.016-3.658.649-7.04 1.912-10.16 1.263-3.107 3.044-5.838 5.36-8.163 2.301-2.34 5.054-4.146 8.228-5.446 3.175-1.3 6.689-1.967 10.543-1.984zm-68.18 5.316a22.761 22.761 0 0 1 6.533-3.865 21.372 21.372 0 0 1 7.61-1.408c6.452 0 12.76 2.895 16.989 7.575 4.223 4.673 6.836 11.128 6.836 18.253s-2.613 13.579-6.836 18.252c-4.23 4.679-10.537 7.575-16.989 7.575-4.725 0-9.683-1.492-13.137-4.816l.01 15.843c.008 13.321-10.192 11.302-12.554 11.166-.803-.046-1.432-.221-1.868-.66-.436-.437-.656-1.066-.656-1.874l-.032-68.665c0-.826.224-1.477.674-1.928.449-.451 1.094-.677 1.92-.677h8.871c.827 0 1.472.226 1.92.677.45.45.665 1.095.675 1.928l.033 2.624zm25.217 20.418c0-6.283-5.041-11.377-11.26-11.377-6.22 0-11.26 5.094-11.26 11.377 0 6.285 5.04 11.379 11.26 11.379 6.219 0 11.26-5.094 11.26-11.379zm36.016-10.825c-1.83 1.268-3.126 3.138-3.887 5.577h20.811c-.518-1.838-1.295-3.317-2.333-4.422a9.086 9.086 0 0 0-3.562-2.374 11.773 11.773 0 0 0-4.178-.716c-2.738.017-5.038.651-6.85 1.935zM153.654 30.725a5.164 5.164 0 0 0-4.903-3.74 5.184 5.184 0 0 0-1.999.362 22.04 22.04 0 0 1-7.383 1.483c-6.346-4.758-21.736-16.252-30.872-22.71 0 0 1.23 3.765 2.897 10.788 0 0-14.478-8.459-24.102-14.931 0 0 3.508 7.442 3.768 9.837 0 0-11.542-2.188-28.406-6.126 0 0 12.47 7.214 15.497 11.48 0 0-15.13-1.284-32.951-2.61 0 0 8.963 4.708 13.31 8.46 0 0-16.213 2.082-28.542 2.466 0 0 9.013 7.263 12.64 10.768 0 0-15.487 5.773-34.041 16.062 0 0 9.67.646 16.611 2.98 0 0-8.546 7.246-23.882 23.932 0 0 9.664-.186 17.475-1.098 0 0-6.266 9.29-14.148 26.035 0 0 5.261-3.185 10.322-4.283 0 0 .21 18.955 10.641 22.173l.01-.012c.51.17.999.234 1.424.241a5.854 5.854 0 0 0 1.595-.204c3.343-.883 5.918-4.082 8.898-7.787h.001c.976-1.213 1.978-2.458 3.041-3.671a25.118 25.118 0 0 1 4.595-4.737c3.758-2.955 8.926-5.15 15.158-4.127 7.023.709 11.247 7.71 14.643 13.339 2.567 4.256 4.595 7.617 7.501 7.987.204.025.408.04.606.043 4.45.078 6.104-5.028 8.198-11.493v-.002l.428-1.32.054.109c1.557-5.232 4.498-10.85 8.064-15.903 4.844-6.865 11.038-12.967 16.931-15.749l.015.03c3.204-1.762 6.574-3.42 9.895-5.054l.003-.002c10.295-5.064 20.018-9.848 24.983-17.277 2.483-3.716 3.762-8.306 3.802-13.644.035-4.788-.947-9.22-1.777-12.095zM110.69 86.593c-2.961 2.678-5.868 6.012-8.437 9.652-4.237 6.006-7.395 12.617-8.389 18.136 2.79 4.723 5.332 7.065 7.742 7.146l.076.001c2.217.039 3.704-1.408 4.422-4.3.536-2.158.694-5.134.878-8.58v-.004c.333-6.28.766-14.373 3.708-22.051zm-68.51 27.086l-.032-.084a21.944 21.944 0 0 1 4.857-5.354c3.071-2.414 7.087-4.161 11.896-3.649a133.762 133.762 0 0 1-1.91 4.6c-2.371 5.407-5.193 10.988-8.14 11.396a3.457 3.457 0 0 1-.527.032c-2.302-.04-4.311-2.31-6.143-6.941zm59.08-88.187L88.55 17.127l21.058 7.834-8.348.53zm-35.4 3.097l20.265 5.502 8.926-2.757-29.19-2.745zm36.116 10.72l4.4-3.177-16.858 2.5 12.458.676zm-28.803-.503l-7.042 4.488-19.263-2.153 26.305-2.335zm21.54 11.899l7.13-3.782-26.304 2.336 19.174 1.446zM75.185 54.7l-5.062 7.91-24.738 5.525 29.8-13.435zm-30.864 4.385L25.105 67.05l23.7-16.185-4.484 8.221zm-10.605 9.767l-.897 8.287-11.187 13.38 12.084-21.667z" fill="#3F3A40"/></svg>
      </a>
    </div>
    <div class="contributor">
      <p>Resolved with:</p>
      <a href="https://dnsimple.com/resolving/emberjs">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613.33331 160" height="60" width="100" class="contributor-logo"><defs><clipPath id="a"><path d="M568.809 1050.45c-20.801 0-41.598-1.1-61.301-5.48V841.367c-28.461 10.946-61.301 16.418-105.086 16.418C246.98 857.785 120 751.605 120 580.84c0-175.145 116.031-271.477 286.801-271.477 84.285 0 170.765 22.989 224.402 51.45v684.157c-20.801 4.38-42.691 5.48-62.394 5.48zm-164.2-632.716c-94.14 0-158.722 63.493-158.722 165.293 0 100.707 68.961 165.293 160.914 165.293 37.215 0 71.152-4.379 100.707-22.988V434.156c-32.84-12.043-66.774-17.515-102.899-16.422zm611.911 442.243c-111.653 0-202.512-43.789-248.485-82.102v-452.09c20.797-4.379 41.598-5.472 61.301-5.472 20.797 0 42.691 1.093 62.394 5.472v391.887c24.083 14.23 66.774 28.461 114.94 28.461 79.91 0 125.88-36.125 125.88-131.36V325.785c21.9-4.379 41.6-5.472 62.4-5.472 19.7 0 41.6 1.093 62.39 5.472v318.543c0 119.317-73.34 215.649-240.82 215.649zm554.99-551.707c142.3 0 225.5 65.679 225.5 174.05 0 102.899-82.1 141.211-194.85 158.723-88.67 14.23-111.66 30.652-111.66 64.586 0 32.84 28.46 53.637 94.14 53.637 62.4 0 116.04-18.61 152.16-39.407 25.18 19.704 41.6 50.356 47.07 88.668-33.93 24.082-100.71 50.352-194.85 50.352-131.36 0-217.83-65.676-217.83-162.008 0-109.465 87.57-143.398 179.52-157.629 93.05-14.23 122.6-33.933 122.6-68.965 0-35.027-26.27-62.394-99.61-62.394-82.1 0-128.07 28.461-159.82 51.449-26.27-16.418-47.07-45.977-56.92-85.383 29.55-25.176 98.52-65.679 214.55-65.679zm398.45 614.101c42.69 0 78.82 35.027 78.82 78.809 0 43.79-36.13 78.82-78.82 78.82-44.88 0-81-35.03-81-78.82 0-43.782 36.12-78.809 81-78.809zm0-602.058c20.8 0 41.6 1.093 61.3 5.472v517.77c-19.7 4.379-41.59 5.472-61.3 5.472-20.8 0-41.59-1.093-62.39-5.472v-517.77c20.8-4.379 42.69-5.472 62.39-5.472zm791.43 539.664c-70.05 0-133.54-27.368-176.23-60.207-38.32 37.218-95.24 60.207-169.68 60.207-108.36 0-202.5-45.977-244.1-82.102v-452.09c20.8-4.379 41.6-5.472 61.3-5.472 20.8 0 42.69 1.093 62.39 5.472v391.887c27.37 16.418 65.68 28.461 106.18 28.461 84.29 0 116.04-53.641 116.04-128.074V325.785c20.8-4.379 41.6-5.472 63.49-5.472 19.7 0 41.6 1.093 61.3 5.472v329.488c0 16.422-2.19 32.84-5.47 48.168 25.17 20.797 60.2 42.692 110.55 42.692 84.29 0 117.13-53.641 117.13-128.074V325.785c19.71-4.379 40.51-5.472 62.4-5.472 19.7 0 41.6 1.093 61.3 5.472v329.488c0 112.75-76.63 204.704-226.6 204.704zm591.12-1.098c-98.52 0-180.62-38.313-230.97-79.91V123.273c21.89-4.378 41.59-5.472 62.39-5.472 20.8 0 41.6 1.094 61.3 5.472v201.418c32.84-10.949 67.87-15.328 111.66-15.328 144.49 0 274.75 101.805 274.75 276.95 0 179.523-120.41 272.566-279.13 272.566zm-4.38-438.953c-40.5 0-73.34 6.566-102.9 20.797v279.136c31.75 17.516 65.68 25.176 101.81 25.176 95.23 0 159.82-60.203 159.82-159.816 0-102.899-64.59-165.293-158.73-165.293zm458.66-99.613c20.8 0 42.69 1.093 62.39 5.472v718.095c-20.79 4.37-42.69 5.47-63.48 5.47-20.81 0-41.6-1.1-61.31-5.47V325.785c21.9-4.379 42.7-5.472 62.4-5.472zM4480 624.625c0 139.02-98.52 234.254-237.54 234.254-147.78 0-260.53-116.031-260.53-276.945 0-169.672 111.66-272.571 267.1-272.571 103.99 0 171.86 38.313 215.65 73.344-4.38 31.746-26.28 66.773-53.64 84.289-33.94-24.082-77.72-53.641-153.25-53.641-86.48 0-139.02 52.543-148.88 137.926h366.71c3.29 28.461 4.38 45.977 4.38 73.344zm-369.99 8.758c8.76 71.152 55.83 124.789 132.45 124.789 84.29-1.094 116.03-63.488 116.03-124.789z" clip-rule="evenodd"/></clipPath><clipPath id="b"><path d="M0 0h4600v1200H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.13333 0 0 -.13333 0 160)"><g clip-path="url(#b)"><path d="M20 17.8h4560V1180H20z"/></g></g></svg>
      </a>
    </div>
</div>


  </div>
</div>
</footer>
<script type="x/boundary" id="fastboot-body-end"></script>

    <script src="/assets/vendor-43f2851966bb68f3f8b11728eabc662f.js"></script>
    <script src="/assets/ember-guides-282695ea5f03fe0586ac6b0c02eff6f2.js"></script>

    
  </body>
</html>
