Angular 10 UpperCasePipe

在本文中，我们将了解 Angular 10 中的UpperCasePipe是什么以及如何使用它。

UpperCasePipe用于将所有文本转换为大写。

句法：

{{ value | uppercase }}

NgModule： UpperCasePipe 使用的模块是：

• 通用模块

方法：

• 创建要使用的 Angular 应用程序
• 无需任何导入即可使用 UpperCasePipe
• 在 app.component.ts 中定义采用 UpperCasePipe 值的变量。
• 在 app.component.html 中使用上面的语法和 '|'用于制作 UpperCasePipe 元素的符号。
• 使用 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

  

    Uppercase value is :
    {{value | uppercase}}
  

输出：

示例 2：

app.component.ts

import { Component, OnInit } 
        from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    value : string = 'CamelCase String';
  }

app.component.html

  

    CamelCase value is : 
    {{value}}
  
  

    Uppercase value is : 
    {{value | uppercase}}
  

输出：

参考： https://angular.io/api/common/UpperCasePipe