Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[no-inputs-metadata-property] Angular Host Directive inputs error #1238

Closed
2 tasks done
Marcarrian opened this issue Nov 28, 2022 · 4 comments · Fixed by #1248
Closed
2 tasks done

[no-inputs-metadata-property] Angular Host Directive inputs error #1238

Marcarrian opened this issue Nov 28, 2022 · 4 comments · Fixed by #1248
Labels
package: eslint-plugin Angular-specific TypeScript rules PRs Welcome If a high-quality PR is created for this it will be accepted

Comments

@Marcarrian
Copy link

Marcarrian commented Nov 28, 2022

Description and reproduction of the issue
When using the new Angular 15 Directive Composition API and specifying inputs, angular-eslint reports an error.
Use @Input rather than the inputs metadata property (https://angular.io/styleguide#style-05-12) @angular-eslint/no-inputs-metadata-property

Reproduction Repository https://github.com/Marcarrian/angular-15-eslint-issue

@Component({
  selector: 'app-my-component',
  template: `<span>MyComponent</span>`,
  hostDirectives: [{
    directive: MyDirective,
    inputs: ['myDirectiveSomeInput: someInput'], // errors here with @angular-eslint/no-inputs-metadata-property
  }],
  standalone: true,
})
export class MyComponent {

  @Input()
  public someInput = false;
}

@Directive({
  selector: '[appMyDirective]',
  standalone: true,
})
export class MyDirective {

  @Input()
  public myDirectiveSomeInput = false;
}

Versions

package version
@angular-eslint/eslint-plugin 15.1.0
@typescript-eslint/parser 5.44.0
ESLint 8.28.0
node 16.16.0
# Please run `npx ng version` in your project and paste the full output here:
Angular CLI: 15.0.1        
Node: 16.16.0              
Package Manager: npm 8.11.0
OS: win32 x64              

Angular: 15.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.1
@angular-devkit/build-angular   15.0.1
@angular-devkit/core            15.0.1
@angular-devkit/schematics      15.0.1
@schematics/angular             15.0.1
rxjs                            7.5.7
typescript                      4.8.4
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.
@Marcarrian Marcarrian added package: eslint-plugin Angular-specific TypeScript rules triage This issue needs to be looked at and categorized by a maintainer labels Nov 28, 2022
@Marcarrian Marcarrian changed the title [no-inputs-metadata-property] Angular Host Directive input renaming error [no-inputs-metadata-property] Angular Host Directive inputs error Nov 28, 2022
@JamesHenry JamesHenry added PRs Welcome If a high-quality PR is created for this it will be accepted and removed triage This issue needs to be looked at and categorized by a maintainer labels Dec 4, 2022
@JamesHenry
Copy link
Member

Thanks @Marcarrian! I made a similar adjustment to no-input-rename recently: #1231

Would you like to submit a PR for this?

@abaran30
Copy link
Contributor

abaran30 commented Dec 7, 2022

FYI @Marcarrian pull request to fix this is linked above. Let me know what you think.

@evgeniyefimov
Copy link

evgeniyefimov commented Jan 31, 2023

Hi @JamesHenry, @abaran30. @angular-eslint/no-outputs-metadata-property complains about host directive output. I think it should be also fixed. Same for no-output-rename.
image

@lucasousi
Copy link

@JamesHenry the same problem happens with the output property. (@angular-eslint/no-outputs-metadata-property).

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: eslint-plugin Angular-specific TypeScript rules PRs Welcome If a high-quality PR is created for this it will be accepted
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants