Angular CLI and jQWidgets Angular Components

In this tutorial, we will show you how to use https://cli.angular.io/ along with the Angular Components by jQWidgets.
Please, follow the step by step instructions below:

  • npm install -g angular-cli
  • ng new jqwidgets
  • cd jqwidgets
  • npm install jqwidgets-framework --save
  • ng serve
  • Edit src/index.html: 
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Jqwidgets</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
     
    	<!-- Styles -->
    	<link rel="stylesheet" href="http://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" /> 
            <!-- jQWidgets -->
    	<script src="http://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    	<script src="http://www.jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>
    	<script src="http://www.jqwidgets.com/public/jqwidgets/jqxbargauge.js"></script>
    		
    </head>
    <body>
      <app-root>Loading...</app-root>
    </body>
    </html>
  • Edit src/app.component.ts: 
    import { Component } from '@angular/core';
    import { jqxBarGaugeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
     values: number[] = [102, 115, 130, 137];
    }
  • Edit src/app.component.htm: 
    <jqxBarGauge 
    	 [width]="600" [height]="600" [colorScheme]="'scheme02'"
    	 [max]="150" [values]="values">
    </jqxBarGauge>
  • Edit src/app.module.ts: 
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    import { jqxBarGaugeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxbargauge';
    @NgModule({
      declarations: [
        AppComponent,
        jqxBarGaugeComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  • Navigate to http://localhost:4200/ in your web browser

About admin


This entry was posted in ANGULAR, AngularJS. Bookmark the permalink.



Leave a Reply