
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
ngx-tableau
Advanced tools
ngx-tableau is an Angular module that allows to embed a [Tableau](https://www.tableau.com) report in an Angular webapp. You can see a working **DEMO** [here](https://stackblitz.com/edit/ngx-tableau).
ngx-tableau is an Angular module that allows to embed a Tableau report in an Angular webapp. You can see a working DEMO here.
Install ngx-tableau library using npm:
npm install ngx-tableau
Add TableauModule to imports
section of your app.module.ts
file:
import { TableauModule } from 'ngx-tableau';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, TableauModule],
bootstrap: [AppComponent],
})
export class AppModule {}
The most basic use is just passing a public Tableau visualization URL.
<!-- Using report URL directly on HTML -->
<ngx-tableau
tableauVizUrl="https://public.tableau.com/views/HurricaneMichaelPowerOutages/Outages"
></ngx-tableau>
<!-- Using report URL defined on view controller -->
<ngx-tableau [tableauVizUrl]="tableauVizUrl"></ngx-tableau>
You can pass configuration options to ngx-tableau using the following inputs to the component:
URL of a Tableau visualization to embed. Perfect for public visualizations or if you know the exact URL of the Tableau visualization. If this input is defined, the component will ignore the configuration options serverUrl
and report
. Example:
<ngx-tableau
tableauVizUrl="https://public.tableau.com/views/AroundtheAntarctic/MapClean"
></ngx-tableau>
URL of Tableau JavaScript API v2, to be able to load a custom version (public or from your own Tableau Server). The default Tableau JavaScript API loaded if this variable is not set is https://public.tableau.com/javascripts/api/tableau-2.9.1.min.js
. Example:
<ngx-tableau
tableauJsApiUrl="https://public.tableau.com/javascripts/api/tableau-2.9.1.min.js"
tableauVizUrl="https://public.tableau.com/views/AroundtheAntarctic/MapClean"
></ngx-tableau>
Visualization options for the Tableau view available in the JavaScript API. It should be a JSON object. Example:
import { VizCreateOptions, ToolbarPosition } from 'ngx-tableau'
// Options
options: VizCreateOptions = {
hideTabs: true,
hideToolbar: false,
disableUrlActionsPopups: true,
toolbarPosition: ToolbarPosition.TOP,
onFirstInteractive: (event) => {
console.log('On first interactive event!', event);
}
};
<ngx-tableau
tableauVizUrl="https://public.tableau.com/views/SuperSampleSuperstore/SuperDescriptive"
[options]="options"
></ngx-tableau>
Filters to pass to the Tableau visualization. It should be a JSON object. Example:
<ngx-tableau
tableauVizUrl="https://public.tableau.com/views/SuperSampleSuperstore/SuperDescriptive"
filters="{ Parameter3: 'Central' }"
></ngx-tableau>
URL of Tableau server. If this input is defined, it is mandatory to fill at least report input. Example:
<ngx-tableau
serverUrl="https://public.tableau.com"
report="AutonomousVehicles/AV"
></ngx-tableau>
The name of the workbook and the view ypu want to embed separated by a slash. Mandatory if using serverUrl. Example:
<ngx-tableau
serverUrl="https://public.tableau.com"
report="CityEyes/CityEyes"
></ngx-tableau>
If you want to embed a private Tableau visuzalization skipping sign in page for your end users, you should set up trusted authentication. Passing the obtained ticket to this option saves your users from having to sign in Tableau Server. Example:
<ngx-tableau
serverUrl="https://myprivatetableau.mycompany.com"
report="SomeWorkbook/SomeView"
ticket="QUQub0EdSAaE39Eyg1oaLA==:9qT6oMvKUwXGr7TDpYKT9lvt"
></ngx-tableau>
If it is a multi-site site server you will need to pass the name of the site. If you are using trusted authentication take into account that you should pass a target_site attribute to the request to obtain the ticket or the ticket will not be valid to embed your visualization.
<ngx-tableau
serverUrl="https://myprivatetableau.mycompany.com"
report="myWorkbook/myView"
ticket="QUQub0EdSAaE39Eyg1oaLA==:9qT6oMvKUwXGr7TDpYKT9lvt"
site="mySite"
></ngx-tableau>
Enables the debug mode of the component, which will show log traces in thde console.
<ngx-tableau
tableauVizUrl="https://public.tableau.com/views/SuperSampleSuperstore/SuperDescriptive"
[debugMode]="true"
></ngx-tableau>
You can add or remove event listeners for the Tableau Viz object.
<ngx-tableau
serverUrl="https://public.tableau.com/views/SuperSampleSuperstore/SuperDescriptive"
(tableauVizLoaded)="handleOnTableauVizLoaded($event)"
></ngx-tableau>
import { TableauEvents } from 'ngx-tableau';
handleOnTableauVizLoaded = (tableauViz) => {
console.log("Tableau viz loaded", tableauViz);
tableauViz.addEventListener(TableauEvents.TAB_SWITCH, (event)=>{
console.log(`Tab changed from '${event.getOldSheetName()}' to '${event.getNewSheetName()}'`, event)
})
}
For a complete reference about Viz event types and specific handling, see the official documentation.
FAQs
ngx-tableau is an Angular module that allows to embed a [Tableau](https://www.tableau.com) report in an Angular webapp. You can see a working **DEMO** [here](https://stackblitz.com/edit/ngx-tableau).
The npm package ngx-tableau receives a total of 7,323 weekly downloads. As such, ngx-tableau popularity was classified as popular.
We found that ngx-tableau demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.