Develop Stunning Applications Easily with Syncfusion
Tags: syncfusion, angular, javascript
Published: 2019-10-28 19:36:44

Syncfusion is a software framework vendor providing the best UI components for software developers since 2001.

Our main focus as developers is to build and deliver software as per the Client's requirements in a limited time and budget. We strive to understand the requirements, build the main architecture of the application, and thereafter, build the actual application.

Syncfusion understands the priorities in the software development lifecycle. It takes some pressure off the developer and frees them to focus on other areas. Instead of building all the basic components you need in an application, (File Uploader, PDF Viewer, Grid, AutoComplete control, Rich Text Editor) Syncfusion has these components ready for you, well developed, well tested, and ready for use.

Syncfusion offers over 1000 components across countless supported platforms to make software development easier and more efficient.

In this article, we will explore the different component suites offered by Syncfusion. The focus will be on the Angular components and finally a sample application to demonstrate how to easily use Syncfusion components.

##Syncfusion Components
Syncfusion provides UI components for a variety of frameworks and platforms. This includes Windows Forms, WPF, ASP.NET (Web Forms, MVC, Core) Xamarin, JavaScript, Angular, Blazor, Vue, and React.

The components are served in packages. For instance, when developing with Angular, you would only install the packages for Syncfusion Angular.

Here's a list of the supported platforms and their corresponding components.

###Web (Essential JS 2)
- [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls)
- [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls)
- [Angular](https://www.syncfusion.com/angular-ui-components)
- [Blazor](https://www.syncfusion.com/blazor-components)
- [React](https://www.syncfusion.com/react-ui-components)
- [Vue](https://www.syncfusion.com/vue-ui-components)
- [Native JavaScript](https://www.syncfusion.com/javascript-ui-controls)

###Mobile
- [Xamarin](https://www.syncfusion.com/xamarin-ui-controls)
- [Flutter](https://www.syncfusion.com/flutter-widgets)

###Desktop
- [WinForms](https://www.syncfusion.com/winforms-ui-controls)
- [WPF](https://www.syncfusion.com/wpf-ui-controls)

###File Formats
- [Excel](https://www.syncfusion.com/excel-framework/net)
- [PDF](https://www.syncfusion.com/pdf-framework/net)
- [Word](https://www.syncfusion.com/word-framework/net)
- [PowerPoint](https://www.syncfusion.com/powerpoint-framework/net)

The File Formats libraries are unique. They allow you to manage Excel, PDF, Word, and PowerPoint from within your application without the need to install Excel, Word or PowerPoint software locally on your machine and without any interop dependencies.

In addition to the platforms, and components provided, Syncfusion offers a rich set of documentation to help you understand their components, how to install them, how to customize them and run them in your applications.

##Angular UI Components Library
Angular ecosystem is well supported by the Syncfusion Angular UI components library. The suite contains over 70 Angular components.

The Angular UI components are characterised by:
- Being native components built from the ground up for Angular
- The components can be used and integrated within different Angular environments including:
 - [Angular CLI](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/)
 - [Angular SystemJS](https://ej2.syncfusion.com/angular/documentation/getting-started/systemjs/)
 - [Angular/ASP.NET Core](https://ej2.syncfusion.com/angular/documentation/getting-started/aspnet-core/#prerequisites)
 - [Angular Universal](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-universal/)
 - [Angular with Ionic](https://ej2.syncfusion.com/angular/documentation/getting-started/ionic/)

- Wide range of [browser support](https://ej2.syncfusion.com/angular/documentation/browser/) including:
 - Chrome (Latest)
 - Firefox (Latest)
 - Opera (Latest)
 - Edge (13+)
 - IE (11+)
 - Safari (9+)
 - IOS (9+)
 - Android (4.4+)

- A detailed [API Reference](https://ej2.syncfusion.com/angular/documentation/api/accordion/overview) for all the classes, services, components, and other objects used

- Built-in [themes](https://ej2.syncfusion.com/angular/documentation/api/accordion/overview) including:
 - Google’s Material
 - Microsoft Office Fabric 
 - Bootstrap 3 and 4
 - High Contrast

You can check the themes page for more details on the different themes available, and supported.

In addition, you can customize any theme, and download it for your application. You may have a look at the [Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio/#customizing-theme-color-from-theme-studio) page.

## Common Features
The Angular UI components library has a set of common features, and APIs, that are universal when using any of the components in the suites.

The features are:
- The [Animation library](https://ej2.syncfusion.com/angular/documentation/common/animation/). This is a built-in animation library by SyncFusion to help with animating controls.
  
For example, that's how you would Fade In or Out an element on a page:
```
let animation: Animation = new Animation({ name: 'FadeIn', duration: 5000 });
animation.animate(this.element1.nativeElement, { name: 'FadeOut' });
```

- [Localization](https://ej2.syncfusion.com/angular/documentation/common/localization/) using load() and L10n class. This library helps you in building localized apps and support multiple languages and cultures. 

- [Drag and Drop](https://ej2.syncfusion.com/angular/documentation/common/drag-and-drop/) library.

{% gist https://gist.github.com/bhaidar/2e3a6e1f09154edd609e386f42793e25 %}

{% stackblitz syncfusion-drag-drop %}

The code snippet defines two HTML divs. The first is the droppable div and the second is the draggable one. Inside the **ngAfterViewInit()** function two new instances of Draggable and Droppable classes that wrap the two divs defined above.

Run the application and you shall be able to drag and drop a div inside another:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ioadb1pszvr4dgcvlvbo.png)

- [Custom Reactive Form Validators](https://ej2.syncfusion.com/angular/documentation/common/reactive-form-validation/). The Angular UI components suite offers 15 form validators that can be plugged in easily into your application. Here’s a sample demonstrating the use of these validators in a Reactive Form.

{% stackblitz angular-emxs2p %}

## Selection of Angular Components
To go through all of the Angular components in depth now isn't useful. I've highlighted a few that interested me and to give you a small overview of what is on offer.

### Avatar
The [Avatar](https://ej2.syncfusion.com/angular/documentation/avatar/getting-started/?no-cache=1#getting-started) component is, as the name suggests, used to embed an avatar in your application without having to worry about styles and display.

### Barcode
The barcode component is really helpful in many business and e-commerce applications. You can display, and create barcodes easily with this library. In addition, you can generate a variety of codes:
- [Barcode Generator](https://ej2.syncfusion.com/angular/documentation/barcode/barcodeGenerator/)
- [QR Code Generator](https://ej2.syncfusion.com/angular/documentation/barcode/qrcodegenerator/)
- [Data Matrix Generator](https://ej2.syncfusion.com/angular/documentation/barcode/datamatrixgenerator/?no-cache=1)

### Calendar, Date Picker, DateTime Picker
Almost every application deals with [Dates](https://ej2.syncfusion.com/angular/documentation/calendar/getting-started/?no-cache=1). Personally, working with dates in JavaScript, in general, is a pain in the neck. These components support globalisation via the combination of the [internationalisation](https://ej2.syncfusion.com/angular/documentation/common/internationalization/#internationalization) and [localisation](https://ej2.syncfusion.com/angular/documentation/common/localization/) libraries. They can be really helpful for your application.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g024eylgw1aw32yqqgr4.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/85icexqni4tu2lb5w7ja.png)

### Card component 
The [Card](https://ej2.syncfusion.com/angular/documentation/card/getting-started/?no-cache=1) component allows you to define cards in your HTML templates in no time. No need to import any custom Angular module, just follow two steps to get access to cards in your templates.

Install the following package:
`npm install @syncfusion/ej2-layouts --save`

Then, import the two files inside the [src/styles.css] file:
```
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; 
```

That's all! Now you can embed cards in your templates:

```
<div class = "e-card">						
	<div class="e-card-header">			
		<div class="e-card-header-caption">	
			<div class="e-card-header-title"></div>
		</div>
		<div class="e-card-content"></div>
	</div>
</div>
```

### Charts
Syncfusion offers a rich set of the native [Charts](https://ej2.syncfusion.com/angular/documentation/chart/getting-started/) that you can embed, and use in your Angular apps. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cems6vh3749nku478bmh.png)

### Gauges
[Gauges](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-annotations/) are mostly used when building Dashboards. They act as indicators and represent the different KPIs you might have on your Dashboard. Highly recommended for building Dashboard apps for corporate executives. 

The suite contains a rich set of Gauges that you can access for your application.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/n3xele93pdenuxj9xsqd.png)

### Color Picker
The number one priority when searching for a color picker is to have a cross-browser color picker that is simple and works everywhere. That's exactly what the [Color Picker](https://ej2.syncfusion.com/angular/documentation/color-picker/getting-started/?no-cache=1) provides by Syncfusion for Angular developers. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3vgspj8suj2mq9ns3l90.png)

### Dashboard Layout
The flexible [Dashboard Layout](https://ej2.syncfusion.com/angular/documentation/dashboard-layout/responsive-adaptive/) component lets you build customizable and draggable layouts for your dashboards. This component can be combined with the Gauges component to give users a personalized Dashboard where they can organize the KPIs the way they see fit.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qof3jpeihnpz0f98q91g.png)

Here's a [step-by-step](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#getting-started-with-angular-cli-1) guide on how to install the Dashboard Layout module into an Angular CLI app.

### Dialogs
[Dialogs](https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/?no-cache=1#modal-dialog) are needed in every application we develop. They bring in UX convenience especially when you plan to make your application available on Tablets and Mobile phones. 

Syncfusion Dialogs for Angular are easily installed and are highly customizable. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/g8rfy66n3zf6fwbc3scs.png)

### Document Editor
The Document Editor is more than just a Rich Text Editor. It's a mini Word app in the browser. Syncfusion provides a rich Document Editor that is similar to using Word on a Desktop. It offers many of the features that come with the Word app.  These features include Text Formatting, Styles, Lists, Tables, Scrolling and Zooming.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qyt0mauaejw1lmaqjbh4.png)

### File Manager
The [File Manager](https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/) is so impressive; it allows you to manage your files and folders in the cloud inside a browser. It comes with many baked-in features, including uploading files, deleting files, opening and previewing files, as well as navigating files and folders.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2hmcqkl2if4dlc5ojies.png)

### Data Grid
Maybe the [Data Grid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started/) is the most popular component amongst the lot. With almost every application I've developed, I used a Data Grid to display a list of records. The Syncfusion Data Grid component offers a rich set of features including:
- **Virtualization**. This feature is essential when loading thousands or millions of records inside the browser. With virtualization, only viewed records are being rendered to the DOM. When you scroll down the list of records, more rows will be pulled out and rendered.

- Sorting, Grouping, Paging, Scrolling, Filtering, Selection, Aggregation, Printing, Hierarchical binding of data, PDF Export, Excel Export, and much more!

In the sample application below, I will demonstrate using the Data Grid.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ihu1b345ypjrnbl15bbc.png)

### InPalceEditor
[In-Place-Editor](https://ej2.syncfusion.com/angular/documentation/inplace-editor/getting-started/?no-cache=1) is one of my favorite components. You can build inline-editable forms using it. For instance, you build functionality in Angular Forms. Its role is to make the entire form editable and then make it all read-only. What's unique about this component is, while in read-only mode, the control values will be rendered as labels. Once you click the label, it gets converted to an editable component. The InPlaceEditor control renders a different editor based on the field data type. For instance, a field of type "Text" is rendered as an Input field editor, while a field of type "Date" is rendered as a Calendar field editor.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oe0m86thto8rbmyzfe3w.png)

### PDF Viewer
Loading, rendering and commenting on PDF documents in the browser has always been a headache. This is due to the evolving nature of the PDF Standards that keep changing. This makes it hard for any vendor to sync up with the changes in the PDF Standards, and maintain a workable, and robust PDF management tool in the browser. 

That's where the [Syncfusion PDF Viewer](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/) shines. It’s always up to date to make sure it works with the latest PDF standards. 

You can build a full-fledged PDF management tool with the ability to add comments, shapes and download a copy of the PDF with all the comments incorporated.

This is THE number one component if you are building any sort of an e-collaboration solution online.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0carmw7ye9v59hfdscog.png)

### Schedule
The [Schedule](https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/?no-cache=1) component renders as a big Calendar control that allows you to register events on specific dates, times or ranges. This is a great component to use in developing apps that require taking appointments, and registering maintenance reminders.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e71f3xf0prysk973ao4q.png)

## Hands-on Sample App
In this final section of the article, I will implement a basic Github Code Search app that looks like the following:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jd8s4up3an168y1kx24g.png)

The user enters a search term to search GitHub repositories. The app then communicates, via the GitHub API, to search GitHub for repositories, and return the matching data.

I will be using [Stack Blitz](https://stackblitz.com) to generate a new Angular project. Here’s the final version of the app at the following URL [https://stackblitz.com/edit/ng-github-code-search](https://stackblitz.com/edit/ng-github-code-search)

### Add the Search Bar component
Let's start by adding a Search Bar component to allow the user to enter a search term. In this component, I will be using Syncfusion TextBox control.

First of all, let's install the Syncfusion packages that are needed in order to use the TextBox in the app. Using the Stack Blitz, add the following NPM packages:

```
@syncfusion/ej2-angular-inputs
@syncfusion/ej2-angular-base
@syncfusion/ej2-inputs
@syncfusion/ej2-base
```

Now, import the following CSS files into the main [src/styles.css] file as follows:

```
@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-inputs/styles/material.css';
```

Create a new Angular component named `search-box.component.html`, and add the following content:

{% gist https://gist.github.com/bhaidar/1e6d11c4b2705b8ddbf39adf31306435 %}

The markup defines a new Input control with an assigned Template Reference Variable. The code behind this template makes use of RXJS to handle the `keyup` event received from the input text, and emit a new event accordingly. The payload of the event is the search term itself.

Make sure to import this component inside the `app.module.ts` file. 

Let's make use of the search-bar component inside the `app.component.html` file as follows:

```
<app-search-bar (action)="onSearch($event)"></app-search-bar>
```

When the user finishes typing a search term, the `onSearch($event)` function fires, and it receives the search term entered.

### Implement the GitHub API Search for repositories
Let's add a new Angular Service that contains a single `search()` function. This function sends a GET request to the GitHub Search API to filter out repositories that match the search term entered by the user.

```
@Injectable({ providedIn: 'root' })
export class GetHubSearchService {
    constructor(private http: HttpClient) { }

    search(term: string) {
        let params = new HttpParams().set('q', term);
        return this.http.get<GitHubRepositoryModel[]>(`https://api.github.com/search/repositories`, { params });
    }
}
```

The service defined above contains a single function named search(). This function sends a GET request to the GitHub API located at [https://api.github.com/search/repositories](https://api.github.com/search/repositories) with a Query String named `q`.

The API returns a list of repositories that matches the Query String. The response is wrapped in an Array of GitHubRepositoryModel objects that are defined as follows:

```
export interface GitHubRepositoryModel {
  id: number;
  name: string;
  full_name: string;
  private: boolean;
  owner: {
    login: string;
    id: number;
    avatar_url: string;
    url: string;
  },
  html_url: string;
  description: string;
  url: string;
  created_at: Date;
  stargazers_count: number;
  watchers_count: number;
  has_issues: boolean;
  forks_count: number;
  score: number;
}
```

Let's import this service inside the AppComponent, and test the `search()` function quickly:

```
export class AppComponent  {
  
  constructor(private readonly searchService: GetHubSearchService) {}

  public onSearch($event) {
    this.searchService.search($event).subscribe(data => console.log(data));
  }
}
```

As we saw before, the `onSearch()` function is executed when the user types a search term.

Searching for the term `Syncfusion` results in:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/72ts0qpuybhfulevbp9t.png)

Great! The search for GitHub repositories works fine.

Let's define the `search-results` component to display the results in a Syncfusion Data Grid.

### Add the Search Results component
Let's revisit the `app.component` and prepare the code to pass the list of repository results to the Search Results component that we will create shortly. 

Make sure the `app.component.ts` looks as follows:

{% gist https://gist.github.com/bhaidar/708cbd45aa67c7f2ad9f4c62af368415 %}

The component now defines the `results$` observable that will be eventually passed to the Search Results component as an input parameter.

The code makes use of an RXJS Subject to notify of a new search term which will, in turn, execute the `results$` Observable and consequently call the search() function. This way our code is reactively built on top of RXJS Observables and Subjects.

On the `app.component.html` file, replace the content with the following:

```
<app-search-bar (action)="onSearch($event)"></app-search-bar>
<app-search-results [results]="results$ | async"></app-search-results>
```

Import the following CSS files, needed by the Data Grid, into the [src/styles.css] file:

```
@import '~@syncfusion/ej2-base/styles/material.css';
@import '~@syncfusion/ej2-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-inputs/styles/material.css';
@import '~@syncfusion/ej2-angular-grids/styles/material.css';
@import '~@syncfusion/ej2-notifications/styles/material.css';
@import '~@syncfusion/ej2-buttons/styles/material.css';  
@import '~@syncfusion/ej2-calendars/styles/material.css';  
@import '~@syncfusion/ej2-dropdowns/styles/material.css';  
@import '~@syncfusion/ej2-navigations/styles/material.css';
@import '~@syncfusion/ej2-popups/styles/material.css';
@import '~@syncfusion/ej2-splitbuttons/styles/material.css'; 
```

Install the following NPM package dependencies that are also required by the Data Grid:

```
@syncfusion/ej2-angular-grids
@syncfusion/ej2-notifications
@syncfusion/ej2-buttons
@syncfusion/ej2-calendars
@syncfusion/ej2-dropdowns
@syncfusion/ej2-navigations
@syncfusion/ej2-popups
@syncfusion/ej2-splitbuttons
```

To enable column filtering on the Data Grid we need to import the FilterService in the `providers` section of the module:

```
@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule, GridModule ],
  declarations: [ AppComponent, SearchBarComponent, SearchResultsComponent ],
  providers: [FilterService],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

Let's create a new Angular component named `search-results.component.ts`, and add the following content:

{% gist https://gist.github.com/bhaidar/2a9efcc9b899e28ce0fe3120d2b27427 %}

The component defines an input parameter named `results`. The component template embeds a Syncfusion Data Grid, specifies a collection of columns to render, enables filtering on the `Repo Name` column only, and customizes the column template for three columns:

- `Created At` column: A custom date display for the `created_at` column
- `Stars` column: A custom display for the Repo starts as a badge notification
- `Forks Count` column: A progress bar showing the `Forks Count` as a percentage of the `Watchers Count`

Let's see the Grid in action:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ter4by690bi4b81njlmq.png)

That was just the tip of the iceberg in terms of what you can do with Syncfusion components for Angular.

## Conclusion
Finally, I would like to recommend a strategy for learning, and reading the Syncfusion documentation. Start with the [Getting Started](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/?no-cache=1) section on the documentation page. Then, whenever you need to use a certain component, read its documentation, check all the options it offers, play around with a sample on StackBlitz, and then implement it in your application. Syncfusion offers all of its [demos](https://ej2.syncfusion.com/home/angular.html?_ga=2.57008751.410448657.1569848816-1932028536.1569848816) on the StackBlitz platform.