Open In App

AngularJS lowercase Filter

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads