Bilal Haidar for This Dot

Posted on Oct 28, 2019 • Originally published at labs.thisdot.co

Develop Stunning Applications Easily with Syncfusion

#syncfusion #angular #javascript

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)

Mobile

Desktop

WinForms
WPF

File Formats

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:
Wide range of browser support including:
- Chrome (Latest)
- Firefox (Latest)
- Opera (Latest)
- Edge (13+)
- IE (11+)
- Safari (9+)
- IOS (9+)
- Android (4.4+)
A detailed API Reference for all the classes, services, components, and other objects used
Built-in themes 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 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. 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 using load() and L10n class. This library helps you in building localized apps and support multiple languages and cultures.
Drag and Drop library.

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:

Custom Reactive Form Validators. 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.

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 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:

Calendar, Date Picker, DateTime Picker

Almost every application deals with Dates. Personally, working with dates in JavaScript, in general, is a pain in the neck. These components support globalisation via the combination of the internationalisation and localisation libraries. They can be really helpful for your application.

Card component

The Card 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 that you can embed, and use in your Angular apps.

Gauges

Gauges 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.

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 provides by Syncfusion for Angular developers.

Dashboard Layout

The flexible Dashboard Layout 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.

Here's a step-by-step guide on how to install the Dashboard Layout module into an Angular CLI app.

Dialogs

Dialogs 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.

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.

File Manager

The File Manager 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.

Data Grid

Maybe the Data Grid 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.

InPalceEditor

In-Place-Editor 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.

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 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.

Schedule

The Schedule 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.

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:

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 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

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:

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 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:

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:

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:

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:

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 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 on the StackBlitz platform.

DEV Community