{

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


Angular lowercase pipe 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 lower case pipework in an Angular application, you need to include `CommonModule`.



Angular Lower Case Pipe syntax

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

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 type 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 ts 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 Smallcase";
    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
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.