Chapter 2.1☕ 15 min read

@Component Decorator — Complete

The @Component decorator is the heart of every Angular component.

01What is a Decorator

@Component is a decorator — a special TypeScript feature that adds metadata to a class. It tells Angular: "Hey, this class is a component!"

Think of it like a restaurant name board — just by looking at the board outside, you know what's inside. Similarly, the @Component decorator tells Angular what template to use, how to style it, and how to find it in the HTML.

In TypeScript, decorators use the @ symbol before the function name:

@Component({ ... })   // ✅ This is a decorator\nexport class BiryaniComponent {}

The decorator accepts a configuration object with various properties. Let's explore each one.

02selector — How Angular Finds Your Component

The selector property defines how Angular identifies and uses your component in HTML templates.

There are three types of selectors:

Element Selector: 'app-biryani' — Used as <app-biryani></app-biryani> in HTML. Most recommended!
Class Selector: '.biryani-card' — Used as <div class="biryani-card"></div>. Less common.
Attribute Selector: '[biryani]' — Used as <div biryani></div>. For special cases.

Selector = TSRTC bus number — Angular isko dhundhta hai template mein. When Angular sees app-biryani in HTML, it knows exactly which component to load.

Best practice: Always use element selectors with an app- prefix. This prevents conflicts with standard HTML elements.

03templateUrl vs template

The template and templateUrl properties define what HTML your component renders.

templateUrl: Points to a separate HTML file:

@Component({\n  selector: 'app-biryani',\n  templateUrl: './biryani.component.html'   // 📁 Separate file\n})

template: Writes HTML directly in the TypeScript file:

@Component({\n  selector: 'app-biryani',\n  template: '<h1>Hello Biryani!</h1>'   // 📝 Inline\n})

Which one to use? Always use templateUrl for real projects. Inline templates are only okay for tiny components with 1-2 lines of HTML.

"Separate file = alag plate mein biryani, inline = plate mein hi daal do" — Alag plate hamesha better hai.

04styleUrl vs styles

Just like templates, styles can also be external or inline.

styleUrl: Points to a separate CSS/SCSS file:

@Component({\n  selector: 'app-biryani',\n  styleUrl: './biryani.component.scss'   // 📁 Separate file\n})

styles: Writes CSS directly:

@Component({\n  selector: 'app-biryani',\n  styles: ['h1 { color: red; }']   // 📝 Inline array\n})

Important: You can add multiple style files using the older styleUrls array syntax:

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

In Angular 17+, the new styleUrl (singular, no 's') is preferred for single files. For multiple files, still use styleUrls.

05Other Important Properties

Here are some other important @Component properties you'll encounter:

standalone: true — Makes the component self-sufficient. No NgModule needed. Required in Angular 18!
imports: [] — Lists what this component needs (other components, directives, pipes). Only works with standalone components.
changeDetection: ChangeDetectionStrategy.OnPush — Improves performance by checking changes less often. Advanced topic.
encapsulation: ViewEncapsulation.None — Controls how styles are scoped. Default is Emulated. More in Chapter 2.4.
schemas: [CUSTOM_ELEMENTS_SCHEMA] — Allows web components and custom HTML tags without errors.

"Ye sab properties advanced hai — abhi yaad rakhlo, baad mein detail mein padhenge." For now, just know they exist. We'll cover each one in detail in later chapters.

Key Takeaways

✅ @Component is a TypeScript decorator that adds metadata to a class to make it an Angular component.
✅ Three selector types: element ('app-biryani'), class ('.biryani-card'), attribute ('[biryani]') — use element selectors with app- prefix.
✅ Use templateUrl for real projects (separate file), template only for tiny components.
✅ Use styleUrl for external styles (recommended), styles array only for tiny styles.
✅ standalone: true is required in Angular 18. It eliminates the need for NgModules.

Previous1.6 — Angular vs React vs Vue 📋 All Chapters Next Chapter2.2 — Templates Inline vs External →