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.
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:
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:
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.