Uppercase Pipe in Angular: What It Is and How to Use It

The uppercase pipe in Angular is a built-in feature that transforms text to all uppercase letters in templates. It is used by adding | uppercase after a string expression to display the text in capital letters.

How It Works

The uppercase pipe in Angular acts like a simple translator for your text. Imagine you have a note written in lowercase, and you want to shout it out loud by making all letters capital. The pipe does exactly that but in your app's display.

When you use | uppercase in your template, Angular takes the string value and changes every letter to its uppercase form before showing it on the screen. This happens automatically whenever the data changes, so your text always appears in uppercase without changing the original data.

Example

This example shows how to use the uppercase pipe in an Angular template to convert a name to uppercase letters.

typescript

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

@Component({
  selector: 'app-root',
  template: `<p>Original: {{ name }}</p>
             <p>Uppercase: {{ name | uppercase }}</p>`
})
export class AppComponent {
  name = 'angular learner';
}

Output

Original: angular learner
Uppercase: ANGULAR LEARNER

When to Use

Use the uppercase pipe when you want to emphasize text by showing it in all capital letters without changing the original data. It is helpful for titles, labels, or any text that needs to stand out visually.

For example, you might want to display user names, headings, or buttons in uppercase to improve readability or follow a design style. Since it works in the template, you don't need to modify your data in the component code.

Key Points

• The uppercase pipe transforms text to all capital letters in the template.
• It does not change the original data, only the displayed text.
• Useful for styling text like headings, labels, or buttons.
• Easy to use by adding | uppercase after a string in the template.

Key Takeaways

The uppercase pipe converts text to capital letters in Angular templates.

It changes only the display, keeping the original data intact.

Use it to emphasize or style text without extra code.

Apply it simply by adding '| uppercase' in your template expressions.