Angular component

The CloudTables component for Angular lets you embed tables directly into your Angular application using a custom HTML tag: <cloud-tables></cloud-tables> and attributes to configure it.

Installing

The Angular component for CloudTables is available as the @cloudtables/angular package on npm and can be installed in your Angular application using:

# npm
npm install --save @cloudtables/angular

# yarn
yarn add @cloudtables/angular

Use

After npm has finished installing, change your app.module.ts file in /src/app to import the CloudTables component:

import { CloudTablesComponent, CloudTablesModule } from '@cloudtables/angular';

then in the @NgModule section of the same file update the imports and bootstrap arrays to add the CloudTables module and component:

imports: [
    // ...
    CloudTablesModule
],
bootstrap: [
    // ...
    CloudTablesComponent
]

Once those changes are made you can now use the custom <cloud-tables></cloud-tables> tag to embed a CloudTable into your application. The attributes available for this tag are:

• data-src The custom url for your CloudTable which can be seen in the Embed page for your data set.
• data-apiKey would be replaced by your API Key (see the Security / API Keys section in your CloudTables application), or
• data-token server side generated secure access token that can be used instead of an apiKey
• data-userId is optional, but will be used to uniquely identify users in the CloudTables interface.
• data-userName is also optional, but can be used to help identify who made what changes when reviewing logs in CloudTables. It is recommended you include userId and userName.

Security

When embedding CloudTables into your Angular application, you can use a secure access token which is generated by a server-side program, or by embedding your access key directly into the tags.

• API token: We strongly recommend using a server generated secure access token as it will be tied to a single user's session and cannot be reused by anyone else who might intercept the key, or provide any access beyond that specified by the server.
• API key: The API access is embedded directly into the application, but it means the full access of that key is available to the client.

API token

To generate a secure access token use one of our server-side clients (HTTP REST / cURL, Java, .NET, NodeJS, PHP). Then embed your CloudTable into your Angular application using:

<cloud-tables
	data-src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
	data-token="---"
	data-userId="---"
	data-userName="---"
></cloud-tables>

Where:

• {datasetId} - the ID of the data set you'd like to show (see the data set Embed tab for this information).

Note specifically the use of data-token which would be given the value of the token generated by the server.

API key (serverless)

Serverless access is faster to setup since you embed the API key directly into your cloud-tables tag (but also less secure, since you expose your API key):

<cloud-tables
    data-src="https://sub-domain.cloudtables.io/loader/{datasetId}/table/d"
    data-apiKey="---"
></cloud-tables>

Here the data-apiKey attribute is used to specify the API key to use.