title: How to prompt user when he tries to move out of any component in angular 6
body: <p>I have a payment page with payment component as -</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { PayPalConfig, PayPalEnvironment, PayPalIntegrationType } from 'ngx-paypal';
  import { AppService } from '../app.service';
  import { Payment } from '../models/payment.model';
  import { Router } from '@angular/router';
  @Component({
    selector: 'app-payment',
    templateUrl: './payment.component.html',
    styleUrls: ['./payment.component.css']
  })
  export class PaymentComponent implements OnInit {
  //totalpay:number;
  payment:Payment;
  changesSaved=false;
    constructor(private appservice:AppService,private router:Router) { }
  
    ngOnInit() {
      this.initConfig();
  
     }
  
  
  
  
  hasChanges(){
    return true;
  
  }   }
  </code></pre>
  
  <p>Now I want to prompt user if he tries to move back or try to click any link ,without clicking on paypal payment button in payment component ,I have used Candeactivate by making paymentguard.ts</p>
  
  <pre><code>  import { Injectable } from '@angular/core'; 
      import { CanDeactivate } from '@angular/router'; 
      import { PaymentComponent } from './payment/payment.component';
       import { PaymentGuard} from './payment/payment.guard';
  
  
      @Injectable() 
      export class ConfirmDeactivateGuard implements CanDeactivate&lt;PaymentComponent&gt; {
  
           canDeactivate(target: PaymentComponent) { 
                if (target.hasChanges()) { 
                     return window.confirm('Do you really want to cancel?'); 
                } 
                return true; 
            } 
      }
  </code></pre>
  
  <blockquote>
    <p>And this is my routing in app.module.ts</p>
  </blockquote>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { BannerComponent } from './banner/banner.component';
  import { ProductsComponent } from './products/products.component';
  import { BodyComponent } from './body/body.component';
  import { BestsellersComponent } from './bestsellers/bestsellers.component';
  import { FooterComponent } from './footer/footer.component';
  import { BenefitComponent } from './benefit/benefit.component';
  import { CombinedComponent } from './combined/combined.component';
  import { CartComponent } from './cart/cart.component';
  import { StorageServiceModule} from 'angular-webstorage-service';
  import { FormsModule } from '../../node_modules/@angular/forms';
  import { NgxPayPalModule } from 'ngx-paypal';
  import { HttpClientModule } from '@angular/common/http';
  import { AboutComponent } from './about/about.component';
  import { ContactComponent } from './contact/contact.component';
  import { PaymentComponent } from './payment/payment.component';
  import { AuthGuard } from './auth.guard';
  import { FlashMessagesModule } from 'angular2-flash-messages';
  import { FinalstatusComponent } from './finalstatus/finalstatus.component';
  import { ConfirmDeactivateGuard } from './payment.guard';
  import { PaymentfailComponent } from './paymentfail/paymentfail.component';
  
  
  const routes: Routes = [
    { path: 'cart', component: CartComponent },
    { path: 'about', component: AboutComponent },
    { path: '', component: CombinedComponent },
  
    { path: 'payment', component: PaymentComponent,canActivate:[AuthGuard],canDeactivate[ConfirmDeactivateGuard]},
    { path: 'orderstatus', component: FinalstatusComponent,canActivate:[AuthGuard] },
    { path: 'paymentfail', component: PaymentfailComponent,canActivate:[AuthGuard] },
    { path: 'contact', component: ContactComponent },
  
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      BannerComponent,
      ProductsComponent,
      BodyComponent,
      BestsellersComponent,
      FooterComponent,
      BenefitComponent,
      CombinedComponent,
      CartComponent,
      AboutComponent,
      ContactComponent,
      PaymentComponent,
      FinalstatusComponent,
      PaymentfailComponent,
  
    ],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes),
      StorageServiceModule,
      FormsModule,
      NgxPayPalModule,
      HttpClientModule,
      FlashMessagesModule.forRoot()
  
    ],
    providers: [AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I don't know why it is not working ,any idea how to achieve it???</p>