Angular10 percentPipe

Angular10 TitleCasePipe

Last Updated : 30 Apr, 2021

In this article, we are going to see what is TitleCasePipe in Angular 10 and how to use it.

TitleCasePipe is used to Transforms all the text to titlecase.

Syntax:

{{ value | TitleCasePipe }}

NgModule: Module used by TitleCasePipe is:

CommonModule

Approach:

Create the angular app to be used
There is no need for any import for the TitleCasePipe to be used
In app.component.ts define the variables that takes the TitleCasePipe value.
In app.component.html use the above syntax with '|' symbol to make TitleCasePipe element.
Serve the angular app using ng serve to see the output

Input value:

value: it takes a string value.

Example 1:

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Key Value object
    value : string = 'geeksforgeeks';
  }

app.component.html

<b>
  <div>
    titlecase value is : {{value | titlecase}}
  </div>
</b>

Output:

Example 2:

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // Key Value object
    value : string = 'geeksforgeeks';
  }

app.component.html

<b>
  <div>
    CamelCase value is : {{value}}
  </div>
  <div>
    TitleCase value is : {{value |titlecase}}
  </div>
</b>

Output:

Reference: https://angular.io/api/common/TitleCasePipe

Angular10 percentPipe

taran910

Improve

Article Tags :

Similar Reads

Angular10 LowerCasePipe

In this article, we are going to see what is LowerCasePipe in Angular 10 and how to use it. The LowerCasePipe is used to Transforms all the text to lowercase. Syntax: {{ value | lowercase }} NgModule: Module used by LowercaseCasePipe is: CommonModule Approach: Create the angular app to be usedThere

Angular10 SlicePipe

In this article, we are going to see what is SlicePipe in Angular 10 and how to use it. SlicePipeÂ is used to create an array containing a slice of the element. Syntax: {{ value | SlicePipeÂ }} NgModule: Module used by SlicePipe is: CommonModule Approach:Â Create the angular app to be usedThere is no

Angular10 percentPipe

In this article, we are going to see what is percentPipe in Angular 10 and how to use it. The percentPipeÂ is used to Transform a number to a percentage string. Syntax: {{ value | percent [ : digitsInfo [ : locale ] ] }} NgModule: Module used by percentPipe is: CommonModule Approach: Create the angul

Angular10 JsonPipe

In this article, we are going to see what is JsonPipe in Angular 10 and how to use it. JsonPipeÂ is used to convert an object its JSON representation Syntax: {{ value | json}} NgModule: Module used by JsonPipe is: CommonModule Approach:Â Create the angular app to be usedThere is no need for any impor

Angular 10 UpperCasePipe

In this article, we are going to see what is UpperCasePipe in Angular 10 and how to use it. The UpperCasePipeÂ is used to Transforms all the text to uppercase. Syntax: {{ value | uppercase }} NgModule: Module used by UpperCasePipe is: CommonModule Approach:Â Create the angular app to be usedThere is

Pipes in Angular

Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference.Prerequisites:To understand this article you should have knowledge of t

AngularJS lowercase Filter

AngularJS provides different filters to format the data. The lowercase Filter formats the given string to the lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the interpolation concept can be utilized. The lowercase filter is piped with an expr

Angular 10 DatePipe API

In this article, we are going to see what is DatePipe in Angular 10 and how to use it. DatePipe is used to format a date value according to locale rules. Syntax: {{ value | date }} Approach:Â Create the angular app that to be used.There is no need for any import for the DatePipe to be used.In app.co

Angular 10 DemicalPipe API

In this article, we are going to see what is DemicalPipe in Angular 10 and how to use it. The DemicalPipe is used to format a value according to digit options and locale rules. Syntax: {{ value | number}} NgModule: Module used by DecimalPipe is: CommonModule Approach:Â Create an Angular app to be us

Angular10 getLocaleDirection() Function

In this article, we are going to see what is getLocaleDirection in Angular 10 and how to use it. The getLocaleDirection is used to get the writing direction for the given locale. Syntax: getLocaleDirection(locale: string): 'ltr' | 'rtl' NgModule: Module used by getLocaleDirection is: CommonModule Ap