Custom suffix in Angular class names

user_1102051 0
Viewed 3505

Is it possible to configure an Angular 7 (with CLI 7.x) project to use class name suffixes other than the default ones?

More specifically, for classes that represent dialog boxes, I want to use Dialog in the end, and not DialogComponent, which is unnecessarily long. And for classes that represent pages I want to use Page, and not PageComponent.

examples:

  • use LoginDialog instead of LoginDialogComponent
  • use MainPage instead of MainPageComponent

Simple renaming isn't possible, due to the tslint rules preset within Angular.

angular7 angular-cli angular
3 Answers

in .eslintrc.js - I am using IONIC and the many components are created with a Page suffix to distinguish pages from 'components' used in pages. The following adds Page as a known suffix.

'@angular-eslint/component-class-suffix': [
      'warn',
      {
        suffixes: ['Component', 'Page'],
      },
    ],
user_7551640

Open tslint.json in the root of your project and update a component-class-suffix property:

{
  ...
  "component-class-suffix": [true, "Component", "View"]
  ...
}

Please notice Component should stay there if you want the default suffix to still be valid.

user_638670

You can edit tslint.json, and use the following rule:

"component-class-suffix": false

This will prevent any linting errors

user_27809430
Related