Set of components + responsive layout system
Set of components without layout system
- @angular/material – Official Material Design components for Angular.
- primeng – UI Components for Angular 2.
- ng-lightning – Native Angular 2 components & directives for Lightning Design System.
- angular2-mdl – Angular 2 components, directives and styles based on material design lite.
- fuel-ui – UI Components for use with Angular2 and Bootstrap4.
- igniteui-angular2 – Ignite UI directives for Angular 2.
- md2 – Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
- igniteui-js-blocks – Mobile-first Angular native components.
- devextreme-angular – Angular 2 UI and visualization components based on DevExtreme widgets.
- ionic2 – Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything.
Admin panels / dashboard
- ng2-admin – Angular 2 admin dashboard framework.
Layout for the overall / main view
Overlay / modal / alert / dialog / lightbox / popup
Toaster / snackbar — Notify the user with a modeless temporary little popup
- angular2-toaster – Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library.
- ng2-toasty – Angular2 Toasty component shows growl-style alerts and messages for your app.
- ng2-notifications – Angular 2 Component for Native Push Notifications.
- ngx-toastr – Angular 2 toastr.
- @ngrx/notify – Web Notifications Powered by RxJS for Angular.
- angular2-notifications – A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
- angular-notifier – A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
- ng2-toastr – Bootstrap style toast for modern angular (v2.0.0 and above).
Show a little dialog next to an element
Table / Data Grid — Display (large) datasets
Visualize data as a tree
- angular2-tree-component – A simple yet powerful tree component for Angular2.
- ng2-tree – Angular2 component for visualizing data that can be naturally represented as a tree.
Loading / Progress Indicators
Let the user know that something is being loaded
Menu / sidebar
Parallax effect while scrolling
Replace the browser scrollbar with a custom one
Carousel / touch slider / swiper
Implementations similar to position: sticky
- ng2-sticky – Angular2 “position: sticky” implementation as a directive.
Display time / date / age
Audio / Video
- ng-inline-svg – Angular 2+ directive for inserting an SVG file inline within an element.
Let the user create & edit data
Time Picker / Datetime Picker
Let the user choose a value from a given range
Let the user choose from a list of options
- ng2-select – Angular2 based replacement for select boxes.
- angular2-select – A native angular 2 select component (based on select2).
Autosuggest / autocomplete / typeahead
Let the user select a tag / something while typing
Drag and Drop
- ng2-dragula – Simple drag and drop with dragula.
- ng2-dnd – Angular 2 Drag-and-Drop without dependencies.
- ng2-drag-drop – Angular 2 Drag & Drop based on HTML5 with no external dependencies.
Let the user define an order on a list
Rich Text Editor
Autosize Input / Textarea
- angular2-autosize – Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
Show & edit events in a calendar view
- angular2-calendar – A flexible calendar component for angular 2.0+ that can display events on a month, week or day view.
Here are the Top 20 reasons to use Angular 2 with Typescript for Modern Web applications
1. The tooling support is as good as on Java or .Net platforms
2. TypeScipt Code Analyzer warns you about the errors as you type
3. Using TypeScript classes and interfaces makes the code more concise and easy to read and write
4. Clean separation between the code that renders UI and the code that implements application logic
5. The UI doesn’t have to be rendered in HTML, and there are already products supporting native UI rendering for iOS and Android
6. Angular 2 offers a simple mechanism for modularizing application with support of lazy loading of modules
9. The router supports complex navigation scenarios in a single-page applications
10. Dependency injection give you a clean way to implement loose coupling between components and services
11. Binding and events allows you to create reusable and loosely coupled components
12. Each component goes through a well defined lifecycle, and hooks for intercepting important component events are available for application developers
13. Automatic (and fast) change detection mechanism spares you from the need to manually force UI updates while giving you a way to fine-tune this process
14. Angular 2 includes the Rx.js library, which allows you to arrange a subscription-based processing of asynchronous data
15. Support of forms and custom validation is well designed
16. Unit and functional testing are well supported and you can integrate tests into your building process
17. The bundling and optimization of the code with Webpack (and its multiple plugins) makes the size of deployed application small
18. An ability to pre-compile the code eliminates the need to package Angular compiler (not to be confused with TypeScript compiler) with your app, which further minimizes the overhead of the framework
19. The library of the modern-looking UI components (Angular Material 2) is in the works
20. The scaffolding and deployment tool (Angular CLI) is in the works, and it will spare developers from writing the boilerplate code and configuration scripts