Top Angular Decorator Myths: Which Property Doesn't Belong?

Angular decorators are essential for defining component behaviors and enhancing components' functionalities. However, myths about how these decorators work and what they can do often lead to confusion among developers. In this post, we will dispel some common myths about Angular decorators and clarify which properties don't actually belong to certain decorators.

Understanding Angular Decorators

Before diving into the myths, let’s clarify what decorators in Angular are:

• Component Decorator: Marks a class as an Angular component and provides the configuration metadata.
• Directive Decorator: Used for creating custom DOM attributes to extend HTML behavior.
• Service Decorator: Indicates that a class can be injected as a dependency.
• Pipe Decorator: Adds a pipe that transforms data in templates.

Myth 1: The @Input Decorator

One common misunderstanding is that @Input is a property of the @Component decorator. Let’s dispel this myth:

Myth: The @Input() decorator can be used inside the @Component decorator’s configuration.

Reality: The @Input decorator is not part of the @Component decorator but is instead applied directly to the properties of a class that represent inputs from parent components.

• Correct Usage:

  
  @Component({
    selector: ‘app-child’,
    template: <p>Child: {{someInput}}</p>
  })
  export class ChildComponent {
    @Input() someInput: string;
  }
  

• Incorrect Usage:

  
  @Component({
    selector: ‘app-child’,
    inputs: [‘someInput’],
    template: <p>Child: {{someInput}}</p>
  })
  export class ChildComponent {}
  

⚠️ Note: Remember, the `inputs` property in the component decorator is deprecated since Angular 6.

Myth 2: The @HostBinding Decorator

The @HostBinding decorator often gets mixed up with other host-related properties. Here’s the myth:

Myth: @HostBinding is solely a property of the @Directive decorator.

Reality: @HostBinding can be used with both components and directives to bind a host element property directly to a directive’s property.

• Example:

  
  @Component({
    selector: ‘app-host-binding’,
    template: ‘Hover over me’
  })
  export class HostBindingExample {
    @HostBinding(‘class.hovered’) isHovered: boolean = false;
  
  onMouseEnter() {
      this.isHovered = true;
    }
  
  onMouseLeave() {
      this.isHovered = false;
    }
  }
  

Myth 3: Event Emitters

Myth: @Output() is a part of the @Component decorator.

Reality: Similar to @Input, @Output is not within the component decorator configuration. It’s used to emit events from child to parent components:

• Correct Usage:

  
  @Component({
    selector: ‘app-child’,
    template: <button (click)="onEventClick()">Emit Event</button>
  })
  export class ChildComponent {
    @Output() eventEmitter = new EventEmitter();
  
  onEventClick() {
      this.eventEmitter.emit(‘An event occurred!’);
    }
  }
  

Myth 4: Directive Inputs and Outputs

Myth: A directive cannot have both @Input() and @Output() decorators.

Reality: Directives can have inputs and outputs just like components, allowing for complex interactions:

• Example:

  
  @Directive({
    selector: ‘[appDoubleClick]’
  })
  export class DoubleClickDirective {
    @Output() onDoubleClick = new EventEmitter();
    @Input() doubleClickDelay = 300;
  
  @HostListener(‘click’, [‘$event’])
    onClick(event: MouseEvent) {
      if (this.lastClicked) {
        const delta = Date.now() - this.lastClicked;
        if (delta < this.doubleClickDelay) {
          this.onDoubleClick.emit();
        }
      }
      this.lastClicked = Date.now();
    }
  }
  

Myth 5: Property Binding

Myth: You need to use @Input() to bind a property in Angular.

Reality: While @Input() allows for passing data from parent to child, you can also bind properties directly:

• Property Binding: <input [value]="myValue">
• Attribute Binding: <button [attr.aria-pressed]="isPressed">Press</button>

Myth 6: Change Detection Strategy

Myth: Change detection strategy is a property of the @Component decorator.

Reality: While it’s often configured in @Component, changeDetection can be set on both components and directives:

• Example:

  
  @Component({
    selector: ‘app-child’,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: <p>{{myProperty}}</p>
  })
  export class ChildComponent {
    @Input() myProperty: string;
  }
  

⚠️ Note: The `OnPush` strategy is great for performance optimization when done correctly, but it can lead to missed updates if not used properly.

Summing Up the Key Points

Angular decorators are often misunderstood, leading to incorrect implementations. Here are the key points:

• @Input() and @Output() decorators are not part of the @Component or @Directive decorator configuration; they should be applied directly to class properties.
• @HostBinding and similar decorators can be used on both components and directives for manipulating the host element.
• Directives can handle both inputs and outputs, making them versatile for extending HTML behavior.
• Property binding does not always require the @Input decorator; it can be achieved directly in templates.
• Change detection strategies are not exclusive to components but can be set on directives as well.

By understanding the proper application and scope of these decorators, developers can make full use of Angular's powerful framework to create efficient, robust, and maintainable applications.

What is the difference between @Input() and @HostBinding?

+

@Input() is used to pass data from a parent component to a child component or directive, binding an external property to a local property. @HostBinding, however, binds a host element property directly to a directive’s property or attribute, allowing you to dynamically modify the host element.

Can I use @Output() with a directive?

+

Yes, directives can use @Output() to emit events, allowing communication with the parent component or to perform actions based on the directive’s logic.

Why would I use @HostListener?

+

@HostListener is used to listen for events on the host element of a directive or component, enabling you to define custom event handlers or react to DOM events directly from the decorator.