The Ember.js components uses the W3C web component specification and provides true encapsulation UI widgets. It contains the three main specification as templates, shadow DOM and custom elements. The component is declared within the data-template-name which has a path name instead of a plain string and are prefixed with “components/”.
The following table lists down the action events of actions −
| S.No. | Action Events & Description |
|---|---|
| 1 | Defining a Component You can easily define a component in Ember.js and each component must have a dash in their name. |
| 2 | Component Lifecycle Component lifecycle uses some of the methods in order to execute the code at specific times in a component’s life. |
| 3 | Passing Properties to a Component The component doesn’t access the property directly in the template scope. Therefore, just declare the property at the time of component deceleration. |
| 4 | Wrapping Content in a Component You can wrap the content in a component by using the templates. |
| 5 | Customizing a Component’s Element You can customize the component’s element such as attributes, class names by using a subclass of Ember.Component in the JavaScript. |
| 6 | Using Block Params The passed properties in a component can give back the result in a block expression. |
| 7 | Handling Events The user events such as double-click, hovering, key press etc can be handled by event handlers. To do this, apply the event name as a method on the component. |
| 8 | Triggering Changes with Actions Components can trigger the changes and communicate with events by using the actions. |
Next Topic:-Click Here