ember.js

Ember.js component multiple yields

Ember components how to pass multiple contents to a components using yield

Slimane amiar

Jun 28, 2022 • 1 min read

When you create a component sometimes you need to passes multiple contents to the component to use in different places , for that we can use multiple yields, let say we have a component called Card

{{!-- components/card.hbs --}}

<div class="deal_card_container">
  <div class="image">
    <img src="{{@image}}" alt="promotion"/>
  </div>
  <div class="title">
    {{yield to='title'}}
  </div>
  <div class="description">
    {{yield to='description'}}
  </div>
</div>

and we use the component as follow

{{!-- templates/application.hbs --}}

<Card @image="http://myimage.link" >
	<:title>
        My card title
    </:title>
    <:description>
       	My card description 
    </:description>
</Card>

Sign up for more like this.