Skip to content
Related Articles

Related Articles

AngularJS lowercase Filter

Improve Article
Save Article
  • Last Updated : 05 Sep, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!