Why Metadata is Important in Angular

🧩 What is a Component Decorator?

The @Component decorator is a TypeScript decorator that tells Angular:

"Hey, this class is a component and here’s some extra information about it."

It's applied above the class definition and includes a metadata object.

---

🔧 Basic Syntax

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  // Component logic here
}

---

📦 Metadata Properties Breakdown

Property	Description
selector	The name used to include the component in HTML (<app-my-component>).
template	Inline HTML template.
templateUrl	External HTML file for the template.
styles	Inline styles for the component.
styleUrls	External CSS or SCSS files.
providers	List of services/providers available only to this component and its children.
animations	Angular animations defined for this component.
encapsulation	Controls how styles are scoped to the component (e.g., Emulated, None, ShadowDom).

---

📘 Example with Inline Template & Styles

@Component({
  selector: 'app-inline-example',
  template: `
Hello {{ name }}
`,
  styles: [`h1 { color: blue; }`]
})
export class InlineExampleComponent {
  name = 'Angular';
}

---

💡 Why Metadata is Important

• Helps Angular render the component correctly.
• Defines the structure, style, and behavior of the component.
• Enables encapsulation and modularity.

---

🧠 Summary

• @Component decorator turns a class into a component.
• Metadata like selector, templateUrl, and styleUrls configure how the component appears and works.
• You can use either external files or inline content for templates and styles.

---