If Angular 2 captured your heart as well, you might be interested in grabbing any of the following Angular 2 components, built to support developers with basic and also advanced functionality that would reduce the time it takes to go from a prototype into a full production application. Since Angular 2 is still within the bounds of a release candidate, the adaptation is only going to grow, which will naturally make more Angular 2 components accessible, for now, we list the best of the best that have been published so far.
Material Design for Angular 2
Google is the official company behind Angular, so it would be ridiculous if they didn’t provide their design standard for Angular 2! So that’s what they’ve done, ported the material design onto Angular 2 components, ready to be used in your existing and future applications. The goal is to create a repository of material design user interface components that would honor the material design specification. All components have been globalized so that they can be used in any language or by any nationality, provide a straight on point API solution that makes developer work less frustrating, have been benchmark tested in common situations to ensure compatibility, has a clean codebase and well-documented functions so developers can enjoy the quality that Angular is known for. The component is gradually being improved as Angular 2 itself is getting more pampered, optimized, and processed.
Native Angular2 directives for Bootstrap
Angular 2 gives developers even more directives to work with, making it entertaining and enjoyable to bootstrap modern apps. If you’re enjoying developing with Angular 2 but still see yourself liking Bootstrap a lot, with the ng2-bootstrap library you can enjoy the directives on Angular with your favorite design scheme which comes from Bootstrap. At the moment Bootstrap 3 is fully supported, while Bootstrap 4 is partially supported because of a yet unreleased final revision. These directives range from accordions, alert boxes, buttons, carousels, dropdowns, modals, pagination, progress bars, ratings widgets, tabs widgets, tooltips, and more as Angular continues to release new directives.
Charts for Angular2 based on Chart.js
Chart.js is an HTML5 charts library that utilizes the full potential of the HTML5 Canvas element. It has been used by data scientists, health researchers, journalists, media companies and publishers who value interactive charts to provide interactive data to their audience. Chart.js has seen use in slideshows, business meetings, and is frequently implemented in web and mobile apps alike. It’s a top trending charting library on GitHub, and not a single article online that talks about charting libraries is going to go without mentioning Chart.js! Although limited (is it really?) to only eight chart types, each of the types is impeccably perfected to stand out from the crowd through a meaningful focus on the presented data. And Angular 2 is the perfect framework that can complement the full potential of Chart.js as both share similar design understandings, and put together you can achieve wonders.
Right now there’s huge growth happening for drag and drop tools, libraries and frameworks, though usually they fall under the web design layout category, or prototyping. We aren’t seeing THAT much of drag and drop functionality in the traditional design of a website, unless that website is particularly built for the purpose of giving user the access to rearranging the layout of their user interface. Dragula stands out as it can be used not only for layout, but also for actual content, this means that you could go as far as creating quiz related apps or keyword search related apps that would require of the user to align a particular set of data in the correct order, Dragula does support callbacks. Content review and content curation sites come to mind that could benefit from Dragula, as it enables to drag the content in every direction based on what the platform is providing.
Angular2 directives for files upload
File upload isn’t something you will consider right from the start of bootstrapping your app. At the very latest you’ll start thinking about file upload features when finalizing the user profile parts of your app, since that’s where users can upload their social photo. But, then there’s also the content part, and if you’re making an instant messaging function in-built; you’ll have to give users a way to send files over to each other. It’s something that people expect these days. Angular 2 File Upload is a great little component, beautifully designed and has an easy to work with interface. Supports multiple, single, and drag file uploads. Users (or you) can watch the progress of the file that’s being uploaded, and once it is done can take any necessary action like cancel or remove the file. For potential code issues you can refer to the GitHub library and open an issue there.
Native Angular2 directive for Handsontable
Native UI Select Angular2 component
ng2-select is a native user interface select component for your Angular 2 apps. There’s little to say as this is a single and straightforward function to enable a based select box for your data.
Simple table extension with sorting, filtering, paging
Valorkin has worked his butt of with some of these components we gotta tell you! So, Angular 2 Table — what is it? It’s pretty much what you’d think it is, a table solution for Angular 2 projects. It has a nice grid layout example provided, the results (data) can be filtered to specific search queries, and pagination is also native. You won’t get a table like this from using the traditional HTML5 table function, so there’s a lot to benefit from here. Works great with mobile design as well.
Implementation of Angular 1.x $cookies service to Angular 2
Lacking the Angular 1 cookie implementation in your Angular 2 apps? You’ll need to put this library to use, as it transports the 1 version of the cookies to version 2.
Angular 2 Directives for Google Maps
You’re working with a client for an Angular 2 app and he’s asking you to implement a Google Maps widget into the app itself, what do you do? Do you use the traditional approach of an iframe, or you utilize a library such as Angular 2 Google Maps to natively integrate maps into the apps? Unfortunately the library is in the Alpha version right now, so production use isn’t recommended, but keep an eye out for the release, or you could tinker with this yourself and come up with a stable version to use on your apps.
Angular 2 Dropdown using Bootstrap 3
Now for a little bit of Bootstrap design amplification to your apps. We’re kicking off with a traditional dropdown function for your NG2 apps that are using Bootstrap 3 design. You won’t require jQuery to make it work, and it’s possible to use it without Bootstrap if you remove the class names.
Angular 2 Progress Bar using Bootstrap 3
Next is a progress bar that also uses Bootstrap 3 design. Doesn’t involve jQuery and is easy to remove the Bootstrap design through class names, the progress control itself works as a native component.
Angular 2 Tabs Control using Bootstrap 3
Could be that you’re implementing a multi-context framework for your app, so tabs can come in handy, or you’re building a simple layout and need to explain a lot of info but don’t have the room, tabs help then too. Again same qualifications and rules apply as to previous libraries.
Modal Window for Angular 2 using Bootstrap 3
Modal windows (popup boxes) are handy little snippets that make your app come alive, gives you more flexibility to engage users as well, even if for delete confirmations or form submissions. Uses Bootstrap 3, and is easily detachable to be used standalone with your own custom design.
Pagination Control for Angular 2 Apps using Bootstrap 3
Without pagination you’re left with infinite scrolling, but judging from the results that many media sites have reported — it’s simply not worth it, and traditional pagination works just as good as it did always. ng2-pagination is to add some pagination flexibility for your Angular 2 apps. Supports Bootstrap 3, but can be used on its own.
Everything feels and looks better with fresh perspectives, and for front-end developers that means new and exciting UI patterns and libraries to use in their projects. Fuel-UI is a quickly growing UI components component that can be used with Angular 2 apps, or with Bootstrap 4 projects. Fuel-UI provides components, directives and pipes. Components like alert boxes, modal popups, infinite scrolling, tabs, tags, progress bars and sliders. Directives such as animations, code highlighting tools, content collapse and tooltips. And several pipes for more of the technical side of things.
PrimeNG is a prime components library for user interface designers that are learning to embrace Angular 2! PrimeNG focus on these unique components: input forms, buttons, data display, layout panels, layout overlay, content menus, data charts, messaging, multimedia, drag and drop tools, and misc tools like custom themes, responsive design, progress bars, code highlighting and terminal tools. Each component provides a unique widget that can be applied to your app, not only using PrimeNG will improve productivity and the rate of speed at which you develop, it will give you a solid foundation from which to develop any future apps. There’s very few things that PrimeNG aren’t providing, and anything else could be found either in this post, or on GitHub to finalize your idea.
Angular 2 Directive for Font Awesome Icons
Font Awesome continues to evolve and with each new version adds new font icons that will enrich your user interface by a ton of margin. The ng2-fontawesome directive is to help you implement native Font Awesome support in your Angular 2 app, terribly easy to use and plug for use. Font Awesome is one of the better choices amongst font icon packages because it’s lightweight, doesn’t require external or internal JS support, can be scaled infinitely because of vector graphics, is totally free to use on commercial and noncommercial projects, and totally integrates with other famous front-end frameworks.
fullPage.js Integration for Angular 2
Angular 2 Easy Table
Espeo Software is a group of professionals that help clients to turn their ideas into real and tangible projects, and when they find the time, they freely share with the Angular community some of their own libraries and ideas. One of which is the Angular 2 Easy Table — a very convenient module for implementing tables into your apps, or websites. Comes under four different configurations: no config at all, a table with search capabilities, table with pagination, and a table that can be used to export data to an external CSV file. Design isn’t bootstrapped at all, so you get the freedom to overcoat it with your own interface as you prefer.
Angular 2 Starter Pack with WebPack
Starting from scratch with creating an app template can be tough, in fact it is a practice that not so many developers use, because instead of doing all that hard work from scratch it is possible to use start kicks such as this one; the ng2-start kit focuses on a minimal setup app that has additional WebPack support. Convenient, time saving, and free.
Admin Panel Framework built with Angular 2, Bootstrap 4 & WebPack
Admin dashboard templates come from many different frameworks, many are built with Bootstrap, some are built native, and now there’s a crown jewel for the Angular 2 community as this Angular 2 Admin Dashboard Template trumps any expectations you might have had, about the design or usability of such a template. Built with TypeScript, WebPack, and Bootstrap 4 framework — the combination of user interface and user experience is unprecedented. With features like responsive web design, high-quality display, SASS, jQuery, and integration of charts and maps libraries is what makes Angular 2 Admin a stunning template to work with. The designed dashboard is something truly special, and perhaps goes a long way to show what the future of Bootstrap 4 websites are going to look like.
Angular 2 Push Notifications
Don’t be hesitant towards using push notifications (mobile and desktop), as more web users get acquainted with the concept, it’s going to become a somewhat of a trending feature for giving users real-time information about updates, and even content updates. If you’re using Angular 2 right now and haven’t settled for a good push notifications component, you might as well take this one. Easy to configure and works great.
Lazy image loader for Angular 2
Angular has big appeal to big projects that involve playing with visual content, the performance is already there, and certainly stability is as well, but regardless of what your app is going to be about, if you’re handling tens of thousands of images constantly, you might as well ensure that they’re only served to users once they’ve reached that particular element on the page. That’s how lazy loading works. Save some bandwidth for yourself, and your readers by only displaying visual content once it comes into the actual window of the browser.
Minimal Angular 2 Starting Pack with System.js Loader
If you haven’t practiced any Angular 2 yet, then grabbing this library will get you started in no time. It’s a playground / boilerplate library to give you the base of Angular 2 with the addition of System.js module support.
Angular 2 bindings for Redux