Components can be set up in block or inline form. When in block form, components can yield information. In this recipe, we'll look at an example of using yield to show information in a template.
$ ember g component student-info
This will create the student component.
student-info
template file and add some text:// app/templates/components/student-info.hbs This is information before the yield<br> {{yield}} This is information after the yield
The {{yield}}
expression in the component will be where the text in the block will be rendered.
student-info
component to the application template file:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{#student-info}} Information in block<br> {{/student-info}}
When in block form, designated by the hash #
, the information in the block will show up in {{yield}}
.
ember server
, the following screen will be displayed:As you can see, the component yield
template displayed the information in the block.