Standalone pipes and directives in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a standalone pipe in Angular.

Angular

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

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

Drag options to blanks, or click blank then click option'

Atrue

Bnull

C'yes'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it.

Setting standalone: true makes the pipe standalone, so it can be used without declaring it in an NgModule.

2fill in blank

medium

Complete the code to declare a standalone directive in Angular.

Angular

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

@Directive({
  selector: '[highlight]',
  standalone: [1]
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cundefined

D'true'

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'true' instead of boolean true.

Standalone directives must have standalone: true to be used without NgModules.

3fill in blank

hard

Fix the error in the standalone pipe declaration by completing the missing property.

Angular

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

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

Drag options to blanks, or click blank then click option'

Adeclarations

Bproviders

Cimports

Dexports

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'providers' or 'declarations' which are not valid here.

The imports property is used to import other standalone modules or Angular modules needed by the pipe.

4fill in blank

hard

Fill both blanks to create a standalone directive that imports CommonModule and exports itself.

Angular

import { Directive } from '@angular/core';
import { CommonModule } from '@angular/common';

@Directive({
  selector: '[blink]',
  standalone: true,
  [1]: [CommonModule],
  [2]: [BlinkDirective]
})
export class BlinkDirective {}

Drag options to blanks, or click blank then click option'

Aimports

Bexports

Cproviders

Ddeclarations

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'providers' or 'declarations' with 'imports' or 'exports'.

The imports property allows the directive to use CommonModule features. The exports property makes the directive available to other components or modules.

5fill in blank

hard

Fill all three blanks to create a standalone pipe that imports CommonModule, exports itself, and has a pure transform method.

Angular

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

@Pipe({
  name: 'capitalize',
  standalone: true,
  [1]: [CommonModule],
  [2]: [CapitalizePipe],
  pure: [3]
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Drag options to blanks, or click blank then click option'

Aimports

Bexports

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting pure to false or omitting imports/exports.

The pipe imports CommonModule, exports itself for use elsewhere, and is marked pure for performance optimization.