UI Frameworks for Angular
The Angular web framework is an awesome tool for creating frontend web interfaces. In fact, it's so awesome that we use it for creating the frontend of the Modern Learner app.
However when you build a web app, you really want some UI widgets that work out of the box rather than re-creating things like an autocomplete search box, or better styling for input boxes and buttons. So here is a list of some awesome UI frameworks for Angular.
- Angular Material: uses the Google Material Design paradigm
- NG Zorro: uses Ant Financial's design paradigm
- Kendo UI: Telerik's UI framework, also works for React, jQuery and Vue (paid with a free trial)
- PrimeNG: works for Angular, React and Vue.
- ngx-bootstrap
- DevExtreme
- jQWidgets
- ng-bootstrap
- Covalent UI
- ngx-foundation: uses Foundation CSS for its theming
- Clarity
- NG Lightning: uses the Salesforce Lightning design paradigm
- Ignite UI: made for apps that need a lot of data grids and charts
We take a look at some of them in-depth below.
Angular Material UI
Angular Material follows the Material design system created by Google. It contains many components for UI widgets such as buttons, badges, dialogs, datepickers, cards, side navigation and more.
It also contains the CDK, Component Dev Kit, which are directives that can be used to create your own custom components. For example, let's say you want to create a component that has a virtual scroll, or needs drag and drop functionality, you can use the ScrollingModule and DragDropModule from the Angular UI CDK.
NG-Zorro
The NG-Zorro UI framework uses the Ant Design system for its enterprise-ready component library. It contains over 60 components that have a great look though you can create your own custom themes for them. Companies such as ThoughtWorks and Alibaba use the NG-Zorro framework to create their web apps.
It contains components for buttons, icons, grid layouts, breadcrumbs, page headers, and many components for data entry such as the cascader and autocomplete and datepicker. If you need cards or badges or a carousel, the NG-Zorro UI components have those covered.
One of the coolest components in NG-Zorro include the timeline component. It displays a timeline of labels to indicate when an event happens. This component is useful for any app that needs to display a log of events.
The transfer component in NG-Zorro is useful for displaying two lists that an item can be transferred between. For example, a list of enabled currencies or files or folders.
The cascader component is a dropdown for selecting an item through a cascading menu. You can drill down in menus and sub-menus to select an item. Very handy if you have a lot of items or for an ecommerce categories and sub-categories menu.
Kendo UI
The Kendo UI component framework is a professional grade components library.
Not only does Kendo UI contain the typical UI widgets such as buttons and dropdowns and layouts, it also contains a variety of charts. When using most UI frameworks for Angular, you will need to use a separate chart library. Not so with Kendo UI which has pie charts, funnels, radar charts among other types of charts.
If you're into stock markets (or cryptocurrency markets), there's even a box plot candlestick chart that you can use. And a specific StockChart component.
Another cool component that Kendo UI has is the scheduler. This looks like a meeting or appointment calendar view that shows which blocks of time are busy.
Kendo UI can be purchased for additional support. This means bugs and questions you have will be prioritized by the Kendo UI team.
PrimeNG
The Captcha component is one of the more interesting components in the PrimeNG library. Sign up for reCaptcha, put in your site key in the component, and start using it. The CodeHighlighter component uses Prism.js for highlighting code blocks. The Terminal component is interesting because it shows a command line terminal for a user to enter commands; you can use the terminal service to listen for specific user commands and then act on them.
There are other useful components such as the Tree.
The OrderList is useful for ecommerce apps.
For theming, the PrimeNG framework has a few Bootstrap-style themes and Material-style themes.