Angular 15 Lowercase pipe tutorial | How to Convert a string to small case example

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

This guide will teach you how to use typescript to convert a string to lowercase in Angular. It also includes an example, of how to use ‘Angular LowerCasePipe` in Angular HTML and typescript components.

For a string, lowercase means to transform all letters into a small case.

For example, if a string is passed

Angular Lowercase Example Tutorial

and output pipe returns all characters are converted to small case

angular lowercase example tutorial

We can achieve this by writing our code or using an existing Angular LowerCasePipe.

Angular core has a pipe called LowerCasePipe that converts a string to lowercase. To make lowercase pipework in an Angular application, you need to include CommonModule.

#Angular Lower Case Pipe syntax

Angular provides an inbuilt pipe LowerCase from CommonModule in Angular Core. This pipe takes an input string, converts it d returns a string as output in lowercase.

syntax:

{
  {
    expression | lowercase;
  }
}

expression: is either string or typescript expression value lowercase: Angular core pipe

#How to Convert String to lowercase in Angular Component

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

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-lower-case-pipe",
  templateUrl: "./lower-case-pipe.component.html",
  styleUrls: ["./lower-case-pipe.component.scss"],
})
export class LowerCasePipeComponent {
  heading = "Angular Lowercase Example Tutorial";
  constructor() {}
}

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

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

And the output seen in the browser is

angular lowercase example tutorial

Important points:

• LowerCase Pipe takes string and any types only
• String text can have 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.

This can also be used typescript file with custom code as seen below

#Angular Lower Case in typescript component file example

This section covers how to use LowerCasePipe in typescript code directly without using it in the HTML component.

You can use this typescript code.

• In A component, Inject Initialize LowerCasePipe instance in a constructor
• String is converted to Lowercase by calling the transform method inside ngOnInit or button click

import { Component, OnInit } from '@angular/core';
import { LowercasePipe } from '@angular/common';

@Component({
  selector: 'app-lower-case-pipe',
  templateUrl: './lower-case-pipe.component.html',
  styleUrls: ['./lower-case-pipe.component.scss'],
    providers: [LowercasePipe]

})
export class LowerCasePipeComponent implements OnInit {
    heading="Angular Lowercase Example Tutorial";
    content = " Transform Content to Small case";
    constructor(private lowerCasePipe: LowercasePipe) {
      this.content=this.lowerCasePipe.transform(this.content);
  }
  }

  ngOnInit(): void {
  }
}

In HTML template component, you can print

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

#angular lower pipe with an error not working

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

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

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 LowerCasePipe!

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

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

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

Third Error, TS2769: No overload matches this call.

This error reproduce when you are converting a variable of a number using lowercase

src/app/lower-case-pipe/lower-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 | lowercase;
  }
}

It is solved by passing a variable of string for lowercase pipe

#Conclusion

In this post, we have learned the following things.

• Angular lowercase pipe component example
• lowercase example in a Typescript ts file
• Fixing an Angular lowercase pipe not working with an error