What is Component Metadata in Angular?

1. What is Component Metadata?

Component metadata is the configuration information that tells Angular how a component should be created and used.

It is provided using the:

@Component({...})

decorator.

Example:

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

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

Here:

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

is the component metadata.

Whereas:

export class Home {
  title = 'Welcome to Angular';
}

is the component class.

So:

Angular Component
       |
       +---- Component Metadata
       |        ↓
       |    @Component({...})
       |
       +---- Component Class
                ↓
           export class Home

Metadata describes the component to Angular; the class contains the component's state and behavior.

2. Why Do We Need Component Metadata?

Consider a normal TypeScript class:

export class Home {
  title = 'Welcome';
}

This is simply a TypeScript class.

Angular does not know that it should be treated as a UI component.

When we add:

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

Angular now has information about how the class participates in the UI.

Conceptually:

Normal TypeScript Class
        ↓
@Component Metadata
        ↓
Angular Component

Metadata can tell Angular things such as:

What is the component's selector?

Which HTML template belongs to it?

Which stylesheet belongs to it?

Which dependencies can its template use?

Is it standalone?

How should its styles be encapsulated?

3. Purpose of Component Metadata

The main purpose is to configure the relationship between the TypeScript class and Angular's component system.

For example:

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

Angular can understand:

Home class
    |
    +---- HTML selector
    |       ↓
    |   app-home
    |
    +---- Template
    |       ↓
    |   home.html
    |
    +---- Styles
            ↓
        home.css

Without this metadata, Home would just be an ordinary TypeScript class.

4. @Component Decorator

@Component is a decorator provided by Angular.

First we import it:

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

Then apply it:

@Component({
  ...
})
export class Home {
}

The decorator attaches Angular-specific configuration to the class.

The object passed to @Component() contains the metadata:

@Component({

  selector: 'app-home',

  standalone: true,

  imports: [],

  templateUrl: './home.html',

  styleUrl: './home.css'

})

5. Important Component Metadata Properties

The most important properties to understand are:

selector
standalone
imports
template
templateUrl
styles
styleUrl / styleUrls
providers
changeDetection
encapsulation

For normal Angular development, the first six are the ones you will encounter most frequently.

6. selector

The selector tells Angular how the component can be identified in a template.

Example:

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

The component can then be used as:

<app-home></app-home>

Flow:

selector: 'app-home'
        ↓
<app-home></app-home>
        ↓
Home Component
        ↓
home.html

For example, if you create:

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

you can use:

<app-header></app-header>

Key Point

selector defines how Angular matches a component in a template.

7. standalone

standalone indicates whether a component is standalone rather than requiring declaration in an NgModule.

Example:

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

A standalone component can manage its template dependencies through its own metadata.

For example:

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [RouterLink]
})

Modern Angular development is standalone-first.

8. imports

The imports metadata property specifies dependencies available to a standalone component's template.

Example:

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

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

Now the template can use:

<a routerLink="/articles">
  Articles
</a>

because:

imports: [RouterLink]

makes RouterLink available to that component's template.

Other examples can include:

Other components
Directives
Pipes
RouterLink
FormsModule
ReactiveFormsModule

Conceptually:

Home Component
      |
      +---- imports
               |
               +---- RouterLink
               +---- Other components
               +---- Pipes
               +---- Directives

Important

This imports property is especially important with standalone components.

9. templateUrl

templateUrl specifies the external HTML template belonging to the component.

Example:

@Component({
  templateUrl: './home.html'
})

Relationship:

home.ts
   |
   | templateUrl
   ↓
home.html

For example:

home.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.html'
})
export class Home {
  title = 'Angular';
}

home.html

<h1>{{ title }}</h1>

10. template

Instead of using an external HTML file, you can define an inline template.

Example:

@Component({
  selector: 'app-home',

  template: `
    <h1>Welcome to Angular</h1>
    <p>This is the home page.</p>
  `
})
export class Home {
}

So:

templateUrl
     ↓
External HTML

template
     ↓
Inline HTML

Difference

Normally you use one approach for the component template, not both.

11. styleUrl

styleUrl specifies an external stylesheet associated with the component.

Example:

@Component({
  styleUrl: './home.css'
})

Relationship:

home.ts
   |
   | styleUrl
   ↓
home.css

Example:

h1 {
  font-size: 30px;
}

12. styleUrls

You may also encounter:

styleUrls: [
  './home.css',
  './common.css'
]

This accepts multiple stylesheet URLs.

So:

styleUrl
   ↓
Single stylesheet URL

styleUrls
   ↓
Array of stylesheet URLs

13. styles

CSS can also be defined directly inside the metadata.

Example:

@Component({
  selector: 'app-home',

  template: `
    <h1>Angular</h1>
  `,

  styles: `
    h1 {
      font-size: 30px;
    }
  `
})
export class Home {
}

Conceptually:

External
--------

templateUrl → HTML file
styleUrl    → CSS file


Inline
------

template → HTML inside metadata
styles   → CSS inside metadata

For larger components, external files are usually easier to maintain.

14. providers

A component can provide services through its metadata.

Example:

@Component({
  selector: 'app-home',
  providers: [ArticleService],
  templateUrl: './home.html'
})
export class Home {
}

This creates a provider at the component's injector level.

That has an important implication:

A service provided at the component level can have a different lifetime/scope from a service provided application-wide.

For example, this:

@Injectable({
  providedIn: 'root'
})

generally provides the service application-wide.

Whereas:

@Component({
  providers: [ArticleService]
})

provides it through that component's injector.

This is useful in specific scenarios but should not be added to every component unnecessarily.

15. changeDetection

Angular needs to determine when the component's view should be checked and updated.

Component metadata can configure its change-detection strategy.

For example:

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

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

You may encounter:

ChangeDetectionStrategy.Default

and:

ChangeDetectionStrategy.OnPush

OnPush can reduce unnecessary checking when a component is designed appropriately.

Change detection itself is a separate important Angular topic, so it is enough here to remember:

changeDetection configures how Angular checks the component's view for updates.

16. encapsulation

Angular can control how component styles are scoped.

Example:

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

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

Common options include:

ViewEncapsulation.Emulated
ViewEncapsulation.None
ViewEncapsulation.ShadowDom

Emulated

Angular scopes styles so they generally apply to that component's view.

This is the commonly used/default behavior.

None

Component styles are not encapsulated and can behave globally.

ShadowDom

Uses the browser's native Shadow DOM encapsulation.

Again, style encapsulation deserves its own detailed topic. For component metadata, remember:

encapsulation controls how Angular handles the component's styles.

17. Complete Basic Metadata Example

A typical standalone component could be:

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

@Component({

  selector: 'app-home',

  standalone: true,

  imports: [
    RouterLink
  ],

  templateUrl: './home.html',

  styleUrl: './home.css'

})
export class Home {

  title = 'Welcome to Angular';

}

Understand the responsibility of each part:

@Component
    |
    +-- selector
    |      ↓
    |   How component is identified
    |
    +-- standalone
    |      ↓
    |   Standalone component
    |
    +-- imports
    |      ↓
    |   Template dependencies
    |
    +-- templateUrl
    |      ↓
    |   HTML
    |
    +-- styleUrl
           ↓
        Styling

Then:

export class Home {
  title = 'Welcome to Angular';
}

contains the actual component state/behavior.

18. Metadata vs Component Class

This distinction is very important.

Consider:

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

  title = 'Angular';

  showMessage() {
    alert('Welcome');
  }

}

Metadata

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

tells Angular how to configure/use the component.

Class

export class Home {

  title = 'Angular';

  showMessage() {
    alert('Welcome');
  }

}

contains:

Properties
Methods
State
Behavior

Therefore:

19. Component Metadata vs Application Configuration

Do not confuse:

@Component({...})

with:

app.config.ts

Component Metadata

Configures one component.

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

Application Configuration

Configures application-level providers.

For example:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

Think:

@Component
     ↓
Component configuration


app.config.ts
     ↓
Application-level configuration

20. How Was It Before Standalone Components?

This is important.

Earlier NgModule-Based Angular

Component metadata looked similar:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

But the component normally had to be declared in an NgModule:

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    CommonModule
  ]
})
export class HomeModule {
}

So dependencies were often organized through modules.

HomeComponent
      ↓
HomeModule
      ↓
imports: CommonModule

Modern Standalone Angular

The component can manage template dependencies directly:

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

Conceptually:

Home
 |
 +-- standalone
 |
 +-- imports
 |     ↓
 |  RouterLink
 |
 +-- template
 |
 +-- styles

Main Difference

21. Component Metadata Flow

Suppose Angular encounters:

<app-home></app-home>

Conceptually:

<app-home>
     ↓
Angular finds matching selector
     ↓
selector: 'app-home'
     ↓
Home Component
     ↓
Reads component metadata
     |
     +---- templateUrl
     |        ↓
     |     home.html
     |
     +---- styleUrl
     |        ↓
     |     home.css
     |
     +---- imports
              ↓
        Template dependencies

Then Angular can render the component.

This is why metadata is so important: it provides Angular with the information needed to understand the component.

22. Advantages of Component Metadata

Clear Configuration

Component configuration is kept close to the component class.

Connects Component Parts

Metadata connects:

TypeScript
HTML
CSS
Dependencies

Supports Standalone Architecture

Dependencies can be defined directly through:

imports: []

Configurable Behavior

Angular supports configuration such as:

Providers
Change detection
Style encapsulation

Declarative

Instead of manually telling Angular how to construct every UI element, you describe the component through metadata.

23. Disadvantages / Considerations

Component metadata itself is essential, but poor usage can create problems.

Too Many Imports

A component with a very large imports collection may indicate that the component is doing too much.

Incorrect Provider Scope

Putting services into:

providers: []

without understanding DI scope can result in additional service instances.

Large Inline Templates

This:

template: `...hundreds of lines...`

can become difficult to maintain.

For large UI, prefer:

templateUrl: './home.html'

Large Inline Styles

Similarly, large CSS blocks are usually easier to maintain in external stylesheets.

24. Key Points

For interviews, remember:

• Component metadata is supplied using the @Component decorator.
• It tells Angular how a component should be configured and used.
• selector identifies the component in templates.
• templateUrl points to an external HTML template.
• template defines an inline template.
• styleUrl points to an external stylesheet.
• styles defines inline styles.
• imports specifies template dependencies for standalone components.
• providers can define component-level service providers.
• changeDetection controls the component's change-detection strategy.
• encapsulation controls style encapsulation.
• Metadata is different from the component class.
• The class contains state and behavior.
• Modern Angular favors standalone components.
• Older Angular applications commonly declare components in NgModules.

The easiest way to remember:

              @Component
                   |
        COMPONENT METADATA
                   |
     +-------------+-------------+
     |             |             |
 selector      template       styles
     |
 imports
     |
 providers
     |
 configuration
                   ↓
            Component Class
                   ↓
           State + Behavior

25. Interview Questions and Answers

Q1. What is component metadata in Angular?

Answer:

Component metadata is configuration information supplied through the @Component decorator that tells Angular how a component should be created and used, including its selector, template, styles, imports, and other component-level settings.

Q2. Which decorator defines component metadata?

Answer:

The:

@Component()

decorator.

It is imported from:

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

Q3. What is the difference between component metadata and component class?

Answer:

Metadata describes how Angular should configure the component.

The component class contains the component's properties, state, methods, and behavior.

Metadata
   ↓
Angular Configuration

Class
   ↓
State + Behavior

Q4. What does selector do?

Answer:

selector tells Angular how the component can be identified in a template.

selector: 'app-home'

Usage:

<app-home></app-home>

Q5. What is the difference between template and templateUrl?

Answer:

template contains inline HTML:

template: `<h1>Hello</h1>`

templateUrl references an external HTML file:

templateUrl: './home.html'

Q6. What is the purpose of imports in component metadata?

Answer:

For standalone components, imports specifies the components, directives, pipes, and Angular features that the component's template can use.

For example:

imports: [RouterLink]

allows the template to use RouterLink.

Q7. What does standalone: true mean?

Answer:

It means the component is standalone and does not need to be declared inside an NgModule.

Q8. What does providers do?

Answer:

providers registers dependencies at the component's injector level.

For example:

providers: [ArticleService]

This can create a service scope associated with that component hierarchy rather than simply using an application-wide provider.

Q9. What is changeDetection?

Answer:

It configures how Angular checks the component's view for changes.

For example:

changeDetection: ChangeDetectionStrategy.OnPush

Q10. What is encapsulation?

Answer:

It controls how Angular handles the component's CSS style encapsulation.

Common options are:

Emulated
None
ShadowDom

Q11. How did component metadata work before standalone Angular?

Answer:

The @Component decorator was still used, but components were normally declared inside an NgModule, and many template dependencies were made available through module imports.

With standalone components, dependencies can be imported directly through the component's imports metadata.

Interview Summary

Component metadata is the configuration supplied through Angular's @Component decorator. It tells Angular how a component should be used and rendered, including its selector, template, styles, dependencies, providers, and other behavior. The metadata configures the component, while the TypeScript class contains its state and behavior. Modern Angular standalone components can directly declare their template dependencies using the imports metadata property.