How to redirect to an external URL in Angular

we are going to learn about how to redirect to an external URL in the Angular App.

Normally, we redirect a user to a different page on the same site by using the following method:

this.route.navigate('/blog');

Redirecting to an external URL

To redirect a user to an external url, we can use the window.location.href property in angular.

Suppose we have a /about route in our angular app, when a user visits the /about page we need to redirect them to an external url https://www.google.com/about instead of the same domain redirect.

Here is an example:

import { Component, OnInit } from "@angular/core";@Component({  selector: "about",  templateUrl: "about.component.html"})export class About implements OnInit {  constructor() {}  ngOnInit() {    window.location.href = "https://google.com/about";  }}

In the above code, we have added a window.location.href = “https://google.com/about” inside the ngOnInt() lifecyle hook.

Now, if a user tries to visit the /about page he or she will be redirected to an external url https://google.com/about.