In this tutorial, I will show you How to Open URL in New Window with Custom Height Width Example using AngularJS and ASP.NET 5. I using “$window.open” we will new popup browser window with custom size in AngularJS. Now, I will be able to explain how to open new browser window with custom height and width on button click using AngularJS.

Write the following code:
// Open New Child / Browser Window
$scope.openChildWindow = function () {
var left = screen.width / 2 - 200, top = screen.height / 2 – 250
$window.open('http://www.hostforlife.eu', '', "top=" + top + ",left=" + left + ",width=400,height=500")
}

This is the complete code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> How to Open URL in New Window with Custom Height Width Example using AngularJS and ASP.NET?</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('sampleapp', [])
myApp.controller("expressionController", function ($scope,$window) {
// Open New Child / Browser Window
$scope.openChildWindow = function () {
var left = screen.width / 2 - 200, top = screen.height / 2 – 250
$window.open('http://www.hostforlife.eu', '', "top=" + top + ",left=" + left +
,width=400,height=500")
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-ng-app="sampleapp" data-ng-controller="expressionController">
<input type="button" value="Open Popup Window" ng-click="openChildWindow()"/> <br /><br />
</div>
</form>
</body>
</html>

 

Free ASP.NET 5 Hosting

Try our Free ASP.NET 5 Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.