Third-Party Libraries with didInsertElement

You can initialize and attach the 3rd party libraries into the DOM element by using this didInsertElement hook. This can be called when the component's element has been created and inserted into DOM and accessible by using the s() method.

Syntax

import Ember from 'ember';

export default Ember.Component.extend ({
   ...
   didInsertElement() {
      //code here    
   },
   ...
})

Example

The example given below describes the use of didInsertElement hook when integrating with third-party library. Create a component with the name post-action, which will get define under app/components/.

Open the post-action.js file and add the following code −

import Ember from 'ember';
var inject = Ember.inject;

export default Ember.Component.extend ({
   age: 'Tutorialspoint',
   actions: {
      pressed: function () {
         this.$("#test").fadeIn("slow");
      }
   },
   
   didInsertElement: function () {
      Ember.run.scheduleOnce('afterRender', this, function () {
         this.$("#test").fadeOut("slow");
      });
   }
});

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

<div id = "test">This is {{age}}</div>  
<button {{action "pressed"}}>
   Press Me  
</button>
{{yield}}

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

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

Output

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

When you click the button, it will specify the fadeIn and fadeOut effect on the text −