Standalone pipes and directives in Angular - Step-by-Step Execution

Concept Flow - Standalone pipes and directives

Create Pipe/Directive

↓

Add standalone: true

↓

Use in Component

↓

Import Pipe/Directive directly

↓

Angular applies pipe/directive

↓

Render updated view

This flow shows how to create a standalone pipe or directive, import it directly into a component, and have Angular apply it during rendering.

Execution Sample

Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exclaim',
  standalone: true
})
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

Defines a standalone pipe named 'exclaim' that adds an exclamation mark to a string.

Execution Table

Step	Action	Evaluation	Result
1	Create ExclaimPipe with standalone: true	Pipe class defined	ExclaimPipe ready to use standalone
2	Import ExclaimPipe in component imports array	Component imports updated	Component can use ExclaimPipe directly
3	Use {{ 'Hello' | exclaim }} in template	Pipe transform called with 'Hello'	'Hello!' rendered in view
4	Change input to 'Hi'	Pipe transform called with 'Hi'	'Hi!' rendered in view
5	Remove ExclaimPipe from imports	Angular error on template	Pipe not found error
6	Add ExclaimPipe back to imports	Pipe available again	Template renders correctly
7	End of usage	No further changes	View stable with pipe applied

💡 Execution stops after the pipe is used and the view renders with the transformed value.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
inputString	undefined	'Hello'	'Hi'	'Hi'
pipeOutput	undefined	'Hello!'	'Hi!'	'Hi!'
componentImports	[]	[ExclaimPipe]	[ExclaimPipe]	[ExclaimPipe]

Key Moments - 3 Insights

Why do we add 'standalone: true' to the pipe or directive?

Adding 'standalone: true' lets Angular know this pipe or directive can be used without declaring it in a module, as shown in step 1 and step 2 of the execution_table.

What happens if we forget to import the standalone pipe in the component?

As seen in step 5, Angular throws an error because the pipe is not found in the component's imports, so it cannot apply the transformation.

Can we use standalone pipes and directives in multiple components without modules?

Yes, by importing them directly in each component's imports array, as demonstrated in step 2, they can be reused without needing a module.

Visual Quiz - 3 Questions

Look at the execution_table, what is the pipeOutput after step 3?

A 'Hi!'

B 'Hello!'

C 'Hello'

D undefined

💡 Hint

Check the pipeOutput value in the variable_tracker after step 3.

At which step does Angular throw an error because the pipe is missing?

A Step 5

B Step 4

C Step 2

D Step 6

💡 Hint

Look for the step mentioning 'Pipe not found error' in the execution_table.

If we remove 'standalone: true' from the pipe, what changes in the usage?

A The pipe works without importing it

B The pipe can be used in any component without imports

C We must declare the pipe in a module before using it

D Angular automatically adds it to all components

💡 Hint

Standalone pipes require 'standalone: true' to avoid module declarations, see concept_flow.

Concept Snapshot

Standalone pipes and directives in Angular:
- Add 'standalone: true' in @Pipe or @Directive decorator
- Import them directly in component's imports array
- Use in templates without module declarations
- Enables simpler, modular reuse
- Angular applies them during rendering automatically

Full Transcript

This visual execution trace shows how to create and use standalone pipes and directives in Angular. First, we define a pipe with 'standalone: true' so it can be used without a module. Then, we import it directly in the component's imports array. When the template uses the pipe, Angular calls its transform method and updates the view with the transformed value. If the pipe is not imported, Angular throws an error. This approach simplifies reuse and avoids module boilerplate.

Practice

1. What does adding standalone: true in an Angular pipe or directive decorator do?

easy

A. It disables the pipe or directive from being used in templates.

B. It allows the pipe or directive to be used without declaring it in an NgModule.

C. It makes the pipe or directive private to the module.

D. It automatically imports the pipe or directive into all components.

Solution

1. Step 1: Understand the role of standalone flag

   The standalone: true flag in Angular marks a pipe or directive so it does not require declaration inside an NgModule.

2. Step 2: Effect on usage

   This means you can import the standalone pipe or directive directly into components without needing a module.

3. Final Answer:

   It allows the pipe or directive to be used without declaring it in an NgModule. -> Option B

4. Quick Check:

   standalone: true means no NgModule needed [OK]

Hint: Standalone means no NgModule declaration needed [OK]

Common Mistakes:

• Thinking standalone makes directive private
• Assuming standalone disables usage
• Believing standalone auto-imports everywhere

2. Which of the following is the correct way to declare a standalone directive in Angular?

easy

A. @Directive({ selector: '[appHighlight]' })

B. @Directive({ selector: '[appHighlight]', standalone: false })

C. @Directive({ selector: 'appHighlight', standalone: true })

D. @Directive({ selector: '[appHighlight]', standalone: true })

Solution

1. Step 1: Check selector syntax

   For attribute directives, the selector must be in square brackets, e.g., '[appHighlight]'.

2. Step 2: Verify standalone flag

   To make a directive standalone, standalone: true must be set in the decorator.

3. Final Answer:

   @Directive({ selector: '[appHighlight]', standalone: true }) -> Option D

4. Quick Check:

   Standalone directive needs selector with [] and standalone: true [OK]

Hint: Standalone directives need standalone: true and correct selector [OK]

Common Mistakes:

• Missing square brackets in selector for attribute directive
• Setting standalone to false or omitting it
• Using element selector instead of attribute selector

3. Given this standalone pipe:

@Pipe({name: 'exclaim', standalone: true})
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

What will be the output of this template?

<div>{{ 'Hello' | exclaim }}</div>

medium

A. Error: Pipe 'exclaim' not found

B. <div>Hello!</div>

C. <div>Hello</div>

D. <div>Hello!!</div>

Solution

1. Step 1: Check pipe declaration and usage

   The pipe is standalone and must be imported into the component using it.

2. Step 2: Analyze template usage without import

   If the component does not import the standalone pipe, Angular will not recognize it, causing an error.

3. Final Answer:

   Error: Pipe 'exclaim' not found -> Option A

4. Quick Check:

   Standalone pipe must be imported to use [OK]

Hint: Standalone pipes need explicit import in component [OK]

Common Mistakes:

• Assuming standalone pipes auto-import
• Expecting output without importing pipe
• Confusing pipe transform logic with usage

4. You have this standalone directive:

@Directive({ selector: '[appColor]', standalone: true })
export class ColorDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.color = 'red';
  }
}

When you use <div appColor>Text</div> in a component template but forget to import ColorDirective in the component, what happens?

medium

A. The directive applies but with default styles.

B. The text appears red as expected.

C. Angular throws a template parse error about unknown directive.

D. The app crashes at runtime with a null reference error.

Solution

1. Step 1: Understand standalone directive import

   Standalone directives must be imported into the component's imports array to be recognized.

2. Step 2: Effect of missing import

   If the directive is not imported, Angular does not know about it and throws a template parse error.

3. Final Answer:

   Angular throws a template parse error about unknown directive. -> Option C

4. Quick Check:

   Missing import causes template parse error [OK]

Hint: Always import standalone directives in component imports [OK]

Common Mistakes:

• Assuming directive works without import
• Expecting default styles without directive
• Confusing runtime errors with template errors

5. You want to create a standalone pipe that converts a string to uppercase and use it in multiple components without adding it to any NgModule. Which steps are correct?

1. Add standalone: true in the pipe decorator.
2. Import the pipe in each component's imports array.
3. Declare the pipe in a shared NgModule.
4. Use the pipe in templates after importing.

Choose the correct combination.

hard

A. Steps 1, 2, and 4 only

B. Steps 1 and 3 only

C. Steps 2, 3, and 4 only

D. All steps 1, 2, 3, and 4

Solution

1. Step 1: Understand standalone pipe creation

   Adding standalone: true allows the pipe to be used without NgModule declaration.

2. Step 2: Import in components and use

   Each component that uses the pipe must import it in its imports array and then use it in templates.

3. Step 3: NgModule declaration is unnecessary

   Declaring the pipe in a shared NgModule is not needed and contradicts standalone usage.

4. Final Answer:

   Steps 1, 2, and 4 only -> Option A

5. Quick Check:

   Standalone pipe needs standalone: true, import in components, use in template [OK]

Hint: Standalone pipes skip NgModule, import in components [OK]

Common Mistakes:

• Declaring standalone pipes in NgModules
• Forgetting to import pipe in components
• Assuming usage without import