Angular 2 - RouterLink - Disabled anchor tag with onclick event

<!DOCTYPE html>
<html>

  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
  </head>

  <body>
    <my-app>
    loading app... 
    </my-app>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: 'src/app-test.html'
})
export class App {
  isDisabled: boolean;
  constructor() {
    this.isDisabled = false;
  }
  
  toggleDisable() {
    if(this.isDisabled) {
      this.isDisabled = false;
    }else {
      this.isDisabled = true;
    }
  }
}

@NgModule({
  imports: [
    BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.0",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^5.2.4",
        "@angular/compiler": "^5.2.4",
        "@angular/core": "^5.2.4",
        "@angular/platform-browser": "^5.2.4",
        "@angular/platform-browser-dynamic": "^5.2.4",
        "core-js": "^2.5.3",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20"
    },
    "plnkr": {
        "runtime": "system"
    }
}

<div>
  <a href="https://angular.io/guide/router" target="_blank" 
  [style.pointer-events]="isDisabled ? 'none' : 'auto'" 
  [style.color]="isDisabled ? 'gray' : ''">
  Click for External site
</a>
</div>
<br>
<div *ngIf="isDisabled == true">
  <button class="btn btn-primary" (click) = "toggleDisable()">Enable Link</button>
</div>

<div *ngIf="isDisabled == false">
  <button class="btn btn-primary" (click) = "toggleDisable()">Disable Link</button>
</div>