{ "id": "api/common/LowerCasePipe", "title": "LowerCasePipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n \n
\n \n
\n

LowerCasePipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Transforms text to all lower case.

\n\n \n
\n \n \n \n
\n {{ value_expression | lowercase }}\n\n

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n value\n string\n \n \n
\n \n \n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n\n\n \n
\n

Usage noteslink

\n

The following example defines a view that allows the user to enter\ntext, and then uses the pipe to convert the input text to all lower case.

\n\n@Component({\n selector: 'lowerupper-pipe',\n template: `<div>\n <label>Name: </label><input #name (keyup)=\"change(name.value)\" type=\"text\">\n <p>In lowercase: <pre>'{{value | lowercase}}'</pre>\n <p>In uppercase: <pre>'{{value | uppercase}}'</pre>\n </div>`\n})\nexport class LowerUpperPipeComponent {\n // TODO(issue/24571): remove '!'.\n value!: string;\n change(value: string) {\n this.value = value;\n }\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }