rjriel/app.component.html

## app.component.html
<div>
  <button (click)="openBridge()">Connect</button>
</div>

<router-outlet></router-outlet>

## app.component.ts
import { Component } from '@angular/core';
declare let CitadelBridge: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'citadel-test';
  bridge: any;

  ngOnInit() {
    this.bridge = CitadelBridge.init({
      // generate a bridge token via Postman or your own back end
      // and place in the bridgeToken parameter
      bridgeToken: "",
      onLoad:function(){
        // Optional, called when Bridge loads
        console.log('Bridge loaded')
      },
      onSuccess:function(public_token: string, metadata: string){
        console.log('success handler')
        // Send the public_token to your server to exchange for an access_token
        // and retrieve payroll data.
        // The metadata object contains info about the Link.
        console.log("token: ",public_token)
        console.log("metadata: ", metadata)
      },
      onEvent: function(event_type: string, payload: any) {
        // all events fire this function. event_type indicates what the event is,
        // payload has additional information depending on the event.
        console.log('event: ', event_type)
        console.log('payload: ', payload)
      },
      onClose:function(){
        // Optional, called when Bridge is closed by the user.
        console.log('Bridge closed')
      }
  })
  }

  openBridge() {
    this.bridge.open()
  }
}

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CitadelTest</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://cdn.citadelid.com/bridge.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>
	<div>
	<button (click)="openBridge()">Connect</button>
	</div>

	<router-outlet></router-outlet>
	import { Component } from '@angular/core';
	declare let CitadelBridge: any;

	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = 'citadel-test';
	bridge: any;

	ngOnInit() {
	this.bridge = CitadelBridge.init({
	// generate a bridge token via Postman or your own back end
	// and place in the bridgeToken parameter
	bridgeToken: "",
	onLoad:function(){
	// Optional, called when Bridge loads
	console.log('Bridge loaded')
	},
	onSuccess:function(public_token: string, metadata: string){
	console.log('success handler')
	// Send the public_token to your server to exchange for an access_token
	// and retrieve payroll data.
	// The metadata object contains info about the Link.
	console.log("token: ",public_token)
	console.log("metadata: ", metadata)
	},
	onEvent: function(event_type: string, payload: any) {
	// all events fire this function. event_type indicates what the event is,
	// payload has additional information depending on the event.
	console.log('event: ', event_type)
	console.log('payload: ', payload)
	},
	onClose:function(){
	// Optional, called when Bridge is closed by the user.
	console.log('Bridge closed')
	}
	})
	}

	openBridge() {
	this.bridge.open()
	}
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>CitadelTest</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<script src="https://cdn.citadelid.com/bridge.js"></script>
	</head>
	<body>
	<app-root></app-root>
	</body>
	</html>