CODEWITHSUNDEEP
angularangular-cliangular7
vitaly-t
vitaly-t

Reputation: 25930

Custom suffix in Angular class names

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:

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

Upvotes: 7

Views: 5621

Answers (3)

KenF
KenF

Reputation: 624

Before Angular 11, linting was done using TSLint. TSlint has been deprecated and ESLint is now used.

In .eslintrc.js file - In IONIC and Angular <= v11 projects, Components can be created with a Page suffix to distinguish pages from 'components' used in pages. The following rule adds Page as a known suffix.

"overrides": [{
    "rules": {
        "@angular-eslint/component-class-suffix": [
            "warn",
            {
                "suffixes": ["Component", "Page"],
            },
        ],
    },
}

Upvotes: 19

Vitaliy Ulantikov
Vitaliy Ulantikov

Reputation: 10534

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.

Upvotes: 8

user184994
user184994

Reputation: 18281

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

"component-class-suffix": false

This will prevent any linting errors

Upvotes: -2

Related Questions