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

Introduction to Zod for Data Validation

As web developers, we're often working with data from external sources like APIs we don't control or user inputs submitted to our backends. We can't always rely on this data to take the form we expect, and we can encounter unexpected errors when it deviates from expectations. But with the Zod library, we can define what our data ought to look like and parse the incoming data against those defined schemas. This lets us work with that data confidently, or to quickly throw an error when it isn't correct. Why use Zod? TypeScript is great for letting us define the shape of our data in our code. It helps us write more correct code the first time around by warning us if we are doing something we shouldn't. But TypeScript can't do everything for us. For example, we can define a variable as a string or a number, but we can't say "a string that starts with user_id_ and is 20 characters long" or "an integer between 1 and 5". There are limits to how much TypeScript can narrow down our data for us. Also, TypeScript is a tool for us developers. When we compile our code, our types are not available to the vanilla JavaScript. JavaScript can't validate that the data we actually use in our code matches what we thought we'd get when we wrote our TypeScript types unless you're willing to manually write code to perform those checks. This is where we can reach for a tool like Zod. With Zod, we can write data schemas. These schemas, in the simplest scenarios, look very much like TypeScript types. But we can do more with Zod than we can with TypeScript alone. Zod schemas let us create additional rules for data parsing and validation. A 20-character string that starts with user_id_? It's z.string().startsWith('user_id_').length(20). An integer between 1 and 5 inclusive? It's z.number().int().gte(1).lte(5). Zod's primitives give us many extra functions to be more specific about *exactly* what data we expect. Unlike TypeScript, Zod schemas aren't removed on compilation to JavaScript—we still have access to them! If our app receives some data, we can verify that it matches the expected shape by passing it to your Zod schema's parse function. You'll either get back your data in exactly the shape you defined in your schema, or Zod will give you an error to tell you what was wrong. Zod schemas aren't a replacement for TypeScript; rather, they are an excellent complement. Once we've defined our Zod schema, it's simple to derive a TypeScript type from it and to use that type as we normally would. But when we really need to be sure our data conforms to the schema, we can always parse the data with our schema for that extra confidence. Defining Data Schemas Zod schemas are the variables that define our expectations for the shape of our data, validate those expectations, and transform the data if necessary to match our desired shape. It's easy to start with simple schemas, and to add complexity as required. Zod provides different functions that represent data structures and related validation options, which can be combined to create larger schemas. In many cases, you'll probably be building a schema for a data object with properties of some primitive type. For example, here's a schema that would validate a JavaScript object representing an order for a pizza: ` Zod provides a number of primitives for defining schemas that line up with JavaScript primitives: string, number, bigint, boolean, date, symbol, undefined, and null. It also includes primitives void, any, unknown, and never for additional typing information. In addition to basic primitives, Zod can define object, array, and other native data structure schemas, as well as schemas for data structures not natively part of JavaScript like tuple and enum. The documentation contains considerable detail on the available data structures and how to use them. Parsing and Validating Data with Schemas With Zod schemas, you're not only telling your program what data should look like; you're also creating the tools to easily verify that the incoming data matches the schema definitions. This is where Zod really shines, as it greatly simplifies the process of validating data like user inputs or third party API responses. Let's say you're writing a website form to register new users. At a minimum, you'll need to make sure the new user's email address is a valid email address. For a password, we'll ask for something at least 8 characters long and including one letter, one number, and one special character. (Yes, this is not really the best way to write strong passwords; but for the sake of showing off how Zod works, we're going with it.) We'll also ask the user to confirm their password by typing it twice. First, let's create a Zod schema to model these inputs: ` So far, this schema is pretty basic. It's only making sure that whatever the user types as an email is an email, and it's checking that the password is at least 8 characters long. But it is *not* checking if password and confirmPassword match, nor checking for the complexity requirements. Let's enhance our schema to fix that! ` By adding refine with a custom validation function, we have been able to verify that the passwords match. If they don't, parsing will give us an error to let us know that the data was invalid. We can also chain refine functions to add checks for our password complexity rules: ` Here we've chained multiple refine functions. You could alternatively use superRefine, which gives you even more fine grained control. Now that we've built out our schema and added refinements for extra validation, we can parse some user inputs. Let's see two test cases: one that's bound to fail, and one that will succeed. ` There are two main ways we can use our schema to validate our data: parse and safeParse. The main difference is that parse will throw an error if validation fails, while safeParse will return an object with a success property of either true or false, and either a data property with your parsed data or an error property with the details of a ZodError explaining why the parsing failed. In the case of our example data, userInput2 will parse just fine and return the data for you to use. But userInput1 will create a ZodError listing all of the ways it has failed validation. ` ` We can use these error messages to communicate to the user how they need to fix their form inputs if validation fails. Each error in the list describes the validation failure and gives us a human readable message to go with it. You'll notice that the validation errors for checking for a valid email and for checking password length have a lot of details, but we've got three items at the end of the error list that don't really tell us anything useful: just a custom error of Invalid input. The first is from our refine checking if the passwords match, and the second two are from our refine functions checking for password complexity (numbers and special characters). Let's modify our refine functions so that these errors are useful! We'll add our own error parameters to customize the message we get back and the path to the data that failed validation. ` Now, our error messages from failures in refine are informative! You can figure out which form fields aren't validating from the path, and then display the messages next to form fields to let the user know how to remedy the error. ` By giving our refine checks a custom path and message, we can make better use of the returned errors. In this case, we can highlight specific problem form fields for the user and give them the message about what is wrong. Integrating with TypeScript Integrating Zod with TypeScript is very easy. Using z.infer<typeof YourSchema> will allow you to avoid writing extra TypeScript types that merely reflect the intent of your Zod schemas. You can create a type from any Zod schema like so: ` Using a TypeScript type derived from a Zod schema does *not* give you any extra level of data validation at the type level beyond what TypeScript is capable of. If you create a type from z.string.min(3).max(20), the TypeScript type will still just be string. And when compiled to JavaScript, even that will be gone! That's why you still need to use parse/safeParse on incoming data to validate it before proceeding as if it really does match your requirements. A common pattern with inferring types from Zod schemas is to use the same name for both. Because the schema is a variable, there's no name conflict if the type uses the same name. However, I find that this can lead to confusing situations when trying to import one or the other—my personal preference is to name the Zod schema with Schema at the end to make it clear which is which. Conclusion Zod is an excellent tool for easily and confidently asserting that the data you're working with is exactly the sort of data you were expecting. It gives us the ability to assert at runtime that we've got what we wanted, and allows us to then craft strategies to handle what happens if that data is wrong. Combined with the ability to infer TypeScript types from Zod schemas, it lets us write and run more reliable code with greater confidence....

Nov 15, 2024

7 mins

JavaScriptZod

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

Introduction to Zod for Data Validation

Let's innovate together!

You might also like

Introducing the release of Vue 3

Introduction to Zod for Data Validation