Standalone pipes and directives in Angular - Mini Project: Build & Apply

Using Standalone Pipes and Directives in Angular

📖 Scenario: You are building a simple Angular app that displays a list of product names. You want to highlight product names that are longer than a certain length by changing their color. To do this, you will create a standalone pipe to check the length and a standalone directive to apply the highlight style.

🎯 Goal: Build an Angular component that uses a standalone pipe to check if a product name is long and a standalone directive to highlight those long names in red color.

📋 What You'll Learn

Create a standalone pipe named LongNamePipe that returns true if a string's length is greater than 5

Create a standalone directive named HighlightDirective that changes text color to red

Use the pipe and directive in a standalone component named ProductListComponent

Display a list of product names and highlight those with long names using the pipe and directive

💡 Why This Matters

🌍 Real World

Standalone pipes and directives help you build reusable and modular UI features in Angular apps without needing to declare them in NgModules. This makes your code cleaner and easier to maintain.

💼 Career

Understanding standalone components, pipes, and directives is essential for modern Angular development. It improves your ability to write modular, testable, and scalable front-end code, which is highly valued in Angular developer roles.

1

Create the product list data

Create a standalone component named ProductListComponent with a products array containing these exact strings: 'Apple', 'Banana', 'Cherry', 'Dragonfruit', and 'Elderberry'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    
      {{ product }}
    
  `
})
export class ProductListComponent {
  // Your code here
}

Need a hint?

Define a products array inside the ProductListComponent class with the exact product names.

2

Create the standalone pipe to check long names

Create a standalone pipe named LongNamePipe that implements PipeTransform. It should have a transform method that takes a string and returns true if the string length is greater than 5, otherwise false.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    
      {{ product }}
    
  `
})
export class ProductListComponent {
  products = ['Apple', 'Banana', 'Cherry', 'Dragonfruit', 'Elderberry'];
}

@Pipe({
  name: 'longName',
  standalone: true
})
export class LongNamePipe implements PipeTransform {
  // Your code here
}

Need a hint?

Use @Pipe decorator with standalone: true. Implement transform to return true if value.length > 5.

3

Create the standalone directive to highlight text

Create a standalone directive named HighlightDirective that changes the text color to red by setting the color style on the host element. Use @Directive with standalone: true and inject ElementRef in the constructor to set the style.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    
      {{ product }}
    
  `
})
export class ProductListComponent {
  products = ['Apple', 'Banana', 'Cherry', 'Dragonfruit', 'Elderberry'];
}

@Pipe({
  name: 'longName',
  standalone: true
})
export class LongNamePipe implements PipeTransform {
  transform(value: string): boolean {
    return value.length > 5;
  }
}

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    // Your code here
  }
}

Need a hint?

Use @Directive with standalone: true and selector [appHighlight]. In constructor, set this.el.nativeElement.style.color = 'red'.

4

Use the pipe and directive in the component template

Update the ProductListComponent template to use LongNamePipe and HighlightDirective. Add imports array to the component decorator including LongNamePipe and HighlightDirective. In the <li> element, add *ngIf="product | longName" with appHighlight directive to highlight long names. Also show product names without highlight if the name is not long.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [LongNamePipe, HighlightDirective],
  template: `
    
      
    
  `
})
export class ProductListComponent {
  products = ['Apple', 'Banana', 'Cherry', 'Dragonfruit', 'Elderberry'];
}

@Pipe({
  name: 'longName',
  standalone: true
})
export class LongNamePipe implements PipeTransform {
  transform(value: string): boolean {
    return value.length > 5;
  }
}

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    this.el.nativeElement.style.color = 'red';
  }
}

Need a hint?

Add imports array with LongNamePipe and HighlightDirective in the component decorator. Use two <li> elements with *ngIf to separate highlighted and normal products.