This rule flags the use of the outputs metadata property in @Component and @Directive decorators.

Why is this an issue?

Using the outputs metadata property makes code harder to read and maintain compared to the @Output() decorator approach.

The @Output() decorator provides several advantages:

The Angular style guide specifically recommends avoiding the outputs metadata property in favor of the decorator approach.

What is the potential impact?

Using the outputs metadata property reduces code maintainability and readability. It makes it harder for developers to understand component interfaces and can lead to runtime errors that could be caught at compile time with proper typing.

How to fix in Angular?

Replace the outputs metadata property with @Output() decorators on class members.

Non-compliant code example

@Component({
  outputs: ['valueChange'], // Noncompliant
  selector: 'app-counter'
})
class Counter {
  valueChange = new EventEmitter<number>();
}

Compliant code example

@Component({
  selector: 'app-counter'
})
class Counter {
  @Output() valueChange = new EventEmitter<number>();
}

For aliased outputs, use the alias parameter in the @Output() decorator.

Non-compliant code example

@Component({
  outputs: ['valueChange: onChange'], // Noncompliant
  selector: 'app-counter'
})
class Counter {
  valueChange = new EventEmitter<number>();
}

Compliant code example

@Component({
  selector: 'app-counter'
})
class Counter {
  @Output('onChange') valueChange = new EventEmitter<number>();
}

Documentation