Tutorial: Modal

In the previous section you learned how to build a simple project using Metal.js that just renders Hello World on the screen. Let's enhance what we already have to render a modal dialog instead.

Rendering

Our generated project already includes bootstrap css, so let's use its markup for our modal. Let's update the component's template to do that then:

Passing data

Note that the template is accessing data to determine the content of the modal's header and body. How can the component receive this data though?

One way is through the component's constructor. When creating component instances directly, you can pass them a data object as its first param. So let's update our demo to pass it some data:

Run the demo

Now compile your code with npm run build and open the demo on a browser, and you should be seeing this:

Next steps

We've taken care of the rendering, but you'll notice that clicking the x button doesn't do anything yet though. Let's make that work.

↪ Tutorial: Modal - Events