Angular 9 : Bind to an @Output alias of custom events

This tutorial guides you on how to bind to an @Output alias of custom events. Let’s see how to assign alias to custom events and bind to that custom events using the assigned alias.

Angular 9 : Bind to an @Output alias of custom events

For example, first, let’s define custom event in CreateItemComponent class as shown below. Later, we will see how to assign alias to custom events.

Angular provides a way for you to emit custom events by using EventEmitter in components with @Output directive. @Output decorator marks a class field as an output property.

export class CreateItemComponent implements OnInit {

  @Output() itemAdded = new EventEmitter<{itemTitle: string, itemDesc: string}>();
  @Output() itemSpecAdded = new EventEmitter<{itemTitle: string, itemSpec: string}>();

  newItemName = '';
  newItemDesc = '';
  newItemSpec = '';

  constructor() { }

  ngOnInit(): void {

  }

  onAddItem() {
    this.itemAdded.emit({
        itemTitle: this.newItemName, 
        itemDesc: this.newItemDesc
    });
  }

  onAddItemSpec() {
    this.itemSpecAdded.emit({
      itemTitle: this.newItemName, 
      itemSpec: this.newItemSpec
    });
  }

}

For example, in our CreateItemComponent class, we emit custom events by using EventEmitter property with @Output directive as shown below.

@Output() itemAdded = new EventEmitter<{itemTitle: string, itemDesc: string}>();
@Output() itemSpecAdded = new EventEmitter<{itemTitle: string, itemSpec: string}>();

Emit data whenever “Add Item” button or “Add Item Specifications” button is clicked. The below is the code sneppet from CreateItemComponent template file.

<button
   class="btn btn-primary"
   (click)="onAddItem()">Add Item</button>
<button
   class="btn btn-primary"
   (click)="onAddItemSpec()">Add Item Specifications</button>

Finally, listen for that custom events in the parent component’s template using property binding as shown below.

<div class="container">
  <app-create-item (itemAdded )="onItemAdded($event)"
                   (itemAdded )="onItemSpecAdded($event)"></app-create-item>

----
----
</div>

How to bind to an @Output alias ?

First, you need to define an @Output alias or assign an alias to the output property. Sometimes, you don’t want let use the same property name (itemAdded) outside the component to bind to that property.

For example, you can assign alias “itemElementAdded” to the property name “itemAdded” by adding an argument to the @Output decorator. Similarly, define alias ‘itemElementSpecAdded‘ for “itemSpecAdded” as shown below.

@Output('itemElementAdded') itemAdded = new EventEmitter<{itemTitle: string, itemDesc: string}>();
@Output('itemElementSpecAdded') itemSpecAdded = new EventEmitter<{itemTitle: string, itemSpec: string}>();

And now, to access this property from outside this component let’s say parent component, you need to target “itemElementAdded” and “itemElementSpecAdded” to bind to these output properties.

For example, to bind to an @Output alias of custom event property you need to target the alias “itemElementAdded” in the template as shown below.

<app-create-item (itemElementAdded)="onItemAdded($event)"
                   (itemElementSpecAdded)="onItemSpecAdded($event)"></app-create-item>

That’s it. You had learnt how to define custom event properties, assign alias and how to bind to an @Output alias of custom event property.

Hope it helped 🙂

Also See:

References:

Angular Docs