Angular Component Decorator

Back to: Angular Tutorials For Beginners and Professionals

Angular Component Decorator

In this article, I will discuss the Angular Component Decorator in detail with Examples. Please read our previous article, which discusses the basic concepts of Angular Components with examples.

Angular components do not become functional just by writing a TypeScript class. Angular needs clear instructions about how to treat that class, what UI it controls, which styles apply, and how it should appear inside HTML. These instructions are provided using decorators, specifically the @Component decorator. By the end of this chapter, you will be able to understand the following pointers:

• What is a Decorator in Angular?
• What is Angular Component Decorator?
• Using @Component:
  • • selector
    • template vs templateUrl
    • styles vs styleUrls

What Is a Decorator in Angular?

A decorator in Angular is a special TypeScript feature that adds metadata to a class, method, property, or parameter. Metadata is simply extra information that Angular uses at runtime to decide how something should behave.

In simple terms, a decorator tells Angular what a class is and how it should be treated. Decorators always start with the @ symbol and are placed above the item they describe. Examples of commonly used Angular decorators include:

• @Component → Marks a class as a component
• @Directive → Marks a class as a directive
• @Pipe → Marks a class as a pipe
• @Injectable → Marks a class as a service

Without decorators, Angular would treat your code as plain TypeScript rather than part of the Angular framework.

What Is Angular Component Decorator?

The @Component Decorator is the most important decorator in Angular. It tells Angular:

• This class is a component
• Which HTML template belongs to it
• Which styles should be applied
• What selector represents this component in HTML

In technical terms, the @Component decorator provides metadata that Angular uses to create, configure, and render a component. Without @Component, a class is just a regular TypeScript class, and Angular will completely ignore it.

Basic Structure of @Component Decorator

A typical Angular component is defined using a TypeScript class combined with the @Component decorator. The following example represents the most common and recommended structure of an Angular component:

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css']
})
export class Welcome {
  message = 'Welcome to Angular';
}

In this structure, the export keyword makes the Welcome Component class available outside its file. Angular applications are built using a module-based architecture, where components must be imported and referenced by other files (such as parent components, routing configuration, or the Angular bootstrap process).

Because of this, every Angular component class must be exported. Without the export keyword, Angular cannot import, recognize, or render the component.

Role of the @Component Decorator

The @Component decorator provides metadata for the Welcome Component class. Metadata is additional information that Angular uses to understand how a class should behave within the Angular framework.

Angular reads this metadata before rendering anything on the screen. The object passed inside @Component({ … }) tells Angular how to build and display the component. This metadata answers key questions such as:

• What custom HTML tag represents this class?
• Where is the component’s template located?
• Which styles should be applied?

Angular reads this metadata during compilation and also uses it during runtime to correctly render and manage the component. Now, let us break down each property of the @Component decorator in detail.

Selector

In our example,

• selector: ‘app-welcome’

The selector property defines the custom HTML tag name that represents this component. It tells Angular: Whenever you see <app-welcome> in any template (in any HTML file), render this component at that location. The selector is how a component is placed into the UI.

How Angular Uses the Selector Internally

When Angular parses a template and encounters the following tag:

• <app-welcome></app-welcome>

Angular performs these steps internally:

1. Matches app-welcome with the selector defined in @Component
2. Finds the associated Welcome Component class
3. Loads its template (the HTML file linked via templateUrl)
4. Binds the template to the component class
5. Inserts the rendered output into the DOM at that exact location

In other words, the HTML content from welcome.html is rendered inside the parent template where <app-welcome> appears. It is important to understand that the selector itself does not render anything. It serves only as a marker or placeholder, indicating where Angular should insert the component’s UI.

Why a Prefix Like app- Is Used

Using a prefix such as app- is a recommended Angular convention because it:

• Prevents collision with native HTML elements
• Avoids conflicts with other UI libraries or frameworks
• Makes component tags easily identifiable
• Follows Angular style and naming guidelines

Best Practice: Always use a meaningful prefix such as app-, ui-, or feature- for component selectors.

templateUrl

In our example,

• templateUrl: ‘./welcome.html’

The templateUrl property specifies where the component’s HTML UI lives. It points to an external HTML file that defines:

• Structure of the UI
• Layout of elements
• Data bindings (for example, {{ message }})
• Event bindings (such as click events)

This HTML file represents the component’s view layer.

Why Angular Separates Template from Class

Angular strongly enforces the principle of Separation of Concerns:

• Component Class → Logic and data handling
• Template (HTML) → UI structure and presentation

This separation makes applications:

• Easier to read
• Easier to maintain
• Easier to debug
• Easier for multiple developers to work on the same codebase

By keeping logic and UI separate, Angular applications remain clean and scalable as they grow.

How Angular Uses templateUrl

At runtime, Angular performs the following steps:

1. Loads welcome.html
2. Compiles the template
3. Detects bindings such as {{ message }}
4. Connects those bindings to the component class properties
5. Keeps the UI automatically in sync with the component data

Whenever the message value changes in the class, Angular updates the UI without manual DOM manipulation.

styleUrls

In our example,

• styleUrls: [‘./welcome.css’]

The styleUrls property tells Angular which CSS files belong to this component. These styles are:

• Scoped to the component
• Applied only to its template
• Protected from leaking into other components

Why is styleUrls an Array?

The styleUrls property is defined as an array because a component can use multiple style files:

styleUrls: [
  './base.css',
  './theme.css'
]

This allows developers to split styles logically (base styles, themes, layouts) while still keeping them scoped to the component.

In this chapter, you learned how Angular understands and builds components using the @Component decorator. We discussed what decorators are, how metadata works, and how Angular links a component class with its template and styles. In the next article, I will discuss two important properties, i.e., template and templateUrl in detail as well as explore the difference between them.