0

My goal is to disable the back button of browser window. So, In my component, I am trying to listen for the path, for that I have imported location from angular/common and trying to subscribe it, but it does not seems to working for me. here is my code snippet of that perticular component where i want to disable back button. 

    import { DataService } from './../../../shared/services/data.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from "@angular/common";
@Component({
  selector: 'app-confirmation',
  templateUrl: './confirmation.component.html',
  styleUrls: ['./confirmation.component.scss']
})
export class ConfirmationComponent implements OnInit {
  userInput;
  customWindow;
  time;
  message: string;
  constructor(private location: Location, private dataService: DataService, private router: Router) {
     this.dataService.currentMessage
 .subscribe(message => (this.message = message));
 console.log(this.message);

this.dataService.timeSource.subscribe(time => (this.time = time));
console.log(this.time);

}

  ngOnInit(): void {
    this.customWindow = window.open("", "_blank", "");
    console.log('here');
    console.log(this.location);
 this.location.subscribe(x => console.log(x));
  }

  close () {

    console.log(this.customWindow);
   // this.customWindow.close();
 console.log('666');
 // this.router.navigate(['login']);
  }

}
Humble Dolt
  • 940
  • 2
  • 16
  • 31

1 Answers1

0

There is a Solution with pure Javascript, no need for an Angular approach.

As seen here: Disable browser back button for one page application

Your solution would look like this: 

window.onpopstate = function (e) { window.history.forward(1); }

But be careful when executing this code in Angular Universal.

Joniras
  • 1,258
  • 10
  • 32
  • this works great for SPA. However, this is not what I want because I just need it for my one page(component). basically if user press browser back button(from that page only) , then I will try to disable it or send him to login page instead. – Humble Dolt Dec 06 '17 at 12:41
  • You could set this variable based on your Route via Events: https://angular.io/api/router/Router#!#events-anchor or set it in ngOnInit and reset it again in ngOnDestroy – Joniras Dec 06 '17 at 15:54
  • hey @Joniras, if I tried to put it on ngOnInit, then it give me this error (Expected zero argument but got one) at this part window.history.forward(1) – Humble Dolt Dec 07 '17 at 04:25
  • I tried with zero argument with this code ngOnInit(): void { window.onpopstate = function(e) { window.history.forward(); }; } ngOnDestroy() { window = null; // delete window; } – Humble Dolt Dec 07 '17 at 04:34
  • it is able to disable it however if I try to type url in the address bar too then it not showing the other page and giving this error. ( TypeError: Cannot assign to read only property 'window' of object '[object Window]') – Humble Dolt Dec 07 '17 at 04:36
  • Try window.onpopstate = null instead of window = null, ill update the answer if thats correct – Joniras Dec 07 '17 at 09:17