Creating custom pipes in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom pipe class with the correct decorator.

Angular

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

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

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

Atransform

BExclaimPipe

CpipeName

Dexclaim

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name instead of a simple pipe name string.

Leaving the name property empty.

The @Pipe decorator requires a 'name' property which is the pipe's name used in templates. Here, 'exclaim' is the correct pipe name.

2fill in blank

medium

Complete the transform method signature to accept a number and return a string.

Angular

transform(value: [1]): string {
  return value.toFixed(2);
}

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

Aboolean

Bnumber

Cany

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type which does not have toFixed method.

Using boolean type which is invalid here.

The transform method receives the input value. Here, it should be a number to use toFixed(2).

3fill in blank

hard

Fix the error in the pipe transform method to handle null or undefined input safely.

Angular

transform(value: string | null | undefined): string {
  return value[1] + '!';
}

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

A?.

B!

C|| ''

D?? ''

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!' which asserts non-null but can cause runtime errors if value is null.

Using '?.' which returns undefined if value is null, causing concatenation to fail.

Using '|| ''' ensures that if value is null or undefined, it defaults to an empty string before concatenation.

4fill in blank

hard

Fill both blanks to create a pipe that converts a string to uppercase and appends a suffix.

Angular

transform(value: string, suffix: string = '[1]'): string {
  return value.[2]() + suffix;
}

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

A'!!!'

BtoUpperCase

CtoLowerCase

D'???'

Attempts:

3 left

💡 Hint

Common Mistakes

Using toLowerCase instead of toUpperCase.

Using suffix without quotes.

The default suffix is '!!!' and the string method to convert to uppercase is toUpperCase().

5fill in blank

hard

Fill all three blanks to create a pipe that formats a date with a given format and locale.

Angular

transform(value: Date, format: string = '[1]', locale: string = '[2]'): string {
  return new Intl.DateTimeFormat([3], { dateStyle: format }).format(value);
}

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

A'medium'

B'en-US'

Clocale

D'short'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing locale as a string literal instead of variable.

Using incorrect format strings.

The default format is 'medium', locale is 'en-US', and the Intl.DateTimeFormat uses the locale variable.