AngularJS lowercase Filter

Last Updated : 05 Sep, 2022

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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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>