Standalone pipes and directives in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a standalone directive affect component usage?

Consider an Angular standalone directive HighlightDirective that changes text color. If you apply it to a component's template without importing it in the component, what happens?

Angular

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'red');
  }
}

// Component template:
// <p appHighlight>This text should be red.</p>

A Angular throws a runtime error about missing directive import.

B The text will be red because standalone directives are globally available.

C The text will not be red because the directive is not imported in the component or module.

D The text color changes only if the directive is declared in a module.

💡 Hint

Standalone directives must be imported where used unless explicitly provided globally.

Standalone directives are not automatically global. You must import them in the component's imports array or in a module to use them.

📝 Syntax

intermediate

Correct syntax to declare a standalone pipe

Which of the following is the correct way to declare a standalone Angular pipe named ExclaimPipe that adds an exclamation mark?

A

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

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

B

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

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

C

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

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

D

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

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

💡 Hint

Standalone pipes require the standalone: true flag and a name.

Option D correctly declares a standalone pipe with a name. Option D misses the name, C is not standalone, and A explicitly disables standalone.

🔧 Debug

advanced

Why does this standalone directive not apply styles?

Given this standalone directive, why does the style not apply when used in a component?

Angular

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appBold]',
  standalone: true
})
export class BoldDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'font-weight', 'bold');
  }
}

// Component code:
// @Component({
//   selector: 'app-sample',
//   template: '<p appBold>Bold text</p>',
//   standalone: true,
//   imports: []
// })
// export class SampleComponent {}

A The directive is not imported in the component's imports array, so Angular ignores it.

B The directive selector is incorrect; it should be 'appBold' without brackets.

C Renderer2 cannot set styles in standalone directives.

D The component must declare the directive in declarations, not imports.

💡 Hint

Standalone components must import standalone directives explicitly.

Standalone directives must be imported in the component's imports array to be recognized. Without import, Angular ignores the directive.

❓ state_output

advanced

What is the output of this standalone pipe usage?

What will be the rendered output of this Angular component using a standalone pipe ReversePipe?

Angular

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

@Pipe({name: 'reverse', standalone: true})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

@Component({
  selector: 'app-root',
  template: '<p>{{ message | reverse }}</p>',
  standalone: true,
  imports: [ReversePipe]
})
export class AppComponent {
  message = 'hello';
}

A <p>olleh</p>

B <p>hello</p>

C <p>error: pipe not found</p>

D <p>undefined</p>

💡 Hint

The pipe reverses the string and is imported correctly.

The ReversePipe reverses the string 'hello' to 'olleh'. It is standalone and imported, so it works as expected.

🧠 Conceptual

expert

Why use standalone directives and pipes in Angular?

Which of the following is the main advantage of using standalone directives and pipes in Angular?

A They allow components to be used without importing any dependencies.

B They simplify dependency management by allowing direct imports without NgModules.

C They automatically make directives and pipes global across the app.

D They replace the need for Angular modules entirely.

💡 Hint

Think about how standalone features affect imports and modules.

Standalone directives and pipes let you import them directly in components, reducing the need to manage NgModules. They do not make features global automatically nor replace modules entirely.

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