{"id":3746,"date":"2018-06-30T17:50:26","date_gmt":"2018-06-30T12:20:26","guid":{"rendered":"https:\/\/code4developers.com\/?p=3746"},"modified":"2020-07-14T16:29:43","modified_gmt":"2020-07-14T10:59:43","slug":"angular-pipes","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-pipes\/","title":{"rendered":"Pipes in Angular Part – 1 : lowercase, uppercase, and titlecase pipes"},"content":{"rendered":"

In this series of article for the angular rookies we will discuss about pipes in Angular, a way to write display-value transformations that you can declare in your HTML. In this article we will discuss about lowercase, uppercase, and titlecase pipes. At the end of the series we will create our own custom pipes.<\/p>\n

<\/p>\n

Lowercase pipe<\/span><\/h3>\n

The lowercase pipe is used to transform text to all lower-case format.<\/p>\n

Syntax<\/strong>: {{ value | lowercase}}<\/p>\n

Please consider below example<\/p>\n

<div style=\"text-align:center\">\r\n  <h1>\r\n    {{'Welcome to the demo of LOWERCASE pipe' | lowercase}}\r\n  <\/h1>\r\n<\/div><\/pre>\n
Output:\"lowecase<\/p>\n
 <\/p>\n
Uppercase pipe<\/span><\/h3>\n
The uppercase pipe is used to transform text to all upper-case format.<\/p>\n
Syntax<\/strong>: {{ value | uppercase}}<\/p>\n
Please consider below example<\/p>\n
<\/div><div style=\"text-align:center\">\r\n  <h1>\r\n    {{'Welcome To The Demo of UPPERCASE pipe' | uppercase}}\r\n  <\/h1>\r\n<\/div>\r\n<\/pre>\n
Output:\"\"<\/p>\n
Titlecase pipe<\/span><\/h3>\n
The titlecase pipe is used to transform first character of the word to capital and rest word to lower case. Words are delimited by any white space character, such as a space, tab, or line-feed character.<\/p>\n
Syntax<\/strong>: {{ value | titlecase}}<\/p>\n
Please consider below example<\/p>\n
<div style=\"text-align:center\">\r\n  <h1>\r\n    {{'Welcome To The Demo of TITLECASE pipe' | titlecase}}\r\n  <\/h1>\r\n<\/div><\/pre>\n
Output:\"\"<\/p>\n
The pipes can also be applied to the variable. Consider the below example in which you have variable called ‘statement’ on which we are going to apply pipes.<\/p>\n
Component<\/strong><\/p>\n
import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  statement = 'Welcome To The Demo of TITLECASE pipe';\r\n}\r\n<\/pre>\n
Applying pipes<\/p>\n
<div style=\"text-align:center\">\r\n  <h1>\r\n    {{statement | titlecase}}\r\n  <\/h1>\r\n<\/div><\/pre>\n
Example<\/strong><\/p>\n
Consider the example where we will write a message into the textbox and we will transform the text using above pipes<\/p>\n
app.component.ts<\/strong><\/p>\n
import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  value: string;\r\n  toLoweUpper(value: string) { this.value = value; }\r\n}<\/pre>\n
app.component.html<\/strong><\/p>\n
<div style=\"text-align:left\">\r\n  <label>Name: <\/label><input #name (keyup)=\"toLoweUpper(name.message)\" type=\"text\">\r\n  <p>In lowercase: '{{value | lowercase}}'\r\n  <p>In uppercase: '{{value | uppercase}}'\r\n  <p>In titlecase: '{{value | titlecase}}'\r\n<\/div><\/pre>\n
Output<\/p>\n
\"example<\/p>\n
Summary:<\/p>\n
This article is for rookie angular developers. If you are not aware about how to get start with angular you can read other articles from the Angular<\/strong><\/a> section from this website.<\/p>\n
Some useful articles for beginners:<\/p>\n