This rule raises an issue when the inputs metadata property is used in @Component or @Directive decorators.

Why is this an issue?

Using the inputs metadata property makes code harder to read and maintain. The metadata approach lacks type safety and IDE support compared to using @Input() decorators directly on class properties.

The @Input() decorator approach provides better:

What is the potential impact?

Using the metadata approach reduces code maintainability and developer productivity. It makes the codebase harder to understand and refactor, especially in larger applications.

How to fix?

Replace the inputs metadata property with @Input() decorators on class properties. This provides better type safety and follows Angular’s style guide recommendations.

Non-compliant code example

@Component({
  inputs: ['name', 'id: userId'], // Noncompliant
  selector: 'app-user'
})
class UserComponent {
  name: string;
  userId: string;
}

Compliant code example

@Component({
  selector: 'app-user'
})
class UserComponent {
  @Input() name: string;
  @Input('userId') id: string;
}

Documentation