x-button

The button component, we’ll keep pretty simple: it’s just a button element with a given label and an action bound to it:

<button class={{@buttonClass}} type='button' {{action @onClick}}>
  {{@label}}
</button>

x-modal

The x-modal has the meat of the implementation.

<div class='modal-backdrop'></div>
<div class='modal'>
  <div class='modal-content'>
    {{yield (hash section=(component 'x-modal-section'))}}
  </div>

  {{#if @button}}
    {{component @button buttonClass='modal-button'}}
  {{/if}}
</div>

The two things two notice here are the yield and the component.

The yield statement yields a hash with one property: section. Yielding a hash is a convenient pattern in general. Here, we’re doing it to make the API nicer for users of this component. It means that if we name the yielded value |modal| when we invoke this, we’ll be able to write modal.section to name this particular yielded item. (You’ll see exactly this below.)

We use the component helper twice: once as the value of the section key in the yielded hash, and once for the button below. In both cases, the helper does the same thing: invokes a component! While the most common way to render a component is with its name, inline—like {{x-modal}}—you can always render it with the component helper and the name as a string: {{component 'x-modal'}}. This lets you render different components dynamically!

Let’s remember our initial analogy: the same way you can pass different functions to a higher-order function like Array.prototype.map, you can pass different components to a higher-order component like our x-modal here. And just like you can return a function from a higher-order function, we can yield a component from a higher-order component. Just like higher-order functions, the function passed in or returned just has to have the right shape.

For example, the argument to Array.prototype.map needs to be a function which performs an operation on a single item in the array (and maybe also the index) and hands back the result of that operation. Similarly, the button argument to our x-modal needs to accept a buttonClass component so that the modal can apply some styling to it. The same thing holds for the component being yielded back out: it has an API you should use to invoke it, just like any other.¹

All of this gets at something really important: you can think of components as just being pure functions: they take some input in the form of arguments, and give you the output of what they render and what they yield—and they always give you the same rendered HTML and the same yielded values for the same inputs. They’re just functions!

x-modal-section

The x-modal-section component is the simplest of all of these: it has no behavior, just some styling to actually chunk up the content:

<div class='modal-section'>
  {{yield}}
</div>

Application controller and template

Now, let’s use in the context of the application template, where we can see how the pieces all fit together. First, let’s see the application controller backing it—nothing unusual here, just a simple toggle to show or hide the modal.²

import Controller from "@ember/controller";
import { action } from "@ember-decorators/object";

export default class Application extends Controller {
  constructor() {
    super(...arguments);
    this.showModal = false;
  }

  @action
  showIt() {
    this.set("showModal", true);
  }

  @action
  hideIt() {
    this.set("showModal", false);
  }
}

Now for the interesting bit—the template where we invoke x-modal and use its higher-order-component functionality:

{{#if showModal}}
  {{#x-modal
      button=(component 'x-button'
        label='Close modal!'
        onClick=(action 'hideIt')
      )
      as |modal|
  }}
    {{#modal.section}}
      Here is some content!
    {{/modal.section}}

    {{#modal.section}}
      Here is some other content.
    {{/modal.section}}

    {{#modal.section}}
      <p>The content can have its own sections, as you'd expect!</p>
      <p>Nothing crazy going on here. Just a normal template!</p>
    {{/modal.section}}
  {{/x-modal}}
{{/if}}

<button class='button' {{action 'showIt'}}>Show modal</button>

<!-- some other content on the page -->

We invoke the block form of x-modal just like we would any block component, and we get back the thing it yields with as |modal|. However, one of the arguments we pass to it is a component. But modal is a hash (an object!) with a property named section, which is the x-modal-section component.

Again, you can think of this like calling a function with one function as an argument and getting another function back as its return value—that returned function being something we could call over and over again once we had it.

Here, we “call the function”—invoke the x-modal component—with component 'x-button' as its argument, and the returned modal.section is a component we can invoke like a normal component.³ We could even pass it into some other component itself if we so desired.

And that’s really all there is to it!