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:
- Ng-bootstrap (MIT license)
- PrimeNG (MIT license)
- Kendo UI for Angular (subscription)
- Ngx-bootstrap (MIT license)
- Angular Material (MIT license)
- Syncfusion Angular UI (subscription)
- Devextreme Angular (subscription)
- Ng-zorro (MIT license)
- Nebular (MIT license)
- Clarity (MIT license)
- Ignite UI for Angular (subcription)
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:
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.
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).
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.
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.
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.
Barcodes
A component not only to show or generate barcodes but sometimes QR codes (e.g., Ng-zorro uses QR codes).
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.
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.
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.
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.
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.
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.
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.
Chat
A chat component is used to visualize an entire 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.
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.
Sometimes the library allows direct interaction with the chips, even without any input field.
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).
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.).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Filter
A filter component is used to create advanced filters. Often used for creating complex queries.
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.
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.
Gauge
A gauge component shows data in a gauge. Some libraries allow for high customization and nice animations.
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.
Image editor
An image editor component allows for editing an image and saving or exporting it.
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).
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 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 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.
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.
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.
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.
Map
A map component is used for showing a map to the user.
Menu
The menu component is a form of navigation. It is often displayed as a menu bar.
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.
Multiselect
A multiselect component is like a dropdown (select) component but allows for multiple selections, and this is often done by using checkboxes.
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.
Pdf viewer
A pdf viewer component is used for showing pdf documents inside a page.
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.
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.
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.
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.
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).
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.
Sidebar
A sidebar component is used for displaying navigation items on the side of a page.
Signature
A signature component allows the user to sign content by adding their 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.
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.
Sparkline
Sparkline charts are a special kind of chart. They are used for displaying data in a small space (e.g., inline usage).
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.
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.
Spreadsheet
A spreadsheet component is used for displaying Excel-like spreadsheets. They often come with export functionality.
Steps
The steps component, or wizard component, is used for showing steps. It guides the user through a certain process.
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.
Tabs
Tabs is a container component that the user can navigate by means of tabs. Some libraries have extra options, like scrollable 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.
Terminal
A terminal component provides an entire terminal to the user.
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.
Timeline
The timeline component is used for showing a list of events over a period of time.
Time picker
What a date picker is for entire dates, the time picker is for time specifically. It allows you to pick a time.
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.
Toggle
A toggle or switch is used to show true or false values in the form of a visual switch.
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.
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.
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.
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.
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.
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)
Never ever use DevExtreme components for Angular because:
🚀 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
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?
Some have modal components that use property binding (e.g., a
visibleinput); 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.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