How to Convert a String to Uppercase in Angular pipe example

How to Convert a String to Uppercase in Angular pipe example

In this tutorial, you learn how to convert a string or statement into Uppercase with Angular typescript.

And also, How to use UpperCasePipe in Angular HTML and typescript components for example.

Uppercase for a string is to convert all letters into Uppercase.

We can achieve this using either writing our Code to convert or existing Angular UpperCasePipe.

Angular core provides pipes UpperCasePipe which transforms a string into an Upper case string.

In the Angular application, To make UpperCase pipe work, You have to include CommonModule.

This pipe takes an input as a string and returns the output as a string

For example, if a string is passed.

angular uppercase example tutorial

and output pipe returns all characters are converted to Upper case

ANGULAR UPPERCASE EXAMPLE TUTORIAL

Angular Upper Case Pipe syntax

This pipe accepts string input, transforms it, and outputs data in Uppercase. Angular provides an inbuilt pipe UpperCase in CommonModule.

syntax:

{
  {
    string_expression | uppercase;
  }
}

string_expression: is either string or typescript expression value uppercase: It is an inbuilt pipe provided by Angular.

How to Capitalize String in Angular Component

In the typescript Component, the variable heading is declared and initialized with a string text.

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  heading = "angular upper example tutorial";
}

In the Html component, uppercase pipe is used in the expression.

<div>
  <h2>{{ heading | uppercase }}</h2>
</div>

And the output seen in the browser is

Upper Case Pipe Example!

ANGULAR UPPERCASE EXAMPLE TUTORIAL
TEST CONTENT

Important points:

  • Uppercase Pipe takes the input of a type string only.
  • String can contain alphabets and numeric values
  • comma, a hyphen, and other special characters are allowed in a string

We have used pipe in the Angular HTML component.

It uses a typescript file with custom code as seen below.

Angular Upper Case in typescript component file example

Sometimes, We need to use UpperCasePipe in typescript code directly without using it in the HTML component.

You can use this typescript code.

  • In A component, Inject Initialize UpperCasePipe instance
  • String is converted to Uppercase by calling the transform method inside ngOnInit or button click
import { UpperCasePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-upper-case-pipe',
  templateUrl: './upper-case-pipe.component.html',
  styleUrls: ['./upper-case-pipe.component.scss'],
  providers: [UpperCasePipe]
})
export class UpperCasePipeComponent implements OnInit {

  constructor(private uppercasePipe: UpperCasePipe) { }
  heading = "angular-uppercase example tutorial";
  content = " test content";
  ngOnInit(): void {
    this.content = this.uppercasePipe.transform(this.content);
  }

}

In HTML template component, you can print

<div>
  <h2>{{ content }}</h2>
</div>

angular uppercase pipe not working

When you are using UpperCasePipe in Angular components, the Following are frequent errors that you encounter.

One Error, Error: InvalidPipeArgument: ” for pipe ‘UpperCasePipe’

Import CommonModule into app.module.ts as seen below

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, BrowserModule, AppRoutingModule],
  providers: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Another error NullInjectorError: No provider for UpperCasePipe!

To solve this error, You have to add the Providers with UpperCasePipe in the component as seen below.

import { UpperCasePipe } from '@angular/common';

@Component({
    selector: '',
    templateUrl: '',
    providers: [UpperCasePipe]
})

Third Error, TS2769: No overload matches this call.

This error reproduces when you are converting a variable of the number using uppercase.

src/app/upper-case-pipe/upper-case-pipe.component.html:4:7 - error TS2769: No overload matches this call. Overload 1 of 3, ‘(value: string): string’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘string’. Overload 2 of 3, ‘(value: null | undefined): null’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘null | undefined’. Overload 3 of 3, ‘(value: string | null | undefined): string | null’, gave the following error. The argument of type ‘number’ is not assignable to the parameter of type ‘string | null | undefined’.

In the typescript Component, You declared

salary = 1123;

In Html, you used as

{
  {
    salary | uppercase;
  }
}

This pipe takes only String and any type of only

Fourth error, error NG8004: No pipe found with name ‘lowercase’.

This error is caused by a misconfiguration in the Application module.

And also please import the module that contains this pipe. So, uppercase is declared in CommonModule.

Please import CommonModule in app.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";

@NgModule({
  declarations: [],
  imports: [CommonModule],
  providers: [],
  bootstrap: [],
})
export class AppModule {}

Conclusion

In this post, we have learned the following things

  • Angular uppercase pipe component example
  • uppercasePie example in Typescript.
  • Angular uppercase not working with an error