Adding API javascript to an angular 2 directive?

Question

I couldn't find any good documentation on this.

Say I had a third party library / api and I wanted to implement it into an angular 2 directive. How would I do that?

Given the following:

 <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

    <script>
      var linkHandler = Plaid.create({
       env: 'sandbox',
       clientName: 'Plaid Sandbox',
       // Replace '<PUBLIC_KEY>' with your own `public_key`
       key: '#####',
       product: ['auth'],
       onSuccess: function(public_token, metadata) {
         // Send the public_token to your app server here.
         // The metadata object contains info about the
         // institution the user selected and the
         // account_id, if selectAccount is enabled.
          console.log("Token: " + public_token + " Metadata: " + metadata);
       },
       onExit: function(err, metadata) {
         // The user exited the Link flow.
         if (err != null) {
        console.log("Error: " + err);
         }
         // metadata contains information about the
         // institution that the user selected and the
         // most recent API request IDs. Storing this
         // information can be helpful for support.
       }
      });
      // Trigger the standard institution select view
      document.getElementById('link-button').onclick = function() {
       linkHandler.open();
      };

score 0 · Accepted Answer · edited May 23 '17 at 12:18

Import the script of the external API in your index or if you are using angular-cli in your scripts section. Then, create a directive like this (code not tested):

link-initialize.directive.ts

import {Directive} from '@angular/core';

declare const Plaid: any;

@Directive({
  selector: '[linkInitialize]'
})

export class LinkInitializeDirective {
  linkHandler: any;

  constructor() {
    this.linkHandler = Plaid.create({
       env: 'sandbox',
       clientName: 'Plaid Sandbox',
       // Replace '<PUBLIC_KEY>' with your own `public_key`
       key: '#####',
       product: ['auth'],
       onSuccess: function(public_token, metadata) {
         // Send the public_token to your app server here.
         // The metadata object contains info about the
         // institution the user selected and the
         // account_id, if selectAccount is enabled.
          console.log("Token: " + public_token + " Metadata: " + metadata);
       },
       onExit: function(err, metadata) {
         // The user exited the Link flow.
         if (err != null) {
            console.log("Error: " + err);
         }
         // metadata contains information about the
         // institution that the user selected and the
         // most recent API request IDs. Storing this
         // information can be helpful for support.
       }
      });

      // Trigger the standard institution select view
      document.getElementById('link-button').onclick = function() {
         linkHandler.open();
      };
    }
}

And maybe, this question point you the right direction.

Thank you!! So it's possible to throw this under the constructor() in a component as well, correct? — QueSo, May 02 '17 at 21:22
Yes, of course, but as I can see, is better a directive because I understand you don't need a template (which is the main reason to use a component). — ismaestro, May 02 '17 at 22:03

Adding API javascript to an angular 2 directive?

1 Answers1