Standalone component declaration in Angular - Step-by-Step Execution

Concept Flow - Standalone component declaration

Write @Component decorator with standalone: true

↓

Define component metadata: selector, template, styles

↓

Create component class

↓

Use component directly without NgModule

↓

Angular renders component in DOM

This flow shows how to declare an Angular component as standalone and use it without needing an NgModule.

Execution Sample

Angular

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

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

Defines a standalone Angular component with a simple template.

Execution Table

Step	Action	Evaluation	Result
1	Read @Component decorator	Detect standalone: true	Component marked standalone
2	Parse selector 'app-hello'	Store selector	Selector ready for use
3	Parse template `<h1>Hello Standalone!</h1>`	Store template	Template ready to render
4	Create HelloComponent class	Class created	Component logic ready
5	Use <app-hello> in HTML	Angular recognizes standalone component	Component rendered in DOM
6	No NgModule needed	Standalone flag bypasses NgModule	Simpler component usage

💡 Component is standalone, so Angular renders it directly without NgModule.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
standalone	undefined	true	true	true	true
selector	undefined	'app-hello'	'app-hello'	'app-hello'	'app-hello'
template	undefined	undefined	`<h1>Hello Standalone!</h1>`	`<h1>Hello Standalone!</h1>`	`<h1>Hello Standalone!</h1>`
componentClass	undefined	undefined	undefined	HelloComponent class	HelloComponent class

Key Moments - 2 Insights

Why do we not need to declare this component in an NgModule?

Because the component has standalone: true (see execution_table step 1), Angular treats it as independent and does not require NgModule registration.

How does Angular know where to render the component?

Angular uses the selector 'app-hello' (execution_table step 2) to find matching HTML tags and render the component template there.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'standalone' after step 1?

A undefined

B false

C true

D null

💡 Hint

Check the 'standalone' variable in variable_tracker after Step 1.

At which step does Angular parse the component's template?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table for template parsing.

If we remove 'standalone: true', what changes in the execution flow?

A Angular requires NgModule to declare the component

B Component still renders without NgModule

C Selector is ignored

D Template is not parsed

💡 Hint

Refer to key_moments about standalone flag and NgModule requirement.

Concept Snapshot

Standalone Component Declaration in Angular:
- Use @Component decorator with standalone: true
- Define selector, template, and styles inside
- Export component class normally
- Use component directly in HTML without NgModule
- Simplifies component usage and modularity

Full Transcript

This lesson shows how to declare an Angular component as standalone by adding standalone: true in the @Component decorator. The selector and template are defined as usual. Angular then treats this component as independent, so it can be used directly in HTML without declaring it in an NgModule. The execution steps include reading the decorator, parsing selector and template, creating the component class, and rendering it in the DOM. Variables like standalone flag, selector, and template are tracked through these steps. Key points include understanding why NgModule is not needed and how Angular uses the selector to render the component. The visual quiz tests understanding of these steps and the effect of removing the standalone flag.

Practice

1. What does adding standalone: true in an Angular component's decorator do?

easy

A. Disables change detection for the component.

B. Makes the component lazy-loaded automatically.

C. Registers the component globally in the Angular app.

D. Declares the component as standalone, removing the need for NgModule declaration.

Solution

1. Step 1: Understand Angular component declaration

   Normally, Angular components must be declared inside an NgModule to be usable.

2. Step 2: Effect of standalone: true

   Setting standalone: true allows the component to be used without declaring it in any NgModule.

3. Final Answer:

   Declares the component as standalone, removing the need for NgModule declaration. -> Option D

4. Quick Check:

   Standalone component = no NgModule needed [OK]

Hint: Standalone means no NgModule needed for the component [OK]

Common Mistakes:

• Thinking standalone makes component lazy-loaded
• Assuming standalone registers component globally
• Confusing standalone with change detection settings

2. Which of the following is the correct syntax to declare a standalone component in Angular?

easy

A. @Component({ selector: 'app-test', standalone: true, template: 'Test' }) export class TestComponent {}

B. @Component({ selector: 'app-test', standalone: false, template: 'Test' }) export class TestComponent {}

C. @Component({ selector: 'app-test', standalone: true, templateUrl: 'test.html' }) export class TestComponent {} NgModule({ declarations: [TestComponent] })

D. @Component({ selector: 'app-test', standalone: true }) export class TestComponent { template: 'Test' }

Solution

1. Step 1: Check the standalone property usage

   The standalone property must be set to true inside the @Component decorator.

2. Step 2: Verify template declaration and class export

   The template can be inline with template or external with templateUrl. The class must be exported properly.

3. Final Answer:

   @Component({ selector: 'app-test', standalone: true, template: '<p>Test</p>' }) export class TestComponent {} -> Option A

4. Quick Check:

   Standalone true inside @Component with inline template [OK]

Hint: Standalone true must be inside @Component decorator [OK]

Common Mistakes:

• Setting standalone to false
• Declaring template outside the decorator
• Mixing NgModule declaration with standalone component

3. Given this standalone component declaration, what will be the rendered output?

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
Hello, {{ name }}!
`
})
export class HelloComponent {
  name = 'Angular';
}

medium

A. No output because component is standalone

B. Hello, {{ name }}!

C. Hello, Angular!

D. Error: Property 'name' is undefined

Solution

1. Step 1: Understand template interpolation

   The template uses {{ name }} which Angular replaces with the component's property value.

2. Step 2: Check the property value

   The component defines name = 'Angular', so interpolation outputs 'Angular'.

3. Final Answer:

   <h1>Hello, Angular!</h1> -> Option C

4. Quick Check:

   Template interpolation replaces {{ name }} with 'Angular' [OK]

Hint: Interpolation shows property value inside template [OK]

Common Mistakes:

• Thinking interpolation shows raw {{ name }}
• Assuming standalone disables property binding
• Expecting runtime error for missing property

4. Identify the error in this standalone component declaration:

@Component({
  selector: 'app-sample',
  standalone: true,
  template: '
Sample
',
  imports: [CommonModule]
})
export class SampleComponent {}

medium

A. The imports array must be inside @NgModule, not @Component

B. Missing import statement for CommonModule

C. CommonModule must be imported from '@angular/common' and declared in imports

D. CommonModule cannot be imported in standalone components

Solution

1. Step 1: Check imports usage in standalone component

   Standalone components can import modules like CommonModule via the imports array in the decorator.

2. Step 2: Verify import statement presence

   The code uses CommonModule in imports but does not import it from '@angular/common' at the top.

3. Final Answer:

   Missing import statement for CommonModule -> Option B

4. Quick Check:

   Imports array needs proper import statements [OK]

Hint: Always import modules before using in imports array [OK]

Common Mistakes:

• Thinking imports array is invalid in @Component
• Forgetting to import CommonModule from '@angular/common'
• Assuming CommonModule cannot be used in standalone components

5. You want to create a standalone Angular component that uses another standalone component called ButtonComponent. How should you declare the imports array in your component decorator?

hard

A. @Component({ standalone: true, imports: [ButtonComponent], template: '' })

B. @Component({ standalone: true, imports: ['ButtonComponent'], template: '' })

C. @Component({ standalone: true, imports: [NgModule], template: '' })

D. @Component({ standalone: true, template: '' })

Solution

1. Step 1: Understand how to use other standalone components

   Standalone components can import other standalone components by listing them in the imports array.

2. Step 2: Correct syntax for imports array

   The imports array must contain the component class itself, not a string or NgModule.

3. Final Answer:

   @Component({ standalone: true, imports: [ButtonComponent], template: '<app-button></app-button>' }) -> Option A

4. Quick Check:

   Imports array includes component classes, not strings [OK]

Hint: Import component classes directly, not strings or modules [OK]

Common Mistakes:

• Using string names instead of component classes in imports
• Importing NgModule instead of component
• Omitting imports array when using other standalone components