Custom suffix in Angular class names

2341 views angular

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.


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

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

answered question

Did you try just... renaming them? What happened? The naming convention is just style guidance.

The tslint configuration won't let it. The specific rules are not in the project, they are buried somewhere inside Angular.

Please put that context in the question.

1 Answer


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

"component-class-suffix": false

This will prevent any linting errors

posted this

Have an answer?


Please login first before posting an answer.