Open In App

AngularJS lowercase Filter

Last Updated : 05 Sep, 2022
Comments
Improve
Suggest changes
Like Article
Like
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=
"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>

Output:

 

S
sanchit496
Improve
Article Tags :

Explore

Lightbox