15 Angular Component Libraries you Need to Know About

[Music] what's up Simon Diggs welcome back to a new tutorial witches today a bit different because we will simply talk about the 15 best angular component library packages that I have used or that I know about so this list is of course not a complete overview about the a landscape of these great components and also the aura is not really how great they are it's just my personal choice of tools so here we go number one for me is angular material because I wanted to start with the bigger pictures and angular material is more like a complete package that involves a lot of different things for example if you look at the components are you already see you got these form controls you got navigation elements you got layout elements especially things like a stepper so things that you usually don't really have in our libraries with ionic you already have some sort of material design for Android anyway but if you are working on a web version of your application or if you in general prefer the material design then I would give angular material a tribe besides the regular controls there are also other things inside the component def kit which you could check out I have written about parts of this especially the drag and drop but we will get to this later again as well so angular material a great choice for you a URI if you are more into bootstrap then number two would be for you I'm not sure which is the best package there is actually ng bootstrap and there's also ng X bootstrap from the github stars I would say that ng bootstrap is a bit ahead but I really can't see the difference between them so with this package either of them I guess you get access to bootstrap elements which are great in itself so I've used bootstrap for a lot of web applications in the past and perhaps we're also able to check out a demo this so they're native element and widgets and if you've used bootstrap in the past you know that this is just bootstrap right it's a simple UI you can't really go wrong with anything related to bootstrap I'm not sure if they implement also the the rows and columns stuff but I guess so anyway as well ng bootstrap a great example for you ayuh library there are more UI things like Prime and G I think I haven't used any other of them I have used ng bootstrap and I've used angular material in the path and for both I can say that they're really great choices if you plan to do a website with ionic again you usually already have styling out of the box so you don't have to use them but if you enjoy certain parts of their components they are definitely a great choice as well so ngx bootstrap or ng bootstrap whatever you want to use now let me close them so I can figure out where we are number three on the list of packages is a chart library they're actually I think a ton of chat libraries I there's 3d there's chat ge'ez and there are many more great alternatives I just picked two of them so ng two charts is definitely a great wrapper around the I think it's actually around ChaCha is yeah you have to install chat dais as well if you look at the samples you will immediately see you will immediately see is there yeah here are the samples so there's definitely everything included in either of these packages this is using chat Jes and if you check out ngx charts by swimlane you will see that they also have some great demos they are not only a wrapper around d3 they are a bit more so I've said this in the past as well just give these packages a try and figure out which chart package is the best for you they all look pretty great the configuration for all of them is a bit tricky you have to get into how you structure the data but then they are really great packages for charts with angular number four on the list is one of my favorite libraries it just had to be in this list it is angularfire angularfire is the wrapper around the firebase database or platform let's call it platform I think and with angularfire you can basically use firebase in a more angular friendly way so you get the observables but you also get a lot of other things that are perhaps a bit more tricky if you just used the firebase JavaScript SDK like authentication just recently angularfire introduced an authentication guard the upload to the storage is pretty easy and you just see from this list there's really everything included so if you plan to use firebase in one of your projects doesn't matter angular ionic I would definitely use angular fire as the wrapper in my project to get started number five on the list is a package for JSON web token authentication it basically always use this package when I work with some kind of authentication was broke because it is a quite simple package to install it works great with ionic as well so they already have some example on their page for ionic 2 plus on how to use ionic storage with that package to get and retrieve the JSON web token stored they got some nice helper functions like is the token expired or get token expire or expired 8 and DeCoteau so really just the basic functionalities that you need if you're working with JSON web token authentication then just go for the angular 2 JSON web token package then we got number 6 which is actually more like a tiny tool I would say but it can still make big difference at least this in the past it's called ngx loading bar and is basically something to automatically display a loading indicator you already see it no I guess it's from stick blitz plot there we got it can we do this I don't know how to make this slower but you can give it a try on this page and you see you can include these nice loading bars in your application and as far as I know you can also use angular material okay cool as far as I know you can also include this automatically whenever you make an HTTP request so that comes in really handy they got some core packages that you need to install and then also I can use these additional plugins to display when you're out or when you make HTTP calls the setup isn't too hard so I would definitely recommend if you need some sort of loading indicator and don't want to use the standard from either angular material or the ionic loading spinner then this really tiny ngx loading bar is great and works great in a lot of cases okay moving on to number seven on the list which is a tool to translate or localize your applications this is just like the really the standard that basically everyone is using also the header already says the internal - annihilation library for angular I've used this in the past it's really easy to set up you just have to configure your strings so if you already have a quite complex application it might require some time if you know your application will need this feature I would recommend you get started with this package in the beginning you can switch the languages on the fly you can instantly translate you can use pipes this package really brings everything to the table that you need to localize your applications for multiple languages another tool that kind of falls into this category as well is called NG X pipes this is not a specific pipe but a package that contains really a lot of useful pipes I don't know how many but I can scroll this list and it's quite long they are already some angular pipes out of the box but these pipes or the pig the pipes included in ngx pipes are really just great for building more complex applications the only thing is I have used this a few times but you really have to get into the flow of using this tool so if you just use it install it think it's great and never really use it it's not really helpful you have to dig through this at least a few times to see what is possible with this because I don't know that about each and every functionality of any each pipe all the time so it is really something to use many times and get into it I think then over time it becomes actually a lot more valuable now once you notice that you do certain parts of your application in code that could actually be handled by this simple pipes package a lot of examples maybe just give it a read once or twice and try to remember a few of them we'll get started to use a few of them I think then it can be really helpful package number 9 of course we need to talk about calendars calendars are very popular there's a full calendar I think that with jQuery there's also something from Prime and G I think a lot of care on the packages but for me the angular calendar package number one is still angular calendar if you check out the demo page you will really see that this is a powerful calendar that brings most of the things to the table that you need there are also draggable events I don't know how to drink this oh cool draggable events the demo for this is really great you can also somewhere change the view so you can have this great view or you can just have a day view you can edit it this is really my go to calendar package I would say if you have very specific requirements in the past I've seen people ask a lot of things about kelleners then you just might have to create your very own calendar which is definitely possible as well but in a lot of cases the angular calendar will have everything that you need to build a great calendar for your apps number 10 package number 10 is drag and drop I already said in the beginning once you go to angular material e component difficut there's also a drag and drop API so you can drag this stuff and I've used this also in one of my posts in the past if you don't want to use angular material the other great package in their domain is called drag Allah drag Allah is actually a standard JavaScript library I would say so dragon trap so simple it hurts but at the ng to drag a lot package is the wrapper for angular if you check out the demos you will see that this is really a great package to use it really brings everything that you need for drag and drop to the table normally I've used this as well in the past they made recent major words and shift as far as I know so the version 2 is being released follow the migration guide if you use this in the past make sure that you check out the latest one dragula is really a great choice for drag and drop if you don't want to use angular material I'm actually not sure which of these two would be easier to implement I think I would just go with drag Allah if I don't need the rest of the angular material stuff package number 11 is about presenting more data where is it there we go ng aches data table on this topic I also had a pair a post in the past on the ionic Academy where we've built this table you can also check it out a lot of stars as well like most of the other popular packages we've already seen in this video with ng X data table you can build these great data tables based on your API responses they also have a great documentation they also have a DAC theme they have a bootstrap theme you can get started by browsing through the documentation is simply going to the source which is a great way to see how they implemented a certain behavior really a lot of use cases for tables filtering sorting pagination everything is included in this package so if you want to present a lot of data go check out ng X data table now we're moving into package number 12 and we kind of leave the things I have used so basically everything that we've seen so far is used in one of my projects or at least for a tutorial the other three four remaining packages are things that I think are very valuable and also that I want to try out in the near future so number one is ngne mate this is a simple wrapper around any mate CSS and actually any mate CSS is something I have used in the past and I already thought that there might be a way to do these things somehow easier so mg any mate seems to be great angular wrapper which allow us to use the cool animation so if you haven't seen any mate CSS it's basically like these things and applying these in CSS to your elements so a lot of cool easy animations that you could use and now within G any made you could actually use them right inside the angular animations that you might have worked with in the past so I think that is really great you don't have to use any sort of dump changes and applying CSS classes and removing them here and there now with ng anyway you could easily use everything from code and I think I might actually write an article about this in the near future package number 13 is something I found highly interesting and with a lot of stars and it's called ng x formally and now that people who work with API responds and a lot of forms in their applications struggle a bit with the reactive forms and how to and setup everything properly so these seem to be as it says Jason powered or dynamic forms with angular it isn't actually an element that you can implement in your application so if you take a look at the code here let's see you got this formally element in a form and basically define all the fields for this form from code ones with a specific schematic or a specific schema for the form Liefeld config it might take a bit of time to get into this and I also from the first looks and reading a bit through the documentation didn't get completely how it works but given the fact that it's kind of popular or perhaps you already might know more about this and I guess in the 25,000 subscribers at least one person has used this package so perhaps you could say a few words about this and also if you're interested in this I might as well create a tutorial on this in the near future number 14 is a component I don't know why I haven't used it in the recent past and it's angular Google Maps whenever I use Google Maps I just go with the standard Google Maps JavaScript SDK and somehow implemented with a diff element and really ugly code and I actually don't know why I haven't used the angular Google Maps implementation yet I will definitely do it in the very near future the setup looks a lot more like how you expect Google Maps with angular is there a demo somewhere yes you can play with it or stick blitz so the code here if you use Google Maps in the past with angular you will see you got no typing so you got the markers the implementation for the HTML looks a lot nicer with all these effects in here so if you want to implement Google Maps in your application definitely check out angular Google Maps I will definitely use it as well in the near future and now the final package which is really something I have into and I say this like for a year now and that's an grx state management for angular with with react we've seen red ox and for angular business basically the package two years there are different other state management I think Akita is also one of them but ngrick is like the core and the the most used thing across state management if you hear state management you will definitely want to use this if you have small applications I feel like implementing all of this is a bit too much and you can have it in an easier way with just subject but if you have a complex application or you plan any kind of business application that's really huge you definitely want to use a state management like this and ng rx would be the recommended tool in my eyes this is also on my list so the last three or four elements are things that I definitely want to use and I know they are great as well so that's why I included them in this list that's it for the 15 angular components that I either enjoy recommend or laughs if you have things that I left out that you think that are really important please leave a comment below so we can kind of upload it or make it sticky so I can see it just leave your additions also if you want to see a tutorial on one of these 15 packages that we haven't done in the past please let me know I definitely want to do something on state management the formula looks great angular Google Maps just let me know and I will upload it on my personal to-do list so I can create more great tutorials for you in the future if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic within their courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ion Academy which is my code school to help you with everything I own egg with a huge library of courses material and a supportive select channel so we can get your app out I hope you enjoyed this video I will see you inside the next video have a great day and happy coding Simon [Music]

Channel: Simon Grimm

Views: 22,478

Keywords: ionic 4, ionic framework, ionic 4 tutorial, ionic 4 course, learn ionic, learn ionic 4, angular, ionic angular, ionic 4 angular, ionic guide, cross platform, hybrid app, ionic4, ionic 4 app, ionic for beginners, ionic 4 for beginners, ionic course, angular 7, angular 7 tutorial, ionic, cordova, javascript

Id: 3f8DjnByp5U

Length: 20min 17sec (1217 seconds)

Published: Tue Mar 24 2020