Whenever we create a new component in Angular, its selector contains a prefix which is app by default. But sometimes we might need to change it to something else.

Let’s see how can we do it.

How to change prefix for an old project

In this approach we will change prefix using angular.json file.

Go to the angular.json in the root of your project directory and change the prefix value under projects .

As you can see in the above image, we have changed prefix value to myPrefix.

Now if we create a new component called my-component using ng g c my-component, the generated my-component.component.ts file it will look like below:

import { Component, OnInit } from '@angular/core';@Component({
  selector: 'myPrefix-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})export class MyComponentComponent implements OnInit {

constructor() { }

ngOnInit(): void {}
}

As you can we prefix in selector is changed to myPrefix .

How to change prefix for a new project

In this approach we will change the prefix when creating a new project using the following command: ng new project-name --prefix my-prefix(anything)

In this way angular will automatically replace default prefix which is app with new prefix which is my-prefix .

And it’s as simple as that! I hope you have found this useful. If so, be sure to clap and let me know in the comments. And be sure to leave a comment if you know any other ways to change the prefix.

You can check Angular Styleguide for custom prefix.

Unlock 10x development with independent components

Building monolithic apps means all your code is internal and is not useful anywhere else. It just serves this one project. And as you scale to more code and people, development becomes slow and painful as everyone works in one codebase and on the same version.

But what if you build independent components first, and then use them to build any number of projects? You could accelerate and scale modern development 10x.

OSS Tools like Bit offer a powerful developer experience for building independent components and composing modular applications. Many teams start by building their Design Systems or Micro Frontends, through independent components. Give it a try →

An independent product component: watch the auto-generated dependency graph

Read next