03-parameterized-components.md

Parameterized Components

We can parameterize components (express their output using variables in addition to static expressions) by substituting some of the text in our hardcoded HTML with handlebars expressions (things that look like {{ something }}). Think of this kind of like how we can pass arguments to a function in order to get them to return new values.

// ⚠️️ Pseudocode ⚠️
function renderChannelHeader(args) {
    return
        <header>
            <h3>{{args.title}}</h3>
            <p> {{args.description}}</p>
        </header>
    ;
}

Ember calls values that are passed into a component from the outside world in this fashion “named args”. We can recognize these named args in a template because they always begin with an @ sign.

Parameterizing <ChannelHeader />

The goal of this task is to modify <ChannelHeader /> such that we can pass in a title and description of our choice.

In app/templates/components/channel-header.hbs

1. Find the text general and replace it with {{@title}}
2. Find the text Generally chatting about general things and replace it with {{@description}}

Our component is now parameterized, and ready to receive data!

Syntax breakdown

• The {{double-braces}} indicate that whatever is between them should be evaluated as a handlebars expression
• The @ indicates that title and description are named args, passed into the component from the outside world

Passing in data

You may notice that your component now shows a blank title and description. Instead of rendering hard-coded values, the component now expects to be passed args called @title and @description. Let's pass it some data.

Go to your app/templates/application.hbs and pass some values into the component using key-value pairs:

<ChannelHeader
    @title="compliments"
    @description="Say nice things about your teammates" />

Now, you should see the title and description properly rendered in the channel header.

Completed File

view here