NG8004: No pipe found with name 'uppercase'. [plugin angular-compiler]

Question

my components name is heroes

heroes.component.ts

import { Component } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  standalone: true,
  imports: [],
  templateUrl: './heroes.component.html',
  styleUrl: './heroes.component.css'
})
export class HeroesComponent {
  hero : Hero={
    id:1,
    name :'Windstorm'
  };

}

and heroes.component.html

<h2>{{hero.name| uppercase }} Details</h2>

compilar showing error like this-

X [ERROR] NG8004: No pipe found with name 'uppercase'. [plugin angular-compiler]

src/app/heroes/heroes.component.html:1:17:
  1 │ <h2>{{hero.name| uppercase }} Details</h2>
    ╵                  ~~~~~~~~~

Error occurs in the template of component HeroesComponent.

src/app/heroes/heroes.component.ts:8:15:
  8 │   templateUrl: './heroes.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

In order to use uppercase pipe we need to import the module/pipe for the standalone component to use this functionality

importing module, which contains uppercase pipe!

import {CommonModule} from '@angular/common';
...
@Component({
  selector: 'app-heroes',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './heroes.component.html',
  styleUrl: './heroes.component.css'
})
export class HeroesComponent {
...

importing just the pipe (UpperCasePipe)

import {UpperCasePipe} from '@angular/common';
...
@Component({
  selector: 'app-heroes',
  standalone: true,
  imports: [UpperCasePipe],
  templateUrl: './heroes.component.html',
  styleUrl: './heroes.component.css'
})
export class HeroesComponent {
...

the usage for this pipe will be below on the HTML

{{ value_expression | uppercase }}