Skip to main content

Getting Started with Reveal SDK for Angular

Step 1 - Create the Angular App​

1 - Open your favorite terminal

2 - Create a new Angular application using the Angular CLI

ng new getting-started

3 - Change directories into the newly created app directory and open the project in your favorite Editor. In this example, we are using Visual Studio Code.

cd getting-started
code .

Step 2 - Add Reveal JavaScript API​

1 - Open and modify the index.html file to include the infragistics.reveal.js script at the bottom of the page just before the closing </body> tag.

<script src="https://dl.revealbi.io/reveal/libs/1.7.0/infragistics.reveal.js"></script>

2 - Install the remaining Reveal JavaScript API dependencies:

  • Jquery 2.2 or greater
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  • Day.js 1.8.15 or greater
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

The final index.html files should look similar to this:

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GettingStarted</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">  
</head>
<body>
  <app-root></app-root>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  <script src="https://dl.revealbi.io/reveal/libs/1.7.0/infragistics.reveal.js"></script>
</body>
</html>

Step 3 - Initialize the Reveal view​

1 - Open and modify the src/app/app.component.html file. Delete all the contents of the file and add a new <div> tag and set the reference to revealView.

<div #revealView style="height: 100vh; width: 100%; position:relative;"></div>

2 - Open and modify the src/app/app.component.ts file. First, we need to make sure that we can use jQuery by declaring a new variable named $, of type any, at the top of the file just under the import statements. This will make sure TypeScript will compile our JavaScript.

declare let $: any;

Next, we need access to the revalView that we defined in HTML as a ViewChild. Add a property to hold this reference.

src/app/app.component.html
export class AppComponent {
  
  @ViewChild('revealView') el!: ElementRef;
  
}

Now, we need to implement the AfterViewInit interface on our component.

src/app/app.component.html
export class AppComponent implements AfterViewInit {
  
  @ViewChild('revealView') el!: ElementRef;

  ngAfterViewInit(): void {

  }
  
}

Once that is complete, we can now initialize the RevealView.

src/app/app.component.html
export class AppComponent implements AfterViewInit {
  
  @ViewChild('revealView') el!: ElementRef;

  ngAfterViewInit(): void {
    var revealView = new $.ig.RevealView(this.el.nativeElement);
  }
  
}

Next, we instantiate a new instance of the RevealView by creating a new $.ig.RevealView and passing in the revealView element that has been stored in the ViewChild property.

The final app.component.ts file should look like this:

src/app/app.component.html
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  
  @ViewChild('revealView') el!: ElementRef;

  ngAfterViewInit(): void {
    var revealView = new $.ig.RevealView(this.el.nativeElement);
  }
  
}
caution

Clients apps must set the $.ig.RevealSdkSettings.setBaseUrl("url-to-server"); to the server address hosting the dashboards if the client is being hosting on a different URL.

Step 4 - Run the Application​

In the Visual Studio Code terminal, type the npm start command

npm start

Congratulations! You have written your first Reveal SDK Angular application.

Get the Code

The source code to this sample can be found on GitHub.