Ember.js Components

Ember.js is an open-source framework used for building modern web apps quickly and easily. It follows the MVC structure for its application. Ember.js also comes with a CLI to manage its configuration. The components in Ember.js allow to reuse of the elements or make the templates reusable. It is a piece of template that can take arguments and put the respective values. For example, we can think of a To-Do app that uses the same component to display the tasks. Each task has a box and some text in it. We can render anything according to the context of our app.

Creating the project: Enter the following command to create a new project.

ember new components-tutorial-gfg

Project Structure: The project structure should look similar as follows.

The app folder structure should look as follows.

Now run the project.

cd components-tutorial-gfg
ember serve

After the project is built successfully, navigate to the URL 

http://localhost:4200/

You should receive the following output.

Example: In this example, We will create a component for our Ember.js app and then display a list of items using the component.

Below is the step by step implementation. 

Step 1: We will be building a single-page app, so all our code will be placed on the app\templates\application.hbs file. We are going to create a To-do application. So our application.hbs file will contain the items to display.

app emplatespplication.hbs

{{page-title 'Ember App'}}
<h1 id='title'>
  Ember App
</h1>
<div id='items'>
</div>
{{outlet}}

Step 2: We will style our code to make it look better and clearly display the tasks.

appstylespp.css

body {
  margin: 2rem;
  background-color: rgb(22, 187, 64);
#title {
  text-align: center;
  color: aliceblue;
}
#items {
  margin: auto;
  width: 80%;
  height: 75vh;
  bottom: 5rem;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
}

Run the above code and you should see similar output as follows.

Step 3: We will display our To-Do tasks using the same component. Ember provides a command to easily create components for our web pages. Run the following command in the terminal to create a task component.

ember generate component task

Wait for the command to generate the files required. After the files are created, navigate to app\components\task.hbs and enter the following code. We are creating the component for the task. It will take a task and a description as arguments. We have placed them inside a div element because we want to style the component.

Hence the syntax for taking argument is {{@task}}.

appcomponents ask.hbs

<div class='task-item'>
  <h4>
    {{@task}}
  </h4>

<p>{{@description}}</p>

</div>

Add the following code to the app\styles\app.css file.

appstylespp.css

.task-item {
  margin: 2rem;
  padding: 5px 20px;
  background-color: bisque;
  border-radius: 10px;
}

Step 4: Now we are passing some tasks to the task component. We do not need to import any files to the application.hbs file. Just create an element of the component and pass the values as shown in the following example.

app emplatespplication.hbs

{{page-title 'Ember App'}}
<h1 id='title'>
  Ember App
</h1>
<div id='items'>
  <Task @task='GeeksforGeeks' @description='Data Structures' />
  <Task @task='GeeksforGeeks' @description='Web Development' />
  <Task @task='GeeksforGeeks' @description='Machine Learning' />
  <Task @task='GeeksforGeeks' @description='Competitive Programming' />

</div>

Step 5:Here is the full code for CSS. We don’t need to import the CSS file into the task.hbs component. Everything works automatically in Ember.js.

appstylespp.css

body {
  margin: 2rem;
  background-color: rgb(22, 187, 64);
}
#title {
  text-align: center;
  color: aliceblue;
}
#items {
  margin: auto;
  width: 80%;
  height: 75vh;
  bottom: 5rem;
  background-color: white;
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
.task-item {
  margin: 2rem;
  padding: 5px 20px;
  background-color: rgb(131, 243, 164);
  border-radius: 10px;
}

Step 6: It is the task component we created. Make sure that the code is the same as in the following example.

appcomponents ask.hbs

<div class='task-item'>
  <h4>
    {{@task}}
  </h4>

<p>{{@description}}</p>

</div>

Step 7: And then we can start the ember development server by entering this code in the command prompt:

ember serve

Output:

So we can create components very easily in Ember.js and also we have used the component in our web page. We do not need to import any files to use the components. Everything works automatically in Ember.js which makes web development in Ember very easy.