Output

Angular: The Full Gamut Edition

Charlie Greenman
April 21, 2021
4 min read

Output is another decorator native to Angular.

On it's own it doesn't do anything. However, it does allow for the three following things to happen:

  1. Marks a class field as an output property.

  2. Supplies configuration Metadata

  3. DOM property bound to the output property is automatically updated during change detection.

The Output decorator is always used in tandem with an event listener. What this means, is that we can have a re-usable component, with a button for instance. By using Output, we can have a function within the dumb component, that whenever it get's called, it triggers the parent function.

Example of Output

Here is a great example of what an Output is, and what it accomplishes. In our scenario, we want to build a re-usable pxl-color-changer component:

// pxl-code-changer.component.htmlimport { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'pxl-color-changer',
  template: './pxl-code-changer.component.html',
  styleUrls: ['./pxl-code-changer.component.scss'],})export class PxlCodeChanger implements OnInit {
  @Output() colorChanged = new EventEmitter<any>();constructor() {}changeColor(data: string) {this.colorChanged.emit(data);}}
<div><form><-- Update code when we get it --></form></div>

and in the parent component consuming our component:

<div><pxl-color-changer></pxl-color-changer></div>

bindPropertyName

Similar to Input, Output allows for binding an optional property name. This would mean that the re-usable component would internally refer to the Input value as one way, and the consuming component would refer to it, in another.

// pxl-code-changer.component.htmlimport { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'pxl-color-changer',
  template: './pxl-code-changer.component.html',
  styleUrls: ['./pxl-code-changer.component.scss'],})export class PxlCodeChanger implements OnInit {
  @Output('changeColor') colorChanged = new EventEmitter<any>();constructor() {}changeColor(data: string) {this.colorChanged.emit(data);}}

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.