AngularJS provides different filters to format the data. The lowercase Filter formats the given string to the lowercase. In order to transmit & render the data from a TypeScript code to an HTML template (view), the interpolation concept can be utilized. The lowercase filter is piped with an expression that is declared inside the interpolation syntax.
Syntax:
{{expression|lowercase}}Example 1: This example describes the AngularJS lowercase Filter by converting the entered string to lowercase.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>AngularJS lowercase Filter</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong>
<br>
<input type="text" ng-model="string">
<br>
<strong>Output:</strong>
<br> {{string|lowercase}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.string = "";
});
</script>
</body>
</html>
|
Output:
Example 2: This example describes the AngularJS lowercase Filter by transforming the multiple lines of strings.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>AngularJS lowercase Filter</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>First Name:</strong>
<br>
<input type="text" ng-model="firstName">
<br>
<strong>Last Name:</strong>
<br>
<input type="text" ng-model="lastName">
<br>
<strong>Output:</strong>
<br> {{firstName|lowercase}}
{{lastName|lowercase}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "";
$scope.lastName = "";
});
</script>
</body>
</html>
|
Output: