Angular UI Frameworks

UI Frameworks

Responsive

Set of components + responsive layout system

Component Collections

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.

Mobile

  • ionic2 – Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything.
  • angular2-onsenui – Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Admin panel

Admin panels / dashboard

  • ng2-admin – Angular 2 admin dashboard framework.
Advertisements

Angular UI Components

UI Components

Overlay

Overlay / modal / alert / dialog / lightbox / popup

Notification

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).

Popover

Show a little dialog next to an element

Table

Table / Data Grid — Display (large) datasets

Tree

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

Menu / sidebar

Charts

  • ng2-charts – Beautiful charts for Angular2 based on Chart.js.
  • ngx-charts – Declarative Charting Framework for Angular2 and beyond.
  • angular2-highcharts – Highcharts for your Angular2 project.
  • ng2-nvd3 – Angular2 component for nvd3.

Map

Infinite Scroll

Parallax

Parallax effect while scrolling

Scrollbar

Replace the browser scrollbar with a custom one

Carousel

Carousel / touch slider / swiper

Sticky

Implementations similar to position: sticky

  • ng2-sticky – Angular2 “position: sticky” implementation as a directive.

Context Menu

  • angular2-contextmenu – A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.

Time

Display time / date / age

Audio / Video

  • videogular2 – The HTML5 video player for Angular 2.

SVG

  • ng-inline-svg – Angular 2+ directive for inserting an SVG file inline within an element.

Social Sharing

PDF

Miscellaneous

Form

Let the user create & edit data

Date Picker

Time Picker / Datetime Picker

Color Picker

Slider

Let the user choose a value from a given range

Select

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).

Autocomplete

Autosuggest / autocomplete / typeahead

Type Select

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.

Sortable List

Let the user define an order on a list

Masked Input

Rich Text Editor

File Upload

Autosize Input / Textarea

  • angular2-autosize – Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.

Calendar

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.

Image Editing

Image manipulation

Top 20 reasons to use Angular 2 with Typescript for Modern Web applications

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
7. The TypeScript compiler generates JavaScript that a human can read
8. The TypeScript code can be compiled into ES3, ES5, or ES6 versions of JavaScript
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