Javascript

Develop Stunning Applications Easily with Syncfusion

Published Oct 31, 2019

Updated Feb 14, 2023

11 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

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.

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:

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.

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

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

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

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.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Bilal Haidar
Author, Developer, and Mentor: Professional ASP.NET 3.5 Security, Membership, and Role Management with C# and VB | A Complete Guide to VueJS
@bhaidar @bhaidar

Introducing the release of Vue 3

Back in October 2018, Evan You announced plans to start building the third version of VueJS. Featuring 30+ RFCs, over 2,600 commits, 628 pull request from 99 contributors, Vue 3's release reflects tireless ingenuity, passion, and hard work. Its release, no doubt, is a cause for celebration for all of the Vue community members who have been eagerly awaiting it. I, for one, am thrilled to share some resources that I believe will help developers migrate to Vue 3: - Vue 2 -> Vue 3 Migration Guide - Vue Router 3.0 -> Vue Router 4.0 Migration Guide - Vuex 4 - Chrome Vue JS DevTools - FireFox DevTools Here at This Dot, we have tracked Vue 3's development from the onset. We have written blog posts, published a book, hosted Vue Meetups, debuted JavaScript Marathon, shared Modern Web Podcasts, and more! Today, we’ll take a guided tour through all the material we have shared on Vue 2 and Vue 3. Blog Posts Here are our latest blog posts on Vue 3: - How to Set Up Storybook in Vue 3 - Async Components in Vue 3 - Your first Vue 3 app using TypeScript - Teleporting in Vue 3 - Content Distribution in Vue 3 - Custom Directives in Vue 3 - Vue 3 Composition API, do you really need it? You may access the remaining blog posts at This Dot Labs Blog. A Complete Guide to VueJS In April 2020, This Dot released A Complete Guide to VueJS by Bilal Haidar. This book is a precise, and detailed resource for learning VueJS, and highlights some top courses for Vue and JavaScript. Most importantly, it gives a brief introduction to almost all the new features in Vue 3. Grab your own copy for free! Vue Meetups We have hosted more than 10+ Vue Meetups in the past year with dozens of speakers, including Evan You, other Vue Core team members, and Vue developers interested in the future of the framework. To watch past meetup recordings, follow this link to get access to all the meetups on one page. JavaScript Marathon This Dot's team delivered six free live Vue JS tutorials during the JavaScript Marathon. Here’s a list of all the VueJS live sessions recordings: - 1 Hour to Learn Vue - Master State Management in Vue with VueX - Master PWA in Vue - Learning Unit Testing in Vue - Pro Tips on Using AWS with Vue - Debugging Vue: Quick Tips and Tricks Modern Web Podcasts This Dot's team delivered more than 40+ podcasts in the last two years. Here’s a link to the Vue JS Podcasts: - S07E1 Modern Web Podcast - Introducing Vite - Evan You’s new project + Vue 3 Updates - S06E12 Modern Web Podcast - Vue 3, Code Education, & the Vue Community - S06E4 Modern Web Podcast - Vue Updates with Chris Fitz, Jake Dohm, and Rob Ocel The Future of Vue The team at This Dot is hardly finished tracking Vue's progress, as well as the progress of many other web based technologies. To join us on our technical exploration journey, be sure to follow This Dot Media on Twitter! If you have specific questions about how to begin your Vue 3 migration, or have general questions about Vue 3, don't hesitate to reach out to us at hi@thisdot.co....

Sep 18, 2020

4 mins

VueJavaScriptWeb Development

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Building a Stripe App: A Step-by-Step Guide to QR Code Generation Why Build a Stripe App? I recently participated in an audio space with the Stripe team, and something they said really stuck with me: the Stripe app store is a growing area that isn't overly saturated yet. There's a lot of potential for new apps, and companies can use this opportunity to grow. I work at a company called This Dot Labs, and we've created several Stripe apps and even own one. After looking at the data, I can confirm that the Stripe team was right! Creating a QR Code Generator App For this tutorial, we'll build a QR code app that can take a URL and generate a code for it. This is a good use case to help you understand the ins and outs of Stripe's developer tools. Why QR Codes? QR codes are useful tools that have become common in e-commerce, restaurants, and other industries. While Stripe already has a QR code tool, we'll make our own to familiarize ourselves with their syntax and problem-solving approaches. Project Structure Before we dive into the implementation, let's look at the structure of our Stripe App QR Code project: * .vscode: Contains settings for Visual Studio Code * source/views: Holds the main application views * .gitignore: Specifies files to ignore in version control * stripe-app.json: Defines the Stripe app configuration * ui-extensions.d.ts: TypeScript declaration file for UI extensions * .build: this is where the built Stripe app gets placed. Step-by-Step Implementation 1\. Install Stripe Locally First, you need to install Stripe on your local machine. The documentation provides great instructions for this: * For Mac users: Use Brew to install * For Windows users: Download the package and add it to your environment variables You can find the details here in the stripe docs to install the Stripe CLI https://docs.stripe.com/stripe-cli When using Windows, you must do stripe login from Powershell, NOT from Git bash or any other tool. After the server is up, then you can continue using git bash for everything else. After stripe login, you need to enter stripe apps start. Once you do that, the server is up and running and you can go back to using git bash or any other tool. 2\. Install Dependencies We'll be using an extra package for QR code generation. Install it using npm: ` 3\. Set Up the Main Component Let's look at the home.tsx file, where we'll use Stripe's UI components: ` These components are similar to other UI libraries like Bootstrap or Tailwind CSS. 4\. Create the UI Structure Our app will have: * An input field for the URL * Validation using a regex pattern * Error handling for invalid URLs * QR code generation and display Here is the Home.tsx file that is located in the src/views folder ` * ContextView` is at the top level of the app where we see the Title and the link to the Stripe Docs that we placed in our Context View. * Box is how you use Divs. * Banners can be used to show notification errors or any other item you wish to display. * Textfields are input fields. * Everything else is pretty self-explanatory. 5\. Handle Content Security Policy One problem I personally ran into was when I tried to redirect users, the Stripe policies would block it since I did not express that I knew what it was doing. I had to go into the stripe-app.json file and mention the specific security policies. For this particular exercise, I kept these as null. This is my stripe-app.json file. ` 6\. Configure App Views As you can see here, the stripe-app.json file shows the views for each file I have. The Home.tsx file and the Invoice.tsx are also included This is our way of saying that for each view we have, show the app functionality on that page. Our stripe-app.json file will show it but also, the manifest.js file in our .build folder will also show the same. Any view that doesn't have a file will not show the application's functionality. So, if I were to go to transactions, the app would not show the same logic as the home or invoices page. By following these steps, you'll have a fully functional QR code generator app for Stripe. This is just a simple example, but the potential for Stripe apps is massive, especially for businesses serving e-commerce customers. If you need help or get stuck, don't hesitate to reach out, danny.thompson@thisdot.co. The Stripe team is also very active in answering questions, so leverage them as a resource. Happy coding!...

Dec 18, 2024

4 mins

stripe

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Develop Stunning Applications Easily with Syncfusion

Syncfusion Components

Web (Essential JS 2)

Mobile

Desktop

File Formats

Angular UI Components Library

Common Features

Selection of Angular Components

Avatar

Barcode

Calendar, Date Picker, DateTime Picker

Card component

Charts

Gauges

Color Picker

Dashboard Layout

Dialogs

Document Editor

File Manager

Data Grid

InPalceEditor

PDF Viewer

Schedule

Hands-on Sample App

Add the Search Bar component

Implement the GitHub API Search for repositories

Add the Search Results component

Conclusion

Bilal Haidar

You might also like

Introducing the release of Vue 3

Building a Stripe App: A Step-by-Step Guide to QR Code Generation

Let's innovate together!

You might also like

Introducing the release of Vue 3

Building a Stripe App: A Step-by-Step Guide to QR Code Generation