Why Wijmo
Why choose Wijmo for your 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.
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';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
Running the online sample 🖥️
-
Below is the code to add the FlexChart module.
import { WjChartModule } from '@mescius/wijmo.angular2.chart';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
Running the online sample 🖥️
-
Below is the code to add the FlexMap module.
import { WjChartMapModule } from '@mescius/wijmo.angular2.chart.map';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
Running the online sample 🖥️
-
Below is the code to add the OLAP module.
import { WjOlapModule } from '@mescius/wijmo.angular2.olap';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
Running the online sample 🖥️
-
Below is the code to add the Input module.
import { WjInputModule } from '@mescius/wijmo.angular2.input';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
Running the 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.
Here are various templates and samples utilizing Wijmo. You can check out the actual demos and download the source code to customize and use them yourself.
Traffic Monitoring Dashboard
An Angular-based dashboard that displays web server traffic by country. Download the zip file for Angular.
View Demo
Geography Dashboard
An interactive geographic dashboard for analyzing demographic data. Download the zip file in Angular.
View Demo
Dynamic Dashboard
This tutorial demonstrates how to use Wijmo controls in a customizable, dynamic dashboard. Download the zip file for Angular.
View Demo
Inventory Management App
Demonstrates an inventory management app with a router that allows navigation between multiple screens. Download the zip file for Angular.
View Demo
Cryptocurrency Tracking
Track cryptocurrency values by integrating Wijmo's powerful financial charting components into your grid. Download the zip file for Angular.
View Demo
React UI Control Designer
Easily customize Wijmo controls!
Wijmo CSS Theme Designer
Easily create design themes using the Wijmo CSS Theme Designer and apply the created CSS to your Wijmo controls!
Wijmo Control Properties Editor
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!
Please share your concerns and questions about Wijmo with MESCIUS's expert team. We empathize with your concerns and provide assistance.
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.
