En este artículo vamos a ver qué es TitleCasePipe en Angular 10 y cómo usarlo.
TítuloCasePipe
Sintaxis:
{{ value | TitleCasePipe }}
NgModule: el módulo utilizado por TitleCasePipe es:
- CommonModule
Acercarse:
- Cree la aplicación angular que se utilizará
- No hay necesidad de ninguna importación para que se use TitleCasePipe
- En app.component.ts define las variables que toman el valor de TitleCasePipe.
- En app.component.html use la sintaxis anterior con ‘|’ símbolo para hacer el elemento TitleCasePipe.
- Sirva la aplicación angular usando ng serve para ver el resultado
Valor de entrada:
- valor: toma un valor de string.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Referencia: https://angular.io/api/common/TitleCasePipe