Ngx Bootstrap - Best Angular Components Library

in this video i want to show you a specific library for angular which is called ngx bootstrap and this is an amazing library with lots of predefined components that are difficult to implement [Music] and actually i'm not a huge fan of using libraries because then later you must update them sometimes they are not doing what intended and they have lots of code inside that you don't need and obviously it is easier to support your own code than the library but actually inside angular i used a lot ngx bootstrap and actually this is a really popular library which implements a lot of components that you need in every single project let's have a look as you can see here the official website of ngx bootstrap it doesn't have anything in common with bootstrap project or bootstrap team and here inside documentation we can see the list of components that we have and actually these are all components for angular but yes this library is using bootstrap as a dependency and actually all these components you will need in almost every project and the most popular here that i used a lot i first of all models you really need models everywhere pagination drop downs date picker tooltips and several others why it makes sense to use a library and not build all these components on our own actually if we are talking for example about tooltip or model because they are super similar this is a container that you want to render inside your component but actually you want to render typically inside body why inside body because actually if you will just trend it inside your component then you will have problems with css and overflow because it can be cutted by other components if we are rendering it inside root inside body then we won't have such problems and actually inside angular it is not that easy to implement ranging of the component inside body and you are getting this behavior out of the box together with all these components also these components are really nicely tested and they are working really stable so let's try to implement in our project several components and have a look how they are working and here i already prepared for us an empty angular application what we need to do here we must jump inside console and use yarn or npm to install this package and this is ngx bootstrap as you can see i don't have any errors here but you must be cautious if you have some older version of angular and you can check it inside package.json then you will get an error because ngx bootstrap is really tied to latest versions of angular which actually means at the moment of this video i must use version 14 in this case ngx bootstrap won't throw any error so our package is successfully installed now we must import some module from ngx bootstrap and for this i want to jump inside source app and here for example app module ts and the first module that i want to import here is tooltip module because this is the most popular package that you need everywhere so let's import here tooltip module dot for root and now here on the top we must import this tooltip module from ngx bootstrap slash tooltip and actually this is amazing because we are getting just a dependency of tooltip we're not getting the whole library inside and if you're wondering why we have here for root because actually it is possible in every single module of ngx bootstrap to provide some configuration if it is needed so our module is successfully injected now we can directly use it inside our appcomponent.html and for this i want to create just a button and here we can say that type is a button class is button and button primary and as you can see i'm using here directly bootstrap classes and after this we're setting here tooltip and actually this tooltip must be either a text or a reference student element which is a template let's start with just a tooltip for example here let's write full and close this button and now inside let's just write checking tooltip our basic code is completely ready but we forgot to import bootstrap inside our project and the easiest way to do it we can simply jump inside source index.html and here on the top we can provide a link to bootstrap css and as you see this is just a css no javascript here because javascript from the bootstrap is injected through the library itself so let's reload this page now and check if it's working as you can see here we have now css here is our checking tooltip and we see our foot tooltip directly on the top and this is just with a single liner of this directive tooltip and here are some important configurations for the tooltip first of all we want to set here a trigger because actually by default we have a hover and typically you want for example a click in this case here we can say triggers and this is just click which is a string now here after page reload we don't see a tooltip but if i am clicking on this button i can see a tooltip here on the top another important thing that we want is appending this tooltip directly to the body and leaving everything as it is and for this we can simply write here container equals body and this is just a string and after this i'm reloading the page and we can directly see tooltip like previously but now we won't have any problems with css or overflow hidden because as you can see here we have our tooltip and it was rendered not inside our component as you can see here it was rendered directly inside body right at the bottom so this tooltip is completely outside of our approved which is really safe if we are talking about tooltips or models and last thing about tooltips is obviously providing a template we don't always have just a string typically we will have a reference to our template this is why what we can do here we can create a tooltip and now here afterwards we can define ng template with this reference tooltip now here let's close this ng template and inside we can render whatever we need for example hello and here will be some property and actually this property can come directly from our component let's say here for example username full and now we want to render this username inside and it will work just out of the box so we are reloading the page here we see our tooltip on the click and we are rendering here tooltip and actually as you can see this was just a string because we forgot to put here brackets in this case here now it is a variable let's reload the page as you can see now we are getting hello full which means our property is successfully working and here we're using ng template just together with our button as you can see this library simplifies a lot implementation of tooltips but now let's look on models and models you also need in almost every single project so let's jump back inside our app module and here we must just write model module dot for root just like we did with tooltip module and here now we must import our model module from ngx bootstrap slash model so every single component is being imported from additional module now let's open our model and for this we can jump directly inside our html and here for example after our tooltip let's put some space in and render a button and here we will have button type button also class for example button and button primary and after this we have a click event and actually here we want to open our model and inside our openmodel function that we must define we are providing a reference to the template which actually means here we must close our button and this is for example open model and here on the bottom we're creating again ng template but this is the template for our model and actually here we can write for example hash model so it will be easier to understand now here i want to close ng template and now inside we must write a correct markup for our model just like we're doing inside bootstrap and actually i already prepared it first so i will just paste it here and if you want you can take the source code from the description box below so as you can see here we have two sections we have first of all div class header and after this div class body and actually here inside model body we simply render the content of our model we obviously can use all variables from our component and inside our header we have first of all h4 and secondly button for close and as you can see here we are getting model ref hide and actually model ref we will create in a second and inside here we just have a span to render this button so now let's bind everything correctly inside our ts file and actually let's jump inside that component and here we must inject inside our constructor our model service because this is exactly what we are using to open the model so here i have model service and this is bs model service and as you can see it is auto imported from ngx bootstrap slash model after this we must define our open model function and actually here we know that we are getting a template and this is a template ref but we don't know what template is this this is why here it is safe to use any and now inside this open model we must write this dot model ref so we're just assigning something inside our variable and here we're calling this model service show and we are providing our template inside which actually means we are calling the service of this model and we are providing our template inside and just to remind you here inside our function we provided a reference to model and what is model this is this ng template which actually means we are providing inside the show function and g template and actually as you can see here we must create this model ref so let's write it here on the top and this is with question mark because by default it is undefined and we are just setting it after opening a model and this is bs model ref so it is a reference to our model and as you can see here we're using this model ref after this on click which actually means we have a property inside our class and here we're using hide so after we are opening model we have a reference to this model and we can call different methods of it for example dot hide now let's check if it's working as you can see i don't have any errors let's open a browser and here i want to click an open model and as you can see now here is our backdrop we see our model it is correctly styled this adjusts styles from bootstrap and here we have first of all our headline here is our body and on the right we have our cross and we can simply hit on the cross and our model will be directly hidden because we are just calling this reference to the model to hide it and actually in the same way like with the tooltip models are directly rendered inside body so you won't have any problems with overlapping of different elements and the last component that i want to show you here is date range speaker or date picker these are really difficult components that are not that easy to implement on your own this is why it is so nice to get them from the library so first of all i want to jump outside inside our index.html because actually here we must add one more link and as you can see this is the css from ngx bootstrap just for datepicker which actually means we have additional styling only for this specific component now i will jump directly inside app app module ts and here we must register our date picker and it is called bs date picker module dot for root and we must register it here on the top so we are importing our bs date picker module from ngx bootstrap slash datepicker after this we can directly use it and for this i already can paste inside our code after hr for example the markup for our date picker and as you can see i pasted it quite a lot this is raw and then we have two columns inside and actually we are getting bootstrap out of the box so we have our rows and calls but here we are interested in this component as you can see here both of this component is an input and here we are applying bs date picker which is a directive and here on the bottom we're writing exactly the same but here is bs date range picker this is the main difference these are two different things one of this is just a single date picker and this is the trench picker and here we have bs value change which is an emit when we are changing it from inside so here we have on value change and we are getting here an event this is why we must create on value change function inside our component so let's just write here value any and actually you can later specify it but i just wrote here any because we are getting here both date picker and date range picker and here we are getting back void and i want just to console log what we are getting back and it is on value change and we're getting our value so let's check if it's working i will reload the page and we're getting here two date pickers first of all date picker we can click here and we're getting nicely styled date picker just like inside bootstrap and here we can jump between different years select a year then select a month then select some date and as you can see directly inside console we have this change event and we're getting this date back and exactly in the same way we are getting this date range picker but here we have a range between two different dates and it is working out of the box and we are getting a change event and in this case here we are getting an array with two dates and actually if you're interested to know how change detection is working inside angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 984

Keywords: ngx bootstrap

Id: MfMX3ofgDPo

Length: 14min 44sec (884 seconds)

Published: Thu Aug 25 2022