As we said earlier, Aurelia provides very complete life cycle event methods to customize and improve the behavior of our application. Here's a list with these methods:

export class ComponentLifecycleExample {

  retrievedData;

  constructor(service) {
    // Create and initialize your class object here...
    this.service = service;
  }

  created(owningView, myView) {
    // Invoked once the component is created...
  }

  bind(bindingContext, overrideContext) {
    // Invoked once the databinding is activated...
  }

  attached(argument) {
    // Invoked once the component is attached to the DOM...
    this.retrievedData = this.service.getData();
  }

  detached(argument) {
    // Invoked when component is detached from the dom
    this.retrievedData = null;
  }

  unbind(argument) {
    // Invoked when component is unbound...
  }

}

Let's explore each method presented in the script:

constructor(): This is the first method that is called. It's used to set all view model dependencies and values required for its instantiation.

The constructor method can be used for instantiating and initializing attributes to your component, and they should not necessarily be declared previously:

constructor(){
  this.customerName = 'Default name'
  this.placeholderText = 'Insert customer name here'
}

Also, you can initialize variables using class methods:

constructor(){
  this.date = this.getCurrentDate()
}

getCurrentDate(){
  //Method implementation
}

created(owningView, myView): Next, the created method is called. At this point, the view has been created and belongs to the view model; they are connected to the controller. This callback will receive the view declared inside of the (owningView) component. If the component itself has a view, it is passed as second parameter, (myView).

bind(bindingContext, overrideContext): At this point, the binding has started. If the view model has the bind() callback overridden, it will be called at this time. The first argument represents the binding context of the component. The second parameter is used for adding additional contextual properties.

attached(): The attached callback is executed once the component is ready for use. It means instantiated and has its properties set and computed correctly.

This method is perfect for retrieving data or set properties if you are using injected service methods. You can configure different ways to load your data, show loading alerts for the user, and increase the user experience. Let's see a quick example:

export class ComponentExample {

  dataList
  
  constructor(){
    // Constructor's code
  }
  
  attached(){
    this.showLoader(true);
    this.service.retrieveAllData()
                .then( data => {
                   this.dataList = data.getBody()
                   this.showLoader(false)
                   this.showAlert('Data retrieved correctly!!!')
                })
                .catch( error => {
                  console.log(error)
                  this.showLoader(false)
                  this.showAlert('Oops! We have some errors retrieving data!')
                })
    
  }
  
}

As you can see, we can define fallback alerts or methods to ensure that we are handling errors correctly (just if needed).

detached(): Called when the component will be removed from the DOM. Different from the previous methods, this method is not executed when the application starts.

The same as the previous example, we can define this method to restore the data to a previous state, delete local storage data, and so on.

unbind(): Called when the component is unbound.

You should remember that each of these life cycle callbacks is optional. Just override what you really need. The execution order is the same as the list order mentioned earlier.