DEV Community

Cover image for The big Angular UI library comparison 📚
Thomas King
Thomas King

Posted on

The big Angular UI library comparison 📚

There are many UI libraries for Angular out there. Some provide the basics; others provide a whole arsenal of components. I went through the most-used Angular UI libraries and compared the components they provide. The libraries I took up in my comparison are:

As you can see, four of these are subscription-based; the rest have an MIT license. A handy website to know what you can do with a license is tl;drLegal. The MIT license summarized:

MIT license

Now off to the comparison! To make the comparison a bit easier for you, I've created a StackBlitz in which you can easily toggle between different UI libraries. You can even search the components. If the StackBlitz below does not work, I've added the entire sheet at the end of the blog as well.

There's more information about the individual components and what is meant by them below the StackBlitz.

List of components

Accordion

The accordion component allows the user to show and hide sections of related content on a page. Most commonly, when you expand a section, the previous section will collapse.

Accordion

Alert

The alert component provides contextual feedback to the user. Often, you can choose between the types info, warning, error, success, or a color theme (e.g., primary).

Alert

Autocomplete (Typeahead)

An autocomplete (or typeahead) is a special kind of input in which the user can start typing, and while he is typing, some results are shown as a suggestion to autocomplete his current input. This can be either local data or data coming from a server.

Autocomplete

Some libraries allow the results of the autocomplete to be grouped.

Avatar

The avatar component is used to display the profile image of a user. Depending on the UI library, it can be round, square, or rounded square.

Avatar

Badge

The badge component visually shows the status of something or depicts the count on some element. E.g., the number of notifications. A badge is purely visual and not to be confused with a tag. You can interact with a tag, not with a badge.

Badge

Barcodes

A component not only to show or generate barcodes but sometimes QR codes (e.g., Ng-zorro uses QR codes).

QR code

Block UI

A component that will add an overlay to your page so you can no longer interact with it. It is often used when something is loading or submitting to prevent any user interaction.

Breadcrumb

The breadcrumb component shows the user where he is in the web application hierarchy. It allows him to navigate up the hierarchy.

Breadcrumb

Button

There is no need to explain what a button component does, as it speaks for itself. A component is used instead of the regular HTML button because it allows for more control and extensibility. The button component often comes in different color themes.

Buttons

Some libraries provide additional options for their button component, such as loading behavior, ripples, etc.

Button group

Sometimes you wish to group buttons that are related. This can be to toggle between different states or even be purely visual to show the user these buttons are in fact related.

Button group

Some libraries allow the button group to behave as a radio button group (single selection) or as a multi-selection.

Calendar

The calendar component displays an entire calendar to the user. The library often provides the calendar as an inline variant of what is shown in the popup of the date picker.

Calendar

Depending on the library, you can choose options such as the start day of the week, a button to select "today", changing globalization, etc.

Card

The card component displays some data as a card. Content is always required for the card. You can additionally (depending on the library's capabilities) add a title, image, avatar, call-to-action, etc.

Card

The card component often distinguishes itself by showing a shadow around the card to display some form of depth.

Carousel

A carousel component, or slideshow component, is used to cycle through several elements. These can be images or even content. Some options depending on the library are autoplay, styling of the left and right arrows, adding pagination bullets, etc.

Carousel

Chart

Some Angular UI libraries offer different types of charts; others are more limited. A chart component is used to display data in a visual way.

Chart

Chat

A chat component is used to visualize an entire chat.

Chat

Checkbox

A checkbox component is used to display true or false values. Some libraries even provide tri-state support (i.e., true, false, or null). A checkbox component is used in preference to the regular HTML input (type checkbox) to provide custom styling or additional options.

Checkboxes

Chips

Chips are a special kind of input in which each input of the user is represented as a "chip" in the list. It allows the user to enter multiple things and clearly see each separate input. A library often allows each chip to be removed by adding a remove icon (a bin or an "x"). They can also be accompanied by another icon to depict the usage. 

Chips

Sometimes the library allows direct interaction with the chips, even without any input field.

Chips without input

Collapse

A collapse component allows some content to be expanded or collapsed that is triggered by something else. An accordion is a special kind of collapse since each header collapses or expands the content beneath it. A collapse component can be any content and can often be triggered by any element (although good accessibility suggests a button).

Collapse

With some additional styling, you could use an accordion component as a collapse. The accordion component would then only hold a single panel.

Color picker

A color picker component allows the user to select a color. Some libraries prefer to create their own color picker instead of the regular HTML input (type color) to provide additional styling or extra options, e.g., an inline variant. It also allows them to return a different format (rgba, hex, rgb, etc.).

Color picker

Context menu

A context menu component is used when the user right-clicks a part of your page and you want to provide a different menu with different actions.

Context menu

Data view

A data view is a component in which you can provide tabular data and, by means of a template, show it to the user in a specific way.

Data view

Date picker

With a date picker component, you can fill in an input field with a date selected from a calendar that pops up next to the input field. A library can provide its own date picker instead of the HTML input (type date), so it can have custom styling and more options, e.g., different views (year, month, day, time) or date formatting.

Date picker

Some libraries allow for date range selection as well.

Diagram

A diagram component can show a diagram, such as an activity diagram or sequence diagram.

Hierarchy diagram

Divider

A divider component is used to clearly divide a list of items or sections. Most often, it is a single line to show the divider, but it can be accompanied by text.

Dividers

Dock

A dock component is a special menu for navigation that is docked to one of the four sides of the pages: top, bottom, left, or right.

Dock on the left

Drag & drop

A drag & drop component allows for drag & drop functionality. This can be used for sorting, allowing the user to set preferences in order, etc.

Drag and drop

Dropdown (Select)

A dropdown component, or a select component, is used to make a selection from a list. When a selection is made, the selected item appears in the box. Some libraries allow for multiple selections by using checkboxes.

Select

The library prefers to provide its own dropdown component in favor of the regular HTML select to have custom styling and/or extra options.

Dropdown button

A dropdown button allows the user to show multiple actions on a button. Much like a regular dropdown, but instead of showing the selection afterwards, an action is performed.

Dropdown button

Some libraries have a "split button", in which not only can you have multiple actions on the dropdown, but the main button also has an action. So with the split button, you can have a main action or a side action.

Split button

Editor

Some libraries offer a basic editor component; others offer an entire WYSIWYG (What You See Is What You Get). The user can edit content and apply basic or advanced styling to it. Often, the component also allows for export or preview.

Editor

File upload

With a file upload component, users can upload one or multiple files. Some libraries allow for only one file per upload; others allow multiple uploads. You could use the regular HTML input (type file), but a file upload component provides much more options.

File upload

Filter

A filter component is used to create advanced filters. Often used for creating complex queries.

Filter

Floating button

A floating button component (also called FAB, or Floating Action Button) is a button that floats in a specific position on the page. When you scroll down, the floating button always stays in that position. It is most commonly used to execute a primary action for that page.

FAB

Floating label

A floating label component is used together with a text field. When the user focuses on that text field, the label (that looks like the placeholder) will simply float above the text field, making the user still aware of what that text field is about.

Floating label

Gauge

A gauge component shows data in a gauge. Some libraries allow for high customization and nice animations.

Gauge

Icon

Some libraries come with their own icon library. You can use the icon component to display an icon. Often, you have options like color and size.

Icons

Image editor

An image editor component allows for editing an image and saving or exporting it.

Image editor

Image preview

An image preview component shows an image on which the user can interact so that the image is shown in a larger view (preview).

Image preview

Input

The input component allows for user input. You can often choose between different colors, sizes, and other options, like a clear button. Some libraries include the label in the input component.

Input

Input group

An input group component shows related things inside a single input. This could be a button next to the input or a prefix icon.

Input group

Input mask

The input mask component provides a mask to the user to which they must adhere. Good examples are phone numbers or credit card numbers.

Input mask

Label

A label component is often a wrapper component for the regular label but provides additional styling and options, such as an icon or required markers.

Label

List view

The list view component shows data in a list. The data is provided to the list view component, and by using a certain item template, it is shown as desired.

List view

Listbox

A listbox component is used for showing several options and allowing the user to select multiple of them. The listbox options are all shown in a panel to the user immediately, which is different than a dropdown.

Listbox

Map

A map component is used for showing a map to the user.

Map

Menu

The menu component is a form of navigation. It is often displayed as a menu bar.

Menu

Modal (Dialog)

A modal (or dialog) component is used for displaying content above something else. Libraries often provide closing options such as click backdrop, a close button, or the escape key.

Dialog

Multiselect

A multiselect component is like a dropdown (select) component but allows for multiple selections, and this is often done by using checkboxes.

Multiselect

Paginator

The paginator component is used for showing the pagination of something, e.g., a list or a table. It often contains options like go to the first or last page, go to the previous or next page, or separators when there are a lot of pages.

Paginator

Pdf viewer

A pdf viewer component is used for showing pdf documents inside a page.

Pdf viewer

Pivot table

A pivot table component is used for analyzing a set of data. With it, you can create powerful summaries or calculations. E.g., based on a set of data in which people wear a hat or hoodie, extract how many people wear a hat, how many wear a hoodie, etc.

Pivot table

Popover

A popover component is used to display related, additional content. It is not to be confused with a tooltip. A tooltip is used for explaining the content, and a popover shows related, additional content. Often, a popover is shown by clicking the source. It also supports multiple forms of content, such as images or links.

Popover

Progress bar

The progress bar component is used to show progress to the user. You can often choose from several colors. Some also allow for indefinite progress bars.

Progress bar

Radio button

A radio button component is used together with other radio buttons to provide the user with a choice. A radio button component is used in preference to the regular HTML input (type radio) to provide custom styling or additional options.

Radio button

Rating

A rating component is a special kind of slider component. The range is often small (e.g., 0 to 5, 0 to 10), starting from a certain number, and is represented by a set of icons (often a star icon). When you hover over the rating component, the icons will be filled to the point where your mouse is hovering. As soon as you click, that rating persists (until you choose a new rating).

Rating

Scheduler

The scheduler component represents scheduled data and allows a user to manage it by creating, updating, or deleting events from the schedule. A scheduler can display data on different views, e.g., months, days, etc.

Scheduler

Sidebar

A sidebar component is used for displaying navigation items on the side of a page.

Sidebar

Signature

A signature component allows the user to sign content by adding their signature.

Signature

Skeleton

A skeleton component is a special kind of loading component. It shows the rough structure of the content that is loading, e.g., 4 horizontal rectangles for a list component that is loading. It gives the user an idea of what kind of content will appear after the loading has finished.

Skeleton

Slider

A slider component is used for displaying a range between two numbers. You can also change the number of steps the slider increases. A good example for the slider component is a price range for a filter.

Slider

Sparkline

Sparkline charts are a special kind of chart. They are used for displaying data in a small space (e.g., inline usage).

Sparkline

Spinner

A spinner component is used as a placeholder or as an overlay for the content that is loading. It is often an icon that is animated by spinning it. Some libraries have spinner components that can be used inline.

Spinner

Splitter

The splitter component creates layouts that split into panes that may be resized, expanded, and collapsed. A good example of a splitter component is on StackBlitz, where you can resize the editor and preview panel.

Splitter

Spreadsheet

A spreadsheet component is used for displaying Excel-like spreadsheets. They often come with export functionality.

Spreadsheet

Steps

The steps component, or wizard component, is used for showing steps. It guides the user through a certain process.

Steps

Table

A table component is used for displaying tabular data. Some libraries offer a basic table component to show the tabular data. Others have advanced table components with options like sorting, filtering, or even exporting.

Table

Tabs

Tabs is a container component that the user can navigate by means of tabs. Some libraries have extra options, like scrollable tabs.

Tabs

Tag

A tag component is used to categorize content. They contain simple text and can be interactive. Common examples of tags are status, category, etc.

Tags

Terminal

A terminal component provides an entire terminal to the user.

Terminal

Textarea

A textarea component is used to have multiline text input. A textarea component is sometimes preferred over the regular HTML textarea because it allows for extra options such as helper text or floating labels.

Textarea

Timeline

The timeline component is used for showing a list of events over a period of time.

Timeline

Time picker

What a date picker is for entire dates, the time picker is for time specifically. It allows you to pick a time.

Time picker

Toast

A toast is a dismissible message. Some libraries allow toasts to be automatically dismissed after a period of time. They are most often set at the bottom right, but they have configurable positioning.

Toast

Toggle

A toggle or switch is used to show true or false values in the form of a visual switch.

Toggle

Toggle button

Just like a regular toggle, the toggle button is used to show true or false values. But instead of a switch, it is a button that is either in the pressed state or not.

Toggle button

Toolbar

A toolbar is a set of buttons and/or actions all grouped in a bar that is fixed at a certain position (either top, bottom, left, or right) of a content panel. The buttons and actions on the toolbar often have an influence on the content of the content panel. E.g., a toolbar for a rich text editor.

Toolbar

Tooltip

A tooltip displays text to explain the content you're hovering over. You can often change the position it is displayed in (top, right, bottom, or left). Some libraries also allow you to trigger the tooltip with a click.

Tooltip

Tree

A tree component is used for showing nested data. Some libraries allow for nested tabular data; others are more basic and are nested lists.

Tree

Word (Document viewer)

A viewer component for showing a Word file or another document. Just like the pdf viewer, but for Word or other documents.

Document viewer

Conclusion

As you can see, there are many Angular UI libraries, but you should pick one that fits your needs. Also, think about the budget, because not every library here is free. You can always go for a free one and use other open-source libraries for the more detailed stuff, like charts. Just keep in mind to keep the number of libraries limited, because the more libraries you use, the more you will need to maintain when updating your Angular version.

To end this blog post, here's the entire comparison in a regular table (in case the StackBlitz fails to load). I hope you enjoyed this read! And as always, if you have any questions, feel free to contact me!

Ng-bootstrap PrimeNg Kendo UI Ngx-bootstrap Angular Material Syncfusion DevExtreme Angular Ng-zorro Nebular Clarity Ignite UI
Accordion                 x             x       x         x             x                 x           x                   x         x       x       x        
Alert                     x             x                 x                               x                               x         x       x                
Autocomplete (Typeahead) x             x       x         x             x                 x           x                   x         x               x        
Avatar                                 x       x                                         x                               x         x               x        
Badge                                   x       x                       x                 x                               x         x       x       x        
Barcodes                                       x                                         x                               x                                  
Block UI                               x                                                                                                                    
Breadcrumb                             x       x                                         x                               x                                  
Button                                 x       x         x             x                 x           x                   x         x       x       x        
Button group                           x       x         x             x                 x           x                   x         x       x       x        
Calendar                 x             x       x         x             x                 x           x                   x         x               x        
Card                                   x       x                       x                 x                               x         x       x       x        
Carousel                 x             x       x         x                               x           x                   x                         x        
Chart                                   x       x                                         x           x                                             x        
Chat                                           x                                                                                   x                        
Checkbox                               x       x                       x                 x           x                   x         x       x                
Chips                                   x       x                       x                 x           x                   x         x       x       x        
Collapse                 x             x       x         x                                                               x                                  
Color picker                           x       x                                         x           x                   x                                  
Context menu                           x       x                                         x           x                   x         x                        
Data view                               x       x                                         x           x                                     x       x        
Date picker               x             x       x         x             x                 x           x                   x         x       x       x        
Diagram                                                                                   x           x                                                      
Divider                                 x                               x                                                 x                         x        
Dock                                   x                                                                                                                    
Drag & drop                             x       x                                                     x                                             x        
Dropdown (Select)         x             x       x         x             x                 x           x                   x         x       x       x        
Dropdown button                         x       x                                         x           x                   x                                  
Editor                                 x       x                                         x           x                                                      
File upload                             x       x                                         x           x                   x                                  
Filter                                         x                                         x           x                                             x        
Floating button                         x       x                       x                 x           x                                                      
Floating label                         x       x                       x                 x           x                                             x        
Gauge                                   x       x                                         x           x                                             x        
Icon                                   x       x                       x                 x           x                   x         x       x       x        
Image editor                                                                             x                                                                  
Image preview                           x                                                                                 x                                  
Input                                   x       x                       x                 x           x                   x         x       x       x        
Input group                             x       x                                         x           x                   x         x               x        
Input mask                             x       x                                         x           x                                             x        
Label                                           x                                                     x                   x                         x        
List view                               x       x                       x                 x           x                   x         x       x       x        
Listbox                                 x       x                                         x           x                                     x                
Map                                             x                                         x           x                                             x        
Menu                     x             x       x                       x                 x           x                   x         x       x       x        
Modal (Dialog)           x             x       x         x             x                 x           x                   x         x       x       x        
Multiselect                             x       x                       x                 x           x                   x         x               x        
Paginator                 x             x       x         x             x                                                 x                         x        
Pdf viewer                                     x                                         x                                                                  
Pivot table                                     x                                         x           x                                             x        
Popover                   x             x       x         x                               x           x                   x         x                        
Preview image                           x                                                                                 x                                  
Progressbar               x             x       x         x             x                 x           x                   x         x       x       x        
Radiobutton                             x       x                       x                 x           x                   x         x       x       x        
Rating                   x             x       x         x                               x                               x                         x        
Scheduler                                       x                                         x           x                                                      
Sidebar                   x             x       x                       x                 x           x                   x         x       x       x        
Signature                                       x                                         x                                                                  
Skeleton                               x       x                                         x                               x                                  
Slider                                 x       x                       x                 x           x                   x                 x       x        
Sparkline                                       x                                         x           x                                             x        
Spinner                                 x       x                       x                 x           x                   x         x       x                
Splitter                               x       x                                         x                                                         x        
Spreadsheet                                     x                                         x                                                         x        
Steps                                   x       x                       x                                                 x         x       x       x        
Table                     x             x       x                       x                 x           x                   x                 x       x        
Tabs                                   x       x         x             x                 x           x                   x         x       x       x        
Tag                                     x       x                                                                         x                 x                
Terminal                               x                                                                                                                    
Textarea                               x       x                       x                 x           x                   x         x       x       x        
Timeline                               x       x                                         x           x                   x                 x                
Timepicker               x             x       x         x                               x           x                   x         x               x        
Toast                     x             x       x                       x                 x           x                   x         x               x        
Toggle                                 x       x                       x                 x           x                   x         x       x       x        
Toggle button                           x       x         x             x                 x                                                                  
Toolbar                                 x       x                       x                 x           x                   x         x               x        
Tooltip                   x             x       x         x             x                 x           x                   x         x       x       x        
Tree                                   x       x                       x                 x           x                   x         x       x       x        
Word (Document viewer)                                                                   x                                                                  

Top comments (5)

Collapse
 
usarskyy profile image
Volodymyr Usarskyy • Edited

Never ever use DevExtreme components for Angular because:

  1. They are badly written wrappers around jQuery components. This means untyped API and lots of bugs that can't be easily fixed
  2. Documentation is far not the best
  3. Almost useless forum with answers like "yes, this is the problem, it was added into our backlog" dated 6 years ago O_o
  4. Often components have terrible performance. Lists with virtual scrolling? Never heard of them.
  5. They are russians. Officially, of course, the company is not registered there but you can google yourself how it is done. I am not going into details because there are already a couple of topics where people explained everything.
Collapse
 
kashton51 profile image
Info Comment hidden by post author - thread only accessible via permalink
kashton | Areon

🚀 Attention tech enthusiasts! Areon Network is thrilled to announce its Hackathon with a massive $500,000 prize pool. Don't miss out on the chance to shine—register now at hackathon.areon.network and show off your coding skills! 💡💰 #TechInnovation #AreonHackathon

Collapse
 
mfp22 profile image
Mike Pearson

All of them have modals - do any of them use declarative APIs yet for controlling their open state, or do you still have to command them to open like they're jQuery plugins?

Collapse
 
kinginit profile image
Thomas King

Some have modal components that use property binding (e.g., a visible input); others have a modal service in which you can dynamically create a modal. Some even have both (like PrimeNG). It didn't go in that much detail though, this blog is more about what each library provides.

Collapse
 
mfp22 profile image
Mike Pearson

Out of the dozen or so front end frameworks, Angular is the only one I found where the top 3 component libraries make you write imperative code to manage modal state

Some comments have been hidden by the post's author - find out more