What is a Selector in Angular?

1. What is a Selector?

A selector in Angular is the value that tells Angular where and how a component should be matched and used in a template.

It is defined inside the @Component metadata.

Example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.html',
  styleUrl: './home.css'
})
export class Home {
}

Here:

selector: 'app-home'

is the component selector.

We can then use the component in another Angular template:

<app-home></app-home>

In simple terms:

A selector is the name/pattern Angular uses to identify a component in a template.

2. Why Do We Need a Selector?

Suppose we have these components:

Header
Home
Articles
Contact
Footer

Angular needs a way to identify where each component should appear.

Selectors provide that mapping.

For example:

@Component({
  selector: 'app-header'
})
export class Header {
}

@Component({
  selector: 'app-footer'
})
export class Footer {
}

Now another template can use:

<app-header></app-header>

<main>
  Content
</main>

<app-footer></app-footer>

Angular knows:

<app-header>
      ↓
Header Component


<app-footer>
      ↓
Footer Component

Without selectors, Angular would not have this template matching mechanism for component usage.

3. Purpose of a Selector

The main purpose of a selector is to connect a component with markup in an Angular template.

For example:

@Component({
  selector: 'app-article-card',
  templateUrl: './article-card.html'
})
export class ArticleCard {
}

Usage:

<app-article-card></app-article-card>

Flow:

Template
   ↓
<app-article-card>
   ↓
Angular matches selector
   ↓
ArticleCard Component
   ↓
article-card.html
   ↓
Rendered UI

This makes it possible to compose an application from reusable components.

4. Simple Selector Example

Consider a Header component.

header.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.html'
})
export class Header {
}

header.html

<header>
  <h1>JN Tech</h1>
</header>

Now suppose the root component imports Header:

import { Component } from '@angular/core';
import { Header } from './header/header';

@Component({
  selector: 'app-root',
  imports: [Header],
  templateUrl: './app.html'
})
export class App {
}

Then app.html can contain:

<app-header></app-header>

<h2>Welcome to my website</h2>

Angular renders:

JN Tech

Welcome to my website

5. How Does Angular Match a Selector?

When Angular processes a template containing:

<app-header></app-header>

it finds a component whose metadata contains:

selector: 'app-header'

Conceptually:

app.html
   ↓
<app-header>
   ↓
Angular template processing
   ↓
Find matching selector
   ↓
Header Component
   ↓
header.html
   ↓
Render Header UI

The selector therefore forms the connection between the template markup and the component definition.

6. Selector Is Part of Component Metadata

Remember our previous topic:

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.html',
  styleUrl: './home.css'
})
export class Home {
}

Here:

@Component
    |
    +-- selector
    +-- standalone
    +-- imports
    +-- templateUrl
    +-- styleUrl

The selector is therefore component metadata.

It is not a property inside the component class.

Incorrect idea:

export class Home {
  selector = 'app-home';
}

That does not define the Angular component selector.

The selector belongs in:

@Component({
  selector: 'app-home'
})

7. Common Selector Naming Convention

Angular component selectors commonly use a prefix.

For example:

app-root
app-home
app-header
app-footer
app-article-card
app-login

Example:

selector: 'app-article-card'

The prefix:

app-

helps distinguish your application's components from normal HTML elements.

For example:

<header></header>

is an HTML element.

Whereas:

<app-header></app-header>

clearly represents an Angular component.

8. Why Use a Prefix?

Imagine using:

selector: 'header'

Then:

<header></header>

can be confusing because header is already a standard HTML element.

Instead:

selector: 'app-header'

gives:

<app-header></app-header>

which clearly indicates an application-specific component.

This also helps avoid naming collisions.

9. Types of Selectors

Angular selectors use CSS-selector-like syntax. Important forms include:

1. Element selector
2. Attribute selector
3. Class selector

For components, the element selector is the most common and recommended style for normal application components.

10. Element Selector

This is what you will use most often.

@Component({
  selector: 'app-home'
})
export class Home {
}

Usage:

<app-home></app-home>

Other examples:

selector: 'app-header'

<app-header></app-header>

and:

selector: 'app-article-card'

<app-article-card></app-article-card>

Easy way to remember

selector: 'app-home'

          ↓

<app-home></app-home>

11. Attribute Selector

Angular can also match using an attribute selector.

Example:

@Component({
  selector: '[app-message]',
  template: `<p>Angular Message</p>`
})
export class Message {
}

Usage:

<div app-message></div>

Here:

[app-message]

means:

Match an element containing the app-message attribute.

Conceptually:

selector
[app-message]

       ↓

<div app-message></div>

Attribute selectors are especially common with directives, although Angular component selectors can also use selector patterns.

12. Class Selector

A selector can also use CSS class syntax.

Example:

@Component({
  selector: '.app-message',
  template: `<p>Angular Message</p>`
})
export class Message {
}

Usage:

<div class="app-message"></div>

The:

.

means class selector.

.app-message
     ↓
class="app-message"

For normal Angular application components, however, an element selector such as:

<app-message></app-message>

is usually clearer.

13. Selector Types Comparison

For everyday component development, remember:

selector: 'app-home'

is the normal pattern.

14. Selector vs Component Class Name

This is important.

Consider:

@Component({
  selector: 'app-home'
})
export class Home {
}

There are two different names:

Selector
   ↓
app-home


TypeScript Class
   ↓
Home

They have different purposes.

Home

Used in TypeScript:

import { Home } from './home/home';

For example:

imports: [Home]

app-home

Used in HTML templates:

<app-home></app-home>

So:

This distinction is very important.

15. Selector vs templateUrl

Another common confusion:

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})

They do completely different jobs.

selector

selector: 'app-home'

Answers:

How can Angular identify/use this component in a template?

templateUrl

templateUrl: './home.html'

Answers:

Which HTML template belongs to this component?

So:

selector
   ↓
How component is referenced/matched


templateUrl
   ↓
Which HTML defines its UI

16. Selector vs Route

This is another important distinction.

Suppose:

@Component({
  selector: 'app-articles'
})
export class Articles {
}

The selector is:

app-articles

You might use it as:

<app-articles></app-articles>

But routing is different:

{
  path: 'articles',
  component: Articles
}

The URL is:

/articles

So:

A selector does not automatically create a route.

17. Do Routed Components Need to Be Written Using Their Selector?

Not necessarily.

Suppose:

@Component({
  selector: 'app-articles',
  templateUrl: './articles.html'
})
export class Articles {
}

Route:

{
  path: 'articles',
  component: Articles
}

And root template:

<router-outlet></router-outlet>

When the user visits:

/articles

the Angular Router renders the Articles component into the router outlet.

You don't need to manually write:

<app-articles></app-articles>

for that routed rendering.

Conceptually:

/articles
    ↓
Angular Router
    ↓
Articles
    ↓
<router-outlet>

Selectors are especially visible when you manually compose one component inside another component's template.

18. Root Component Selector

The root component also has a selector.

For example:

@Component({
  selector: 'app-root',
  templateUrl: './app.html'
})
export class App {
}

Then index.html contains:

<body>

  <app-root></app-root>

</body>

This connects the browser's host document with the root Angular component.

index.html
    ↓
<app-root>
    ↓
selector: 'app-root'
    ↓
App
    ↓
app.html

This is an important example because it shows how Angular's root component enters the page.

19. Parent and Child Components Using Selectors

Suppose we have:

App
├── Header
├── Home
└── Footer

Selectors:

Header
selector: 'app-header'

Home
selector: 'app-home'

Footer
selector: 'app-footer'

The parent template can contain:

<app-header></app-header>

<app-home></app-home>

<app-footer></app-footer>

Angular builds the component tree:

App
│
├── <app-header>
│       ↓
│     Header
│
├── <app-home>
│       ↓
│     Home
│
└── <app-footer>
        ↓
      Footer

This is one of the major uses of selectors.

20. Selector with Standalone Components

Suppose Header is standalone:

@Component({
  selector: 'app-header',
  standalone: true,
  templateUrl: './header.html'
})
export class Header {
}

To use it in App, import the component:

import { Component } from '@angular/core';
import { Header } from './header/header';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Header],
  templateUrl: './app.html'
})
export class App {
}

Then:

<app-header></app-header>

works in app.html.

So there are two steps:

1. Make component available

imports: [Header]

            ↓

2. Use its selector

<app-header></app-header>

This is an important standalone Angular concept.

21. How Was It Before Standalone Angular?

The selector itself worked essentially the same way.

For example:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
}

Usage:

<app-header></app-header>

The difference was mainly how the component was made available.

Older NgModule approach

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ]
})
export class AppModule {
}

Then the template could use:

<app-header></app-header>

Modern standalone approach

@Component({
  imports: [Header]
})
export class App {
}

Then:

<app-header></app-header>

Comparison

Older Angular

HeaderComponent
      ↓
NgModule declarations
      ↓
<app-header>


Modern Standalone Angular

Header
   ↓
Component imports
   ↓
<app-header>

The selector concept did not fundamentally change; standalone Angular changed dependency organization.

22. Selector Naming Best Practices

For application components, a good selector might be:

app-header
app-footer
app-article-card
app-user-profile

Prefer lowercase and hyphen-separated names.

Good:

selector: 'app-article-card'

Avoid unclear names such as:

selector: 'a'

or generic names likely to conflict with HTML/custom elements.

For reusable libraries, a library-specific prefix is useful rather than app-.

For example:

jn-card
jn-table

The prefix helps identify who owns the component.

23. Advantages of Selectors

Component Reusability

A component can be used wherever it is available:

<app-article-card></app-article-card>

Clear Component Composition

Templates clearly show component relationships:

<app-header></app-header>

<app-content></app-content>

<app-footer></app-footer>

Separation

The parent doesn't need to contain all of the child's HTML.

Readability

This:

<app-user-profile></app-user-profile>

immediately communicates the purpose of that UI section.

Maintainability

Changing the internal implementation of UserProfile doesn't require duplicating its HTML across every parent.

24. Disadvantages / Considerations

Selectors themselves have little downside, but poor naming can cause problems.

Naming Conflicts

Avoid selectors that conflict with standard HTML or other components.

Unclear Names

This:

selector: 'app-c1'

doesn't explain the component's responsibility.

Prefer:

selector: 'app-article-card'

Missing Import in Standalone Components

If a standalone parent tries to use:

<app-header></app-header>

but Header is not available in its template dependencies, Angular will not treat that usage correctly.

Make it available:

imports: [Header]

25. Key Points

For interviews, remember:

• A selector is defined in @Component metadata.
• It tells Angular how to match/reference a component in a template.
• Example:

selector: 'app-home'

• Usage:

<app-home></app-home>

• The most common component selector is an element selector.
• Attribute and class selectors are also possible.
• Use clear, prefixed selector names.
• Home is the TypeScript class name.
• app-home is the template selector.
• A selector is not a route.
• Routed components can be rendered through router-outlet without manually writing their selector.
• In standalone Angular, the child component is typically imported by the parent before its selector is used in that parent's template.
• In older NgModule applications, components were commonly made available through module declarations/import relationships.
• The basic selector concept remains the same in standalone Angular.

The easiest way to remember:

@Component({
  selector: 'app-home'
})
        |
        v
<app-home></app-home>
        |
        v
    Home Component
        |
        v
     home.html

26. Interview Questions and Answers

Q1. What is a selector in Angular?

Answer:

A selector is component metadata that tells Angular how a component should be matched and referenced in an Angular template.

For example:

selector: 'app-home'

can be used as:

<app-home></app-home>

Q2. Where is the selector defined?

Inside the @Component decorator:

@Component({
  selector: 'app-home'
})

Q3. What is the most common type of selector for Angular components?

An element selector:

selector: 'app-home'

Usage:

<app-home></app-home>

Q4. What types of selectors can Angular use?

Important forms include:

Element

selector: 'app-home'


Attribute

selector: '[app-home]'


Class

selector: '.app-home'

Element selectors are normally preferred for application components.

Q5. What is the difference between a selector and a component class name?

The class name is used in TypeScript:

export class Home {
}

The selector is used for template matching:

selector: 'app-home'

Usage:

<app-home></app-home>

Q6. What is the difference between selector and templateUrl?

selector defines how the component is matched/referenced in a template.

selector: 'app-home'

templateUrl identifies the HTML file that defines the component's UI.

templateUrl: './home.html'

Q7. What is the difference between a selector and a route?

A selector is used for component composition inside templates:

<app-articles></app-articles>

A route maps a URL to a component:

{
  path: 'articles',
  component: Articles
}

They solve different problems.

Q8. Does a routed component require its selector to be manually placed in HTML?

No.

Angular Router can render the routed component into:

<router-outlet></router-outlet>

based on the route configuration.

Q9. Why do Angular selectors commonly start with app-?

A prefix helps distinguish application-specific components from native HTML elements and reduces naming conflicts.

Example:

<app-header></app-header>

is clearly an application component.

Q10. Did selectors change with standalone Angular?

The selector concept remains essentially the same.

The major difference is how components become available to templates:

Older
Component → NgModule declarations/imports → Template

Modern
Standalone component → Component imports → Template

Interview Summary

A selector in Angular is defined in the @Component metadata and tells Angular how to match a component in a template. For example, selector: 'app-home' allows the component to be used as <app-home></app-home>. Element selectors are the most common for components. Selectors are used for component composition and should not be confused with Angular routes, which map URLs to components.