Component decorator and metadata in Angular - Step-by-Step Execution

Concept Flow - Component decorator and metadata

Define Component Class

↓

Apply @Component Decorator

↓

Add Metadata Object

↓

Angular Reads Metadata

↓

Create Component Instance

↓

Render Template with Metadata Info

↓

Component Displays in UI

The flow shows how Angular uses the @Component decorator with metadata to create and render a component.

Execution Sample

Angular

@Component({
  selector: 'app-hello',
  template: '<h1>Hello, Angular!</h1>'
})
export class HelloComponent {}

Defines a simple Angular component with a selector and inline template.

Execution Table

Step	Action	Metadata Read	Component Created	Rendered Output
1	Decorator @Component applied	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	No	No
2	Angular reads metadata	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	No	No
3	Angular creates HelloComponent instance	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	Yes	No
4	Angular renders template in DOM	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	Yes	<h1>Hello, Angular!</h1>
5	Component displayed in UI	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	Yes	<h1>Hello, Angular!</h1>

💡 Component fully created and template rendered in the UI.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
metadata	undefined	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}	{selector: 'app-hello', template: '<h1>Hello, Angular!</h1>'}
componentInstance	undefined	undefined	undefined	HelloComponent instance	HelloComponent instance
renderedTemplate	empty	empty	empty	empty	<h1>Hello, Angular!</h1>

Key Moments - 3 Insights

Why do we need the metadata object inside @Component?

The metadata tells Angular how to use the component, like what HTML tag to look for (selector) and what to show (template). See execution_table step 2 where Angular reads this info.

When is the component class actually created?

The class instance is created after Angular reads the metadata, as shown in execution_table step 3.

Does the template render before the component instance exists?

No, the component instance must exist first. The template renders only after the instance is created, as in steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, at which step does Angular create the component instance?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Check the 'Component Created' column in the execution_table.

According to the variable tracker, what is the value of 'renderedTemplate' after Step 3?

A undefined

B <h1>Hello, Angular!</h1>

C empty

D HelloComponent instance

💡 Hint

Look at the 'renderedTemplate' row and the 'After Step 3' column.

If the metadata selector was changed, which step in the execution table would be affected first?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Metadata is read by Angular in Step 2.

Concept Snapshot

@Component decorator adds metadata to a class.
Metadata includes selector, template, styles, etc.
Angular reads metadata to create and render the component.
Component class instance is created after metadata is read.
Template renders inside the selector tag in the DOM.

Full Transcript

This visual execution shows how Angular uses the @Component decorator and its metadata to create and display a component. First, the decorator is applied to the class with metadata like selector and template. Angular reads this metadata to know how to use the component. Then Angular creates an instance of the component class. After the instance exists, Angular renders the template HTML inside the DOM element matching the selector. The variable tracker shows metadata stays constant, the component instance is created at step 3, and the template renders at step 4. Key moments clarify why metadata is needed, when the instance is created, and the order of rendering. The quiz questions help check understanding of these steps. This process is essential for Angular to display components correctly in the UI.