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.