Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example
angular
80
pipe
1
uppercase
1
lowercase
1
Male avatar

loveprogramming viết ngày 04/04/2021

Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

https://grokonez.com/frontend/angular/angular-6/angular-built-in-pipe-uppercase-pipe-lowercase-pipe-titlecase-pipe-example

In the tutorial, we show how to work with Angular Built-in Uppercase, Lowercase and Titlecase pipes.

Related posts:

Related pages:

Uppercase Pipe & Lowercase Pipe

Uppercase

Syntax:

{{ value_expression | uppercase }}

-> Transforms text (string) to all upper case.

Lowercase

Syntax:

{{ value_expression | lowercase }}

-> Transforms text (string) to all lower case.

We create a uppercase-lowercase-pipe component, as below:

  • uppercase-lowercase-pipe.component.ts ->

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

@Component({
  selector: 'app-uppercase-lowercase-pipe',
  templateUrl: './uppercase-lowercase-pipe.component.html'
})
export class UppercaseLowercasePipeComponent {
  str: string;
  transformText(value: string) { this.str = value; }
}
  • uppercase-lowercase-pipe.component.html ->
<h2>Uppercase Lowercase Pipe</h2>
<div>
  <label>Enter Text: </label><input #text (keyup)="transformText(text.value)" type="text">
  <p>Lowercase => '{{str | lowercase}}'</p>
  <p>Uppercase => '{{str | uppercase}}'</p>
</div>

-> Results:

angular-6-built-in-pipes-uppercase-pipe-lowercase-pipe-titlecase-pipe-uppercase-lowercase-results

Titlecase Pipe

Syntax:

{{ value_expression | titlecase }}

-> Transforms text to title case.
Rules:

  • Capitalizes the first letter of each word (Words are delimited by any whitespace character, such as a space, tab, or line-feed character.)
  • Transforms the rest of the word to lower case.

We create a titlecase-pipe component style as below:

More at: https://grokonez.com/frontend/angular/angular-6/angular-built-in-pipe-uppercase-pipe-lowercase-pipe-titlecase-pipe-example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 7 tháng trước
1 0
Bài viết liên quan
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 7 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!