Zoom Fast with Ignite UI for JavaScript Zoombar

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

• npm install
• npm start

Execute the npm install command to install all dependencies, and execute the npm start command to run the Angular application. If the project is set up correctly, you will have a running Angular application as shown in the image below. If you receive an error while running the application, stop and run the npm start command again.

Step 1 Import and Declare the Component

To work with Ignite UI for JavaScript Angular components, you must import and declare them in the module. For example, to use the igGrid component in an Angular application, import and declare the IgGridComponent in the application module.

Navigate to the Finance App folder and then the app folder. Open the file app.module.ts, and add the import statements shown below, just after all of the existing import statements:

import { IgZoombarComponent } from 'igniteui-angular2';

After importing the required components, you must declare them in the application module. Add IgZoombarComponent in the AppModule’s declaration array. Modify @NgModule decorator in app.module.ts as shown below:

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [AppComponent,
  IgDataChartComponent,
  InfoComponent,
  IndicatorChartComponent,
  VolumeChartComponent,
  IgGridComponent,
  GridComponent,
  PriceChartComponent,
  IgZoombarComponent,
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})

You have added IgZoombarComponent in the declaration array of the AppModule module. Other added components and other properties, like providers, will be reviewed in subsequent lessons.

Step 2 Add Zoombar

To work with an Ignite UI for JavaScript Zoombar, you must first add the Zoombar component. In the app\charts folder, open the volumechart.component.html file and add the ig-zoombar control as shown below, just after the ig-data-chart control:

 <ig-zoombar [(options)]="zoombarOptions" widgetId="zoombar"></ig-zoombar>

Step 3 Add Zoombar Options Property

In the Zoombar option, you can attach a chart to the Zoombar. To configure the Zoombar option, create a property in the VolumeChartComponent class. In the app\charts folder, open the volumechart.component.ts file and, just above the constructor, add the property listed below:

private zoombarOptions: IgZoombar;

Step 4 Attach Chart to Zoombar

To attach a chart widget to Zoombar, you must set the target property value of Zoombar options to the ID of the chart widget. In the app\charts folder, open the volumechart.component.ts file and add the code below, just after the this.chartOptions assignment in the ngOnInit() function:

this.zoombarOptions = {
  target: "#volumechart"
};

Step 5 Run the Application

Navigate to the application and scroll down to the bottom of the page to find the Zoombar added as shown in the image below:

The chart has been cloned in the Zoombar and you can use the horizontal scroll bar to quickly and smoothly zoom in and out within the chart, regardless of how many data points are rendered in the chart.