custom component selector prefix — angular cli

when we generate a new component using angular cli with below command

ng generate component my-comp

this generates a new component with all the supported files.

angular cli generated files for a new component

when you look into the *.component.ts file, you will notice that the component selector is prefixed with app by default.

@Component({
selector: 'app-my-comp',
templateUrl: './my-comp.component.html',
styleUrls: ['./my-comp.component.scss']
})

if you want ng cli to name the selector with some other custom default prefix, there is a configuration setting in .angular-cli.json file which controls this.

set the prefix property to whatever string value you want your selector prefix.

"prefix": "my-custom-prefix"

or if you don’t wish to have any prefix at all, set prefix property to empty string or delete this property from config file.

"prefix": ""

simple quick tip that can save some google search.