- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
EmberJS - Customizing Attributes
You can customize the attributes by binding them to a DOM element by using the attributeBindings property.
Syntax
import Ember from 'ember'; export default Ember.Component.extend ({ tagName: 'tag_name', attributeBindings: ['attr_name'], attr_name: 'value' });
Example
The example given below specifies customizing the attributes by binding them to a DOM element by using the attributeBindings property. Create a component with the name post-action, which will get defined under app/components/.
Open the post-action.js file and add the following code −
import Ember from 'ember'; export default Ember.Component.extend ({ tagName: 'font', attributeBindings: ['color'], color: "red" });
Now open the component template file post-action.hbs with the following line of code −
<div>Welcome to Tutorialspoint...</div> {{yield}}
Open the index.hbs file and add the following line of code −
<h1>Hello</h1> {{post-action}} {{outlet}}
Output
Run the ember server; you will receive the following output −
emberjs_component.htm
Advertisements