Angular10 TitleCasePipe
在本文中,我们将了解 Angular 10 中的TitleCasePipe是什么以及如何使用它。
TitleCasePipe用于将所有文本转换为标题大小写。
句法:
{{ value | TitleCasePipe }}
NgModule:TitleCasePipe使用的模块是:
- 通用模块
方法:
- 创建要使用的 Angular 应用程序
- 无需任何导入即可使用 TitleCasePipe
- 在 app.component.ts 中定义接受 TitleCasePipe 值的变量。
- 在 app.component.html 中使用上面的语法和 '|'用于制作 TitleCasePipe 元素的符号。
- 使用 ng serve 为 Angular 应用程序服务以查看输出
输入值:
- value:它需要一个字符串值。
示例 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
titlecase value is : {{value | titlecase}}
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
CamelCase value is : {{value}}
TitleCase value is : {{value |titlecase}}
app.component.html
titlecase value is : {{value | titlecase}}
输出:
示例 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
CamelCase value is : {{value}}
TitleCase value is : {{value |titlecase}}
输出:
参考: https://angular.io/api/common/TitleCasePipe