Angular 10 UpperCasePipe

在这篇文章中，我们将看到什么是Angular 10中的UpperCasePipe以及如何使用它。

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

语法:

{{ value | uppercase }}

NgModule: UpperCasePipe使用的模块是。

• CommonModule

步骤:

• 创建要使用的angular应用程序
• 不需要为UpperCasePipe的使用进行任何导入
• 在app.component.ts中定义接受UpperCasePipe值的变量。
• 在app.component.html中，使用上述语法和’|’符号来制作UpperCasePipe元素。
• 使用ng serve为angular应用程序提供服务，以查看输出。

输入值:

• value：它需要一个字符串值。

示例 1:

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

<b>
  <div>
    Uppercase value is :
    {{value | uppercase}}
  </div>
</b>

输出:

示例 2:

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

<b>
  <div>
    CamelCase value is : 
    {{value}}
  </div>
  <div>
    Uppercase value is : 
    {{value | uppercase}}
  </div>
</b>

输出: