AngularJS ng-paste Directive
Last Updated :
11 Jul, 2025
Improve
The ng-paste Directive in AngularJS is used to specify custom behavior functions when the text in input fields is pasted into an HTML element. It can be used to call a function that will be triggered when the text is pasted into the input field. It is supported by <input>, <select> and <textarea>.
Syntax:
<element ng-paste="expression">
Content ...
</element> Parameter:
- expression: It specifies what to do when the input is pasted into an HTML element.
Example 1: This example describes the ng-paste directive in AngularJS, by specifying the boolean value that displays whether the text is pasted or not.
<!DOCTYPE html>
<html>
<head>
<title>ng-paste Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
<style>
body {
text-align: center;
font-family: sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body ng-app>
<h1>GeeksforGeeks</h1>
<h2>ng-paste Directive</h2>
<div ng-init="ispaste=false;paste='Paste some text!'">
<textarea ng-paste="ispaste=true"
ng-model="paste">
</textarea><br />
<pre>Paste status: {{ispaste}}</pre>
</div>
</body>
</html>
Output:
Example 2: This example describes the ng-paste directive in AngularJS, where it specifies the number of times the text is pasted, its total count will be displayed accordingly.
<!DOCTYPE html>
<html>
<head>
<title>ng-paste Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
body {
text-align: center;
font-family: sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body ng-app="">
<h1>GeeksforGeeks</h1>
<h2>ng-paste Directive</h2>
<p>paste the "GeeksforGeeks" text</p>
<input ng-paste="paste = paste + 1"
ng-init="paste=0"
value="GeeksforGeeks" />
<p> {{paste}} times text pasted.</p>
</body>
</html>
Output:
