Angular 2 Components The 27 Most Useful Examples Available
Angular 2 Components List
Developed by Google this component allows you to build a set of User Interface components that would follow material design specifications. It offers a great API solution that allows developer to work with ease, has a clean codebase and all the functions are documented. This component is upgrading, as Angular is getting more optimized and processed.
Enjoy working with Angular 2 while having Bootstrap directions at your disposal. This component is compatible with Bootstrap 3 and 4 and offers various directions you can use. Here are just some of them:
- alert boxes,
- progress bars,
- ratings widgets,
- tabs widgets,
The list will go on because Angular 2 is releasing new directions all the time.
This is one of the most popular chart libraries on the market. It is in use in almost every industry where there is a need for slick and interactive charts. It offers eight different chart types, each sharing a similar design as Angular 2, which makes them a perfect fit for each other. It currently ranks #1 on GitHub.
When it comes to drag and drop tools, Dragula gives you the opportunity to feel the full sense of freedom in design. It differs from usual components, as it is not meant only for layout. Dragula offers a possibility of moving actual content, which is great if you are designing a quiz or keyword search related applications. Dragula allows you to drag content to any direction so it is great for content review websites.
This is a small component with a great user interface that is easy to work with. It allows both multiple and single file uploads, as well as drag uploads. The user is able to watch the progress of the upload as well as determine to cancel or delete the file once the upload is over.
- Data validation
- Data binding
- Colum ordering
A simple component that has only one single function. It allows you to enable a based select box for your data.
If you are not satisfied with traditional HTML5 table of contents for your web page, this is the component for you. It has a grid layout and allows data filter to specific search queries. It has a native pagination and works great with mobile devices.
Simply put, this component allows you to transfer Angular 1 cookies to Angular 2.
Although this is still a work in progress, this component shows a lot of potential. It allows you to natively place Google maps widget in your app.
If you have a NG2 app that uses Bootstrap design, then this is an interesting component for you. It is a drop-down function and you can use it without jQuery. In addition, if you remove the class names, you can use it without Bootstrap.
Another Bootstrap 3 design component, this time: a progress bar. Also, does not require jQuery and if you remove class names, you do not even need Bootstrap.
A great solution for all your multi-context design. If you need to handle a simple design that requires a lot of explanation, tabs are the best option.
It uses Bootstrap 3 and it can easily become a standalone component. Modal windows aka popup boxes are a great way to give your design some life and engage the users.
Not much different from traditional pagination, this component will add some flexibility in your Angular 2 apps.
Fuel-UI is a component that works with both Angular 2 and Bootstrap 4, and provides components, directives and pipes. It gives front-end developers a lot of new UI patterns and libraries.
This is a large library of components for Angular 2. Each component offers a unique widget that you could implement in your project. These components include:
- input forms,
- data display,
- layout panels,
- layout overlay,
- content menus,
- data charts,
- drag and drop tools,
- custom themes,
- responsive design,
- progress bars,
- code highlighting,
- terminal tools
This JS library allows developers to structure a single page scrolling website. It practically allows you to turn your page into a slideshow. In addition, if you need to jump from one slide to another, there is a menu that allows you this.
Angular 2 Easy Table is a module for implementing tables into your apps, or websites. It comes if four configurations:
- no configured at all,
- table with search capabilities,
- table with pagination,
- table that can export data to an external CSV file.
The ng2-start kit focuses on a minimal setup app that has additional WebPack support. It saves your time when you need to create an app from scratch.
Features like responsive web design, high-quality display, SASS, jQuery, and integration of charts and maps libraries is what makes Angular 2 Admin one of the best templates now. Built with TypeScript, WebPack, and Bootstrap 4 framework, which makes a great user experience.
This is an easy to configure push notifications component. Push notifications are becoming a big thing and are yet to show their full potential. Having a component like this on your web page can make all the difference.
A simple component library that can add the necessary functions to enable your projects for JS forms.
If you are handling tens of thousands of images constantly, you might as well ensure that they become active only when user reaches that particular element. Lazy image loader allows you just that. It does not matter what type of app you are making, if you have many images, this is a great solution.
Excellent solution for all of you who are just learning Angular 2. This component is a playground that allows you to learn about Angular 2 and what it can do for you.
If you prefer Redux as your JavaSrcipt container then this component will allow you to integrate Redux support with Angular 2 apps.
The owner and PM of Techinfographics.com. Dimitar is young entrepreneur who is into technology and innovation. He is an investor and key figure into several other online projects. He travels and writes about technology and business.