QuickStart: Angular Integration

Make sure you take a look at the Web Guide, Start a user session, and Retrieve User Access Token in order to learn the steps that need to be taken to set up Human API Connect.

Example usage

Angular Component example

Notice the use of <div class="hapi__token-container"> where the hapi__token-container class allows the Connect Client to find the data-hapi-token attribute in elements that are children of this container class.

This container must be outside of any Angular directives, because of the way Angular handles rendering; the container must exist on page load, and cannot be wrapped in Angular directives.

You may also specify optional attributes data-hapi-mode, data-hapi-segment, and data-hapi-pinned-providers, for more information, take a look at Customize your Connect Integration .

<div class="hapi__token-container">
    <div *ngIf="!connectClosed; else elseBlock">
      <h3 class="title is-3">Connect your Health Data</h3>
      <p class="has-text-centered">
          <button class="button is-link"
            [attr.data-hapi-token]="token"
            [attr.data-hapi-mode]="auth"
            [attr.data-hapi-segment]="<optional alphanumeric identifier>"
            [attr.data-hapi-pinned-providers]="<optional comma-separated provider IDs>"
          >Continue
          </button>
      </p>
    </div>
    <ng-template #elseBlock>
      <h3 class="title is-3">
          Thank you for connecting your Health Data.
      </h3>
    </ng-template>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-connect',
})

export class ConnectComponent implements OnInit {
  token = '';
  fetchTokenEndpoint = '<your endpoint to fech the token>';
  connectClosed = false;

  fetchToken() {
    // create an XHR object
      const xhr = new XMLHttpRequest();

      // listen for `onload` event
      xhr.onload = () => {
        let resp =  JSON.parse( xhr.response );

        // process response
        if (xhr.status === 200) {
          // parse JSON data
          this.token = resp.token || resp;
        } else {
          console.error('Error!');
        }
      };

      // create a `GET` request
      xhr.open('GET', this.fetchTokenEndpoint);

      // send request
      xhr.send();
  }

  ngOnInit() {
    const { HumanConnect } = window;
    
    if ( ! this.token ) {
        this.fetchToken(); 
    }

    if (HumanConnect) {
      HumanConnect.on('connect', response => {
        if ( this.connectionCallback ) {
          this.connectionCallback( response );
        }
      });
      HumanConnect.on('disconnect', response => {
        if ( this.disconnectCallback ) {
          this.disconnectCallback( response );
        }
      });
      HumanConnect.on('close', response => {
        this.connectionClosed = true;
        if ( this.closeCallback ) {
          this.closeCallback( response );
        }
      });
    }
  }
}

Troubleshooting

In the event where you have issues with launching Connect, it may be helpful to manually trigger a window load event. We listen to this event (amongst other DOM changes) in order to know when the page is ready for Connect to be bound to your element.

If you find you aren't able to get connect to launch when clicking on your button, and you are sure your session token is valid, try adding the following code:

var event = document.createEvent('Event');
event.initEvent('load', true, true);
window.dispatchEvent(event);

This code should be added after you have fetched and added the token to the DOM. In this example, it would be best to add it into the fetchToken method.

fetchToken() {
  // create an XHR object
    const xhr = new XMLHttpRequest();

    // listen for `onload` event
    xhr.onload = () => {
      let resp =  JSON.parse( xhr.response );

      // process response
      if (xhr.status === 200) {
        // parse JSON data
        this.token = resp.token || resp;
        setTimeout(() => {
          const event = document.createEvent('Event');
          event.initEvent('load', true, true);
          window.dispatchEvent(event);
        }, 0);
      } else {
        console.error('Error!');
      }
    };

    // create a `GET` request
    xhr.open('GET', this.fetchTokenEndpoint);

    // send request
    xhr.send();
}