How to slice a string in AngularJS ?

Last Updated : 23 Jul, 2025

Given a string and the task is to make a slice of the given string using AngularJS. This task can be performed in 2 ways by using the built-in methods in AngularJS, i.e., we can use the slice() method, which is used to return a part or slice of the given input string. The substr() method can also be used to slice a string that returns the specified number of characters from the specified index from the given string

Approach 1: Using the slice() method: The approach is to use the slice() method which accepts 2 parameters start and end. In the first example, only 1 parameter is used and in the second example, 2 parameters are used.

Example 1: This example illustrates the slicing of the string using the slice() method by passing the single parameter value.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str = "This is GeeksforGeeks";
            $scope.res = '';
            $scope.sliceStr = function() {
                $scope.res = $scope.str.slice(8);
            }
        });
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to slice a string in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            String - '{{str}}'
            <br><br>
            <button type="button" 
                    ng-click="sliceStr()">
                 Click Me 
            </button>
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>
</html>

Output:

Example 2: This example illustrates the slicing of the string using the slice() method by passing the 2 parameter values.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str = "A Computer Science portal";
            $scope.res = '';
            $scope.sliceStr = function() {
                $scope.res = $scope.str.slice(2, 18);
            }
        });
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to slice a string in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
             String - '{{str}}'
            <br><br>
            <button type="button" 
                    ng-click="sliceStr()">
                 Click Me 
            </button>
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>
</html>

Output:

Approach 2 Using substr() method: The approach is to use the substr() method. It takes 2 parameters, one is the start and another is length(optional). In the first example, only one parameter is used. And in the second example, both parameters are used.

Example 1: This example illustrates the slicing of the string using the substr() method by specifying the single parameter value.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str = "This is GeeksforGeeks";
            $scope.res = '';
            $scope.subStr = function() {
                $scope.res = $scope.str.substr(8);
            }
        });
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to slice a string
        using substr() method in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
             String - '{{str}}'
            <br><br>
            <button type="button" 
                    ng-click="subStr()">
                 Click Me 
            </button>
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>
</html>

Output:

Example 2: This example illustrates the slicing of the string using the substr() method by specifying 2 parameter values.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function($scope) {
            $scope.str = "A Computer Science portal";
            $scope.res = '';
            $scope.subStr = function() {
                $scope.res = $scope.str.substr(2, 16);
            }
        });
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to slice a string using
        substr() method in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            String - '{{str}}'
            <br><br>
            <button type="button" 
                    ng-click="subStr()">
                Click Me
            </button>
            <p>Result = '{{res}}'</p>
        </div>
    </div>
</body>
</html>