How to Open URL in New Tab using Angular

How to Open URL in New Tab using Angular

Today, We want to share with you How to Open URL in New Tab using Angular.
In this post we will show you Angular open in new window, hear for Open a Link in a New Tab using Angular we will give you demo and example for implement.
In this post, we will learn about How to Open a Link in a New Window Using Angular with an example.

HTML Simple ancher target main attribute supported Good way and An Easy to open the your website linked URL Like as a https://www.infinityknow.com in the new browser window or tab. But here problems sometimes it requires our website croul opening a website URL with pure Angular. The Angular simple Based window.open() method opens directly a new browser window.

READ :  AngularJs ng click and ng touch mobile device

javascript – Open a new tab on button click in AngularJS

How to open a page in new tab in Angular or jquery?

Use _blank in the second parameter of window.open() Simple method to open a URL in a new tab using Angular. The following Angular code will open https://www.infinityknow.com in a new browser tab or window.

HTML

<div ng-app="infinityApp" ng-controller="infinityknow"> 
    <a ng-href="" ng-click="redirectToInfinityKnow()">Hello</a>
</div>

Angular

angular.module('infinityApp', [])
    .controller('infinityknow', ['$scope', '$window', function ($scope, $window) {
    $scope.redirectToInfinityKnow = function () {
        $window.open('https://www.infinityknow.com', '_blank');
    };
}]);

Open a URL in a new tab using Angular

Open a URL in a new tab (and not a new window) using Angular below snippet will do the trick

.controller('exampleCtrl', ['$scope', '$window',
    function($scope, $window) {
        $scope.redirectToInfinityKnow = function(){
            $window.open('https://www.infinityknow.com', '_blank');
        };
    }
]);

angular ui router open in new tab

HTML

//angular 6 tab control example
<a redirect="https://www.infinityknow.com" newwindow="true">Open in new tab</a>

angular js directives

directives.redirect = function ($location, $window, $rootScope) {
    return {

        link: function (scope, element, attrs) {
            element.on("click", function () {
                if (!attrs.newwindow || attrs.newwindow == false) {
                    $location.path(attrs.redirect);
                    scope.$apply();
                }
                else {
                    var liveurl = $location.$$absUrl.toString().substring(0, decodeURIComponent($location.$$absUrl).toString().indexOf($location.$$path.toString(), $location.$$absUrl.toString().indexOf("#")) + 1) + attrs.redirect;
                    $window.open(liveurl);
                }
            });
        }
    }
}

How to Open URL in New Tab using Angular Example

READ :  Vue Restful API and axios API Example - Vue js rest api authentication

Note: Angular Simple, abbreviated as pure JS, is a one type of the high-level, Best interpreted programming language.Angular based for development of browser or client side all the behavior.

We hope you get an idea about How to open a page in new tab in Angular or jquery?
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Add a Comment

Your email address will not be published. Required fields are marked *