Angular Components Tag

How to create impressive looking Gauge Charts using Angular 6

When necessary, a Gauge Chart or Speedometer Chart can be great in visualizing data. But how do we implement it in Angular 6?

Recently we have done a little research to find suitable Gauge chart components in Angular 6. We tried out 3 free chart component libraries, they are:

ngx-gauge@1.0.0-beta.4
angular-google-charts@0.1.2
angular-highcharts

Although all three can produce nice looking Gauge charts, the features provided are quite different, and of course, they all have their strengths and limitations.

ngx-gauge

This is the first component that I tested as it appeared on very top of the google search results.

pics courtesy: medium.com

It is a simple and good looking component with basic features. It is easy to install and use, simply follow the instructions at github. One feature to highlight is the “Threshold color Range”, it can define a “thresholdConfig” property as below, thus the color will change depending on the data value.

We created sample in stackblitz to demo this feature.

thresholdConfig = {
    '0': {color: 'green'},
    '40': {color: 'orange'},
    '75.5': {color: 'red'}
};

The shortcoming of this component is that it does not support some of the common features like plotting color bands or dial arrows. Unfortunately, the color bands are a must have for my project, so different components must be used.

angular-google-charts

Angular Google charts is wrapper of the Google Charts library for Angular 6+. Google Charts is a powerful data tool which includes a rich gallery of interactive charts.

pics courtesy: medium.com

To setup the Gauge chart in angular, first install the package

npm install angular-google-charts

Then import it into app.module.ts

imports: [
    ...
    GoogleChartsModule.forRoot(),
    ...
  ],

In the component that consume the chart

<google-chart #googlechart [title]="chart.title" [type]="chart.type" [data]="chart.data" [options]="chart.options">
</google-chart>
 
 @ViewChild('googlechart')
  googlechart: GoogleChartComponent;
  chart = {
    type: 'Gauge',
    data: [
      ['Memory', 50],
      ['CPU', 99]
    ],
    options: {
      width: 400,
      height: 120,
      greenFrom: 0,
      greenTo: 75,
      redFrom: 90,
      redTo: 100,
      yellowFrom: 75,
      yellowTo: 90,
      minorTicks: 5
    }
  };

We wrap up the above code into a stackblitz project for your reference.

While the gauge is very configurable and supports three color sections (green, yellow and red), the colors can not be customized and it does not support additional colors. It may not be a issue for a typical use case, but our project requires specific colors and more than just three colors. So the search continues.

angular-highcharts

It is a wrapper for very popular high charts js charting library based on SVG. While highcharts is extremely feature rich, the large number of properties also makes the component a bit confusing for a developer new to this library.

pics courtesy: medium.com

The installation and setup for Gauge chart using the angular-highcharts is not very straightforward, but once it is setup, it works like a charm.

First, install with npm.

npm install angular-google-charts@6.2.6
npm install highcharts@4.2.5

Please note that the version 6.2.6 works with Angular 6.

Then in app.module.ts, import the following.

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as solidGauge from 'highcharts/modules/solid-gauge.src';
...
  providers: [{ provide: HIGHCHARTS_MODULES, useFactory: () => [more, solidGauge] }],
...

In the component class

<div #chartTarget></div>

  //component class
  import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import { chart, SolidGaugeChart } from 'highcharts';
import * as Highcharts from 'highcharts';
import * as solidGauge from 'highcharts/modules/solid-gauge.src';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'app';

  @ViewChild('chartTarget')
  chartTarget: ElementRef;
  options: any;
  chart: Highcharts.ChartObject;

  ngOnInit() {}

  ngAfterViewInit() {
    this.initOptions();
    this.chart = chart(this.chartTarget.nativeElement, this.options as any);
  }

  initOptions() {
    this.options = {
      chart: {
        type: 'solidgauge'
      },
      title: {
        text: 'Solid Gauge Demo'
      },
      pane: {
        startAngle: -90,
        endAngle: 90,
        background: {
          backgroundColor: 'white',
          innerRadius: '60%',
          outerRadius: '90%',
          shape: 'arc'
        }
      },
      tooltip: {
        enabled: false
      },
      // the value axis
      yAxis: {
        stops: [
          [0.5, 'green'], // green
          [0.6, 'yellow'], // yellow
          [0.9, '#DF5353'] // red
        ],
        length: 5,
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
          y: -70
        },
        labels: {
          y: 16
        },
        min: 0,
        max: 200,
        plotBands: [
          { from: 0, to: 100, color: 'green' },
          { from: 100, to: 120, color: 'yellow' },
          { from: 120, to: 200, color: 'red' }
        ]
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: 5,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
      series: [
        {
          data: [80]
        }
      ]
    };
  }
}

The result of above is as below

pics courtesy: medium.com

As you can see, there are more configurable properties in the above sample code than the other two components. And this is just a simple version, for more available API, go to highcharts API reference site.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.

Angular 6 is just released!

The 6.0.0 release of Angular was published before the last week. This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future.

As a part of this release, we are synchronizing the major versions going forward for the framework packages (@angular/core, @angular/common, @angular/compiler, etc), the Angular CLI, and Angular Material + CDK. All are releasing as 6.0.0 today. We made this change to clarify cross compatibility. The minor and patch releases for these projects will be issued based on the project’s needs.

See the full list of changes in our changelogs: framework, material+cdk, cli.

ng update

ng update <package> is a new CLI command that analyzes your package.json and uses its knowledge of Angular to recommend updates to your application.

Not only will ng update help you adopt the right version of dependencies, and keep your dependencies in sync, but 3rd parties can provide update scripts using schematics. If one of your dependencies provides an ng update schematic, they can automatically update your code when they need to make breaking changes!

ng update will not replace your package manager, but uses npm or yarn under the hood to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to your project.

Angular Material + CDK Components

The biggest addition is the new tree component for displaying hierarchical data. Following patterns from the data-table component, the CDK houses the core tree directives, with Angular Material offering the same experience with Material Design styles on top. We recently gave a talk about the component, so check that out for more information (video, slides). These new tree components come in both styled (Material’s mat-tree) and unstyled versions (CDK’s cdk-tree).

Alongside the tree, we also have new badge and bottom-sheet components. Badges help display small bits of helpful information, such as unread item counts. Bottom-sheets are a special type of mobile-centric dialogs that come up from the bottom of the viewport, commonly used to present a list of options following an action.

The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today. With the release of v6, this package now includes new positioning logic that helps make pop-ups that intelligently remain on-screen in all situations.

Angular Material Starter Components

Once you have run ng add @angular/material to add material to an existing application, you will also be able to generate 3 new starter components.

Material Sidenav

You can now generate a starter component including a toolbar with the app name and the side navigation. This component is responsive based on breakpoints.

Run:

ng generate @angular/material:material-nav --name=my-nav

This will create this starter component:

Pic courtesy: blog.angular.io

Material Dashboard

You can now generate a starter dashboard component containing a dynamic grid list of cards.

Run:

ng generate @angular/material:material-dashboard --name=my-dashboard

This will create this starter component:

Pic courtesy: blog.angular.io

Material Data Table

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

Run:

ng generate @angular/material:material-table --name=my-table

This will create this starter component:

Pic courtesy: blog.angular.io

Tree Shakable Providers

To make your applications smaller, we’ve moved from modules referencing services to services referencing modules. This allows us to only bundle services into your code base in modules where they are injected.

Before

@NgModule({
...
providers: [MyService]
})
export class AppModule {}

File: app.module.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
constructor() { }
}

File: my-service.ts

After

No references are needed in our NgModule.

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.

“ng-bootstrap” components to make imposing Angular 5 App

In our previous article, we had covered “ng-bootstrap components for Angular 5 apps“. Here, we will add few other important bootstrap components provided by ng-bootstrap module. Below is the components’ list followed by their detail information and example.

• “ng-bootstrap” Carousels (using ngb-carousel)
• “ng-bootstrap” Rating widget (using ngb-rating)
• “ng-bootstrap” Modal Popup (using ng-template and ngbModal service)

Using “ng-bootstrap” Carousels

In order to implement bootstrap carousel, we will have to use “ngb-carousel” provided by ng-bootstrap module, like below –

app.component.html

<h5>4. ng-bootstrap Carousels Demo</h5>
<ngb-carousel>
<ng-template ngbSlide *ngFor="let img of images"> <img [src]="getImageSrc(img.imageName)" width="100%" height="500px">
<div class="carousel-caption">
<h3 class="text-center">{{img.name}}</h3>
</div>
</ng-template>
</ngb-carousel>
<hr>

ngb-carousel – It’s an directive which is used as a container element for the overall carousel. And inside of there, we have defined a number of slides and these slides have been defined by ng-template.

ng-template – It’s a directive which is used as slide with the help of ngbSlide directive.

ngbSlide – It’s a slide directive used by template.

carousel-caption – It’s a class value which is used to give the caption over the slide.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
import {
NgbCarouselConfig
} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [NgbCarouselConfig] })
export class AppComponent {
constructor(config: NgbCarouselConfig) {
config.interval = 2000;
config.wrap = true;
config.keyboard = true;
}
images = [{
name: "Cup",
imageName: "cup.jpeg"
}, {
name: "Laptop",
imageName: "laptop.jpeg"
}, {
name: "LoveTree",
imageName: "love-tree.jpeg"
}];
getImageSrc(imageN) {
return `assets/${imageN}`;
}
}

Output:

Using “ng-bootstrap” Rating Widget

In order to implement bootstrap rating widget, we will have to use “ngb-rating” provided by ng-bootstrap module, like below –

app.component.html

<h5>5. ng-bootstrap Ratings Demo</h5>
<ngb-rating [(rate)]="rateValue" (hover)="hoverValue=$event"></ngb-rating>
<p>Rating value is {{rateValue}}</p>
<p>Hover Rating value is {{hoverValue}}</p>
<hr>

ngb-rating– It’s a directive which is used to show some rating based functionality for any Angular app provided by ng-bootstrap module.

rate – It’s a property which accepts aa numeric value that is going to be show the correct rating on the app.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
rateValue = 5;
}

Output

Using “ng-bootstrap” Modal Popup

In order to implement bootstrap modal popup, we will have to use NgbModal service and ng-template provided by ng-bootstrap module, like below.

app.component.html

<h5>6. ng-bootstrap Modal Demo</h5>
<ng-template #content let-cl="close" let-di="dismiss">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5> <button type="button" class="close" (click)="cl('Closed from Close button')">
<span aria-hidden="true">×</span>
</button> </div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="di('Dismissed from dismiss button')">Dismiss</button> <button type="button" class="btn btn-primary" (click)="cl('Closed from Close button')">Close</button> </div>
</div>
</ng-template> <button (click)="showModal(content)">Show Bootstrap Modal</button>
<hr>

ng-template– It’s a directive which is used to display bootstrap modal content.

#content – It’s a template reference variable which is able to pass the template to modal service.

let-cl – This is a way to stop modal popup being displayed. That means it is used to close the modal popup.

let-di – This is another way to stop modal popup being displayed. That means it is used to dismiss the modal popup.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
import {
NgbModal,
ModalDismissReasons
} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
constructor(private modalService: NgbModal) {}
showModal(content) {
this.modalService.open(content).result.then(
(closeResult) => {
//modal close
console.log("modal closed : ", closeResult);
}, (dismissReason) => {
//modal Dismiss
if (dismissReason == ModalDismissReasons.ESC) {
console.log("modal dismissed when used pressed ESC button");
} else if (dismissReason == ModalDismissReasons.BACKDROP_CLICK) {
console.log("modal dismissed when used pressed backdrop");
} else {
console.log(dismissReason);
}
})
}
}

Output
For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.

Using “ng-bootstrap” Components in Angular 5 App

In this article, we are going to cover few bootstrap components provided by “ng-bootstrap” module in Angular 5 apps.

• “ng-bootstrap” Checkbox based Buttons (using ngbButton)
• “ng-bootstrap” Alerts (using ngb-alert)
• “ng-bootstrap” Progress Bar (using ngb-progressbar)

In order to implement these components, we will have to configure NgbModule in app module then we will be able to use all ng-bootstrap components in our Angular app.

Using “ng-bootstrap” Checkbox based Buttons

In order to implement checkbox based buttons, we will have to use “ngbButtonLabel” and “ngbButton” provided by ng-bootstrap module like below.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'NgBootstrap Directives & Components Demo';
classes = {
classRoom1: true,
classRoom2: false,
classRoom3: false,
};
}

app.component.html

<div style="text-align:center">
<h2> {{ title }} </h2>
</div>
<div style="margin-top:50px;">
<h5>1. ng-bootstrap CheckBox Button Demo</h5>
<p>Select the Class-Room you want to know about the number of students.</p>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary checkButton" ngbButtonLabel>

<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom1">Class 1
</label> <label class="btn btn-primary checkButton" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom2">Class 2
</label> <label class="btn btn-primary checkButton" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom3">
Class 3
</label>
</div>
<p *ngIf="classes.classRoom1">Class Room 1 has 60 students.</p>
<p *ngIf="classes.classRoom2">Class Room 1 has 80 students.</p>
<p *ngIf="classes.classRoom3">Class Room 1 has 40 students.</p>
<hr> </div>

Output:

Using “ng-bootstrap” Alerts

In order to implement bootstrap alerts, we will have to use “ngb-alert” provided by ng-bootstrap module like below.

app.component.html

<h5>2. ng-bootstrap Alerts Demo</h5>
<p>
<ngb-alert [dismissible]="false"> This is ng-bootstrap alert in Angular 5 app. </ngb-alert>
</p>
<p *ngIf="isAlertDisplayed">
<ngb-alert [dismissible]="true" (close)="isAlertDisplayed=false;" type="success">This is ng-bootstrap closable alert in Angular 5 app.</ngb-alert>
</p>
<hr>

ngb-alert – It’s a directive which is used to display a bootstrap alert in our Angular app.

dismissible – It’s a property which is used to display close (cross) button on the right corner of the alert. If set true, close button will be displayed otherwise not.

close – It’s an event which will be fired when close (cross) button will be clicked which is on the right corner of the alert.

type – It’s a property that defines which type of alert will be displayed based on its value like default bootstrap values for alerts like success, warning etc.

app.component.ts

export class AppComponent {
title = 'NgBootstrap Directives & Components Demo';
isAlertDisplayed = true;
}

Output:

Using “ng-bootstrap” Progress Bar

In order to implement bootstrap progress bars, we will have to use “ngb-progressbar” provided by ng-bootstrap module, like below –

app.component.html

<h5>3. ng-bootstrap Progress Bar Demo</h5>
<p style="margin:20px;">
<ngb-progressbar type="info" [value]="25">25</ngb-progressbar>
</p>
<p style="margin:20px;">
<ngb-progressbar type="warning" [value]="counter" [striped]="true" [animated]="true">{{counter}}</ngb-progressbar>
</p>
<hr>

ngb-progressbar – It’s a directive which is used to display a bootstrap progress bar in our Angular app.

type – It’s a property that defines which type of progress bar will be displayed based on its value like default bootstrap values for progress bars like info, warning etc.

value – It’s a property which used to set the progress bar value.

striped – It’s a property which is used to show a progress bar with striped as shown second progress bar in below output window.

animated – It’s a property which is used to show an animated progress bar.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
import {
setInterval,
clearInterval
} from 'timers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
counter = 0;
progressInterval;
ngOnInit() {
this.progressInterval = setInterval(() => {
this.counter = this.counter + 10;
if (this.counter >= 100) {
clearInterval(this.progressInterval);
}
}, 200);
}
}

Output:

In this article, we have covered three ng-bootstrap directives and taught how to use them in Angular 5 apps. We will cover few other ng-bootstrap directives in our next article.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.

11 Angular component libraries you should know in 2018

According to Stack Overflow’s 2017 survey, Angular remains the world’s most popular front-end framework.

Angular’s framework approach is to keep most of the magic under the hood, providing tooling and best practices on top. Angular encourages you to use components, splitting your UI into separated and reusable pieces.

To work with individual components from different libraries, you can also use Bit. It provides isolation and control for components within a project, and enables you to share and sync them between different project. Individual components shared with Bit can also be installed used the NPM / Yarn client.

1. Material2

Angular’s official component library implementing Google’s material design, built with Angular and TypeScript. These UI components serve as an example of how to write Angular code following the Angular team’s best practices. Individual components can also be installed from this Bit Scope.

2. NGX Bootstrap

At 3.5K stars, this library contains all core (and not only) Bootstrap components powered by Angular. With performance for both Mobile and Desktop, it’s designed with extensibility and adaptivity in mind.

3. Prime NG

A comprehensive component suit including over 70 UI components with different themes from material to flat design. At 3.3k stars and used by eBay, Fox and more organizations, this library is an interesting option to consider.

4. NG Bootstrap

At 4.5K stars, and replacing angular-ui bootstrap which is no longer maintained, this popular library provides Bootstrap 4 components for Angular. It provides high testing coverage and no 3rd party JS dependencies.

5. Onsen UI

At nearly 6k stars Onsen-UI is a popular library for hybrid and mobile web apps for Android and iOS using Javascript. Onsen-UI for Angular provides components with Material and Flat designs, with binding for Angular.

6. Vaadin Components

Bridging the gap between Angular components and Polymer elements, the Vaadin elements provide Material inspired UI components for mobile and desktop apps. Although elements are kept in different repos, they can be grouped into a single repo while kept individually available with Bit.

7. NG-ZORRO

Written in TypeScript with complete define types, the NG- ZORRO components aim to provide an enterprise-class UI based on Ant Design. At 2k stars, this Chinese-made library is an interesting option for web applications.

8. NG Lightning

Angular components built for the Saleforce Lightning Design System. These stateless functional components depend only on their input properties, to provide improved performance and enhanced flexibility.

9. NG Semantic-UI

Angular UI building blocks based on Semantic-UI. With 27 components and nearly 1k stars, this library makes the popular Semantic-UI interface available as a set of components for Angular applications.

10. Clarity

Clarity is an open source design system by VMware that brings together UX guidelines, an HTML/CSS framework, and Angular components. It provides a rich set of data-bound, performant components on top of Angular.

11. NG2 Charts

At over 1k stars, this library provides Angular directives for 6 different types of charts, with properties based on chart.js. This library can be useful for visualizing large data and lists.

Individual components

Individual Angular components can be found in the popular awesome-angular and awesome-angular-components projects. When working with individual components, you can also keep them organized in a common Bit Scope, to provide better discoverability and simpler maintenance. Then, they can be installed and updated across your different projects.

For more Information and build a website, Hire Angular Developer from us, as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.