EmberJS - Customizing the Element's Class

Customize the element's class at the invocation time, i.e., at the time of calling the class name.

Syntax

import Ember from 'ember';

export default Ember.Component.extend ({
   classNames: ['name_of_class']
});

Example

The example given below specifies customizing the element's class at the invocation time. 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 ({
   classNameBindings: ['isUrgent'],
   isUrgent: true,
});

Now open the component template file post-action.hbs with the following line of code −

<div class = "ember-view is-urgent">Welcome to Tutorialspoint...</div>
{{yield}}

Open the index.hbs file and add the following line of code −

{{post-action}}
{{outlet}}

Output

Run the ember server; you will receive the following output −