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.