Why Wijmo
Why Choose Wijmo for Angular App?
Quick Start
Getting Started with Wijmo in Angular 🚀
1. Go to the Angular app folder and install the Wijmo library.
npm install @mescius/wijmo.angular2.all
2. Implement the markup to render the Wijmo control.
Access the app.component.html file of the Angular app you want to work on and implement the markup.
The code below renders Wijmo's FlexGrid control.
If you would like to add other controls, please check the detailed code samples for each control below.
<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;" (initialized)="init()">
<wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2"></wj-flex-grid-column>
</wj-flex-grid>
3. Add css file to apply Wijmo style.
Access the src/style.css file and add the Wijmo css file.
import '@mescius/wijmo.styles/wijmo.css';
4. Add the Wijmo module you want to use and define the data to bind.
Access the main.ts file of the Angular app you're working on, add the Wijmo module, and define the data to bind to the Wijmo controls.
-
Below is the code to add the FlexGrid module.
import { WjGridModule } from '@mescius/wijmo.angular2.grid';<Preview>
Click the button below to view the full code sample.
Run Online Sample 🖥️
-
Below is the code to add the FlexChart module.
import { WjChartModule } from '@mescius/wijmo.angular2.chart';<Preview>
Click the button below to view the full code sample.
Run Online Sample 🖥️
-
Below is the code to add the FlexMap module.
import { WjChartMapModule } from '@mescius/wijmo.angular2.chart.map';<Preview>
Click the button below to view the full code sample.
Run Online Sample 🖥️
-
Below is the code to add the OLAP module.
import { WjOlapModule } from '@mescius/wijmo.angular2.olap';<Preview>
Click the button below to view the full code sample.
Run Online Sample 🖥️
-
Below is the code to add the Input module.
import { WjInputModule } from '@mescius/wijmo.angular2.input';<Preview>
Click the button below to view the full code sample.
Run Online Sample 🖥️
5. Run the Angular app and check the results.
npm start
Angular Starter Template
Jump-Start Your Development with Customizable Angular Samples & Templates.
Explore a variety of templates and samples built with Wijmo. View live demos and download the source code to customize for your own projects.
Angular UI Control Designer
Easily Customize Wijmo Controls!
Easily create design themes using the Wijmo CSS Theme Designer and apply the created CSS to your Wijmo controls!
Easily customize the settings of Wijmo controls using the Wijmo Control Properties Editor. You can modify and check the settings for over 20 different controls. Download these settings and quickly and easily apply them to your web without any additional coding.
Ask Anything!
Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.
Angular UI Control Online Study
Discover the Many Ways to Apply Wijmo Angular UI Controls.
-
How to quickly create a DataGrid in an Angular web application
This step-by-step guide explains how to create an Angular-based data grid using Wijmo. Get started quickly with Wijmo.
-
Creating a Responsive Angular Dashboard
This tutorial explains how to create a fast, responsive, and efficient dashboard using Wijmo controls in Angular. Explore a variety of controls, including grids, maps, and charts.
-
How to Fix Responsive Columns for Angular Mobile Web Datagrid
When developing for mobile web, this article explains the challenges that arise when trying to pin application columns on small screens, and how to make DataGrid column pinning responsive as a solution.
