angularangular-cliangular7

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.


Solution

  • 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.