Angular Material Table - With Sorting and API Data

in this video you will learn how to implement angular material table inside your project [Music] not so long ago I made a video where we created a custom table inside angular and we implemented the sorting and filtering and it is completely fine to have a custom implementation but maybe you don't want to write it on your own and you want to use a library or maybe you just have lots of tables inside your application and you really need that library or maybe you want to reuse CSS from the library in this case it is much better to just pick a library the question is what library we must pick inside angular because we have lots of different libraries which Implement table and actually I highly recommend you to look on angular material while that because essentially this is a library for angular which is supported by angular team itself which actually means it will work 100 and it will be implemented in a scalable but maybe a little bit complex way and the goal of this video is to build a table by using angular material with typical features like Fetch and data from iPay and sorting as you can see here on the official website we will use matte table which means material table and this is the style it data table and it is important to understand this is a wrapper around cdk data table which actually means if you don't need any representational logic and CSS you don't need to use math table you can directly use cdk but actually it doesn't make any difference because this is simply a wrapper a round business logic which is inside cdk and this is important to remember because we must install not just one package but two we must install not only angular material but also angular cdk this is why our first step here will be to jump inside console and install yarn add angular material after this we want to install angular cdk so yarn add angular cdk but it is super important that you check the angular version inside your project as you can see here I have an angular version 14 I have cdk version 14 and material version 14. this is totally fine but if for example I have a project which has angular 12 then it simply won't work out of the box so we successfully installed our dependencies now let's create a new module and actually here I have a completely empty project and I don't have anything inside app component HTML so what we want to do we want to create a new module because we want to fully isolate our table inside that module and the idea is that we will render inside the list of our users this is why here I want to create users table and inside we need the file users table module TS now here we can register our engine module and at least we must provide inside as an import common module after this we must export our class which will be user stable module our next step will be to import this module inside our app module in this case we can render a component of users table inside our app component HTML so I'm jumping inside app module TS and here Insider Imports I am writing user stable module and actually there is an important Point as you can see here I have inside my imports browser animations module and here I imported it from angular animations by getting angular animations out of the box but actually to use angular material you must import inside your app module browser animations module this is why if you don't have this import just do it now now let's create our component so inside our users table we need a components folder and we need a new component which will be user stable maybe later we need more components but for now one component is enough so here we have our users table Dot component.ts and users table dot component Dot HTML so inside HTML I will simply write users table so we can check if it's working and inside TS file we must register our component and for example we can name our selector just users table and also we must provide here a template URL which will be our users table that we just created after this we must export our class so here we will have our users table component and now we must register it inside our module so let's jump back inside our users table module and here inside declarations we must provide our user stable component but also additionally we want to export it because we want to render it outside in our app component this is why here experts user table component and now we can jump directly in setup component HTML and try to render it here so we have our users table and we must close this element as you can see I don't have any errors so let's look in and browser here is our project and we see this single line users table which actually means we successfully created our module and binded component inside now let's write some markup to render table this is by here I want to jump inside our users table components component HTML and instead of this users table I want to write our table and what we want to write inside our table is a directive math table or material table and now the idea of angular material is that we are defining every single cell its type and its data this is why here we must create in G container and first of all we want to write here mod column Dev which means it is definition of our column and here inside we're providing first ID Yad because actually inside the API in localhost 3004 slash users I have an array of these users and in every single object we have ID name and age this is exactly the the data that we want to render inside our table this is why here we're defining our new column with the name ID and here we're closing our container now inside this container we want to Define our cell for headline this is why here will be th and we're defining mod header cell and also star mod header cell death which means cell definition and now I'm just closing th and writing ID inside which actually means we have a th where we're applying these directives from angular material and we're rendering inside ID so this is the headline cell for the First Column and after this stage we must Define ATD this is exactly what we will have inside our row so here is TD and we have here matte cell not met header cell but just cell and after this we have star mud cell definition and here what we can write is lead element and let element means that we're getting here access to the entity which actually means inside the first 2D we will have access to this object and we can read these properties inside otd so what we want to render here inside is at least element dot ID so as you can see we successfully defined our first column now we must copy it and Define two more columns because additional iterative we have our name and age so we can simply change here definition to name write here name on the headline and here will be element.name and the last one here will be H so here is age now we have H in the headline and the element dot h here so with that we simply defined our columns but now we want to render our roles this is why here first of all we're rendering a row for our headline this is right here table row and we have here matte header row directive and here net had a row definition and inside we must provide a list of our columns that we will render what I want to write here is displayed columns and now let's create this property displayed columns inside our TS file so what I want to write here is displayed columns and this is array of strings and here we can Define that we have an array with 80 name and date and this is exactly what we will render and the main idea is that we have these columns inside this property and angular material table will map properties from this array with these NG containers by this ID that we provided so we successfully defined our table Row for the headline now we must Define a table Row for our table this is where here table Row mod row and here we have material row definition and inside we are getting access first of all for the row property and secondly for all our columns so here our columns were provided guiding displayed columns inside and here I want just to close our TR let's check if it's working here we don't have any errors and I will jump to the browser and as you can see we don't see anything and actually we have an error cannot bind to matte header row definition since it is not a known property of TR and this is totally fine because we didn't inject material table inside our project this is why we must jump inside our user stable module and inside our Imports Ubuntu import material table and in order to do that we must write here material table module and now we want to import our material table module from angular material but not just angular material but slash table which actually means inside angular material every single module is packed in additional path this is why here we are writing slash table and we're getting just an input of the table let's check again if it's working I will overload the page and here actually it is working we are getting some warnings but we also see something on our screen first of all as you can see here I have two warnings and the first warning is that we can't find material Core theme and this is totally fine because we didn't bother to install it correctly but actually we won't use any CSS from material this is why it is totally fine to have this warning if you want to fix it later you can simply check the theming guide inside material and Goliath and the next warning is that I have mismatched versions between angular material which is 14 to 7 and angular cdk 13 to 6. again it is totally fine because this is just a page but if you have such warning you can simply update angular cdk to higher version to 14 to 7 but actually here you for sure want to say okay but where is our table we see just headlines and actually this is totally fine because we didn't provide any data inside our table and in order to do that we have such thing inside angular material which is called data source and actually here inside table met table we must Define a data source and this is an input of our material table and inside we must provide the data source property and actually it can be different the easiest way to define a data source would be just an array of object so here I just created an array and pasted all data from our backend which actually means we have completely static data inside this component this is just an array of our objects and now we're throwing this Ray this data source inside our data table let's check if it's working I will reload the page and here we have all this data rendered together with stable which actually means we already implemented super basic table from Material UI but actually these styles are not looking great so let's change it a little bit we can't just jump inside users table component and create here in your file users table dot component dot CSS and we just want to style it a little bit so here I want to create users table and inside I want to provide table layout and it will be fixed also width will be 100 and board a collapse will be collapsed after this I also want to style every single cell this is right here user stable cell and inside I want to provide a border one pixel solid and then this color also text line left and Pad in 8 pixels now we just need to use this classes inside our markup so first of all for our table we want to write a class users Table after this for every single th NTD we want to apply a class user stable cell so I will just write it in every single element and the last thing that we need to do is bind the CSS inside our TS file so here let's provide our style URLs and inside we're just injecting our users table component CSS let's check if it's working I will reload the page and now it is looking much better we have a normal full screen table with headline ID name and date and we see all our cells which are nicely predefined so now you know that we can provide inside data source just static data but obviously in the real project we normally I use an API and not static data which means we must know how to provide the data from our API inside our table and actually we can do it by creating our own data source but first of all here I want to create several things inside our users table I want to create types folder and Define here an interface for every single user because in this case it will be much easier to understand with what we're working so here we want to Define our user interface TS now inside let's export our interface and it will be user interface now we know that inside we have an ID which is a string after that we have a name it is also string and we have H which is a number so our interface is fully ready now we can create a service which will fetch data from our API so here let's create Services folder and inside we must create a user's service TS and this is just a service which will make HTTP request this is why here let's make an injectable service and the export a class which will be our user service now inside let's create a method which will be called Fetch users and we don't provide here anything and we must return here an observable of our interface which is user interface array in this case here this is just a stream that we can use later but in order to make a request we need here HTTP client this is right here inside the Constructor we must provide HTTP and get here HTTP client now inside our fetch users we can simply return this HTTP and we're making our get request to http localhost 3004 slash users but as you can see here we're getting an error that we're getting back an observable of object and not of user interface this is why here we must Define that we are getting back an array of our user interface and now this is totally fine so we successfully created our service but now what we want to create is custom data source which will use this service inside this is why here inside our services we can create a new file and it will be our data source this is why it is users dot data source.ts so it is not a service anymore this is a data source but actually it is still just a service underneath so here we need an engine predictable service and we want to export here our class which will be users data source and here we want to extend it from data source and as you can see this data source is coming from angular cdk Collections and inside we're providing that we want to work with user interface as you can see now we are getting an error our class users data source does not Implement method disconnect and we must implement it in order to have a correct data source and again here we have a connect method which we also must Implement which actually means our data source must have two methods and the disconnect and disconnect and actually every single data source is simply based on the streams and inside connectable must return a stream and inside disconnect we must close the stream this is why what we want to do we want to create here extreme users and it will be a behavior subject this is why here and you Behavior subject and inside we're providing our array of user interface which actually means by default this is a stream and we have here an empty array now later we can update this stream and put inside some data but now what we want to write we want to create a connect method and back we want to get an observable of our user interface rape which actually means an array of our users and here we just want to return our these users and actually this is a behavior subject but we want to get it as observable which actually means our connect method must return an observable and now angular table can use this stream and render correct data additionally we must provide here disconnect method and here we are returning void and we simply want to complete this stream this is why here these users complete so this is the complete basic implementation of custom data source but now we somehow need additionally to implement fetching of the users from our API which actually means here we want to load users and then put them inside the stream in order to do that we must create a new method for example load users and it will return for us white what we want to use here is our additional service this is right here inside the Constructor we want to inject our private service which is user service and it is named user service and now here inside our load users we can simply call this user service Dot and here we have fetch users method now we can simply subscribe and get back our users and after this update our stream this is by here we can simply write this users dot next and we just throw inside an array of users additionally to that it will be nice to have a loading indicator this is the way here let's copy paste this Behavior subject and just change it to is loading with dollar and it will be behave a subject of Boolean because our is loading inside the true or false and by default it is false now here in sideload users we can first of all set is sliding to true this is why here next true and then afterwards we can set it to false so here next false and additionally as you can see we're getting here an error Constructors for derived classes must contain super this is by Insider Constructor would want to call Super because we're extending from data source and this is actually our prepared data source that we can use inside our table but first of all we must jump inside our user stable module and register here our provider so here providers and we register here our user service and additionally users data source now let's jump back to our component so what we have inside our component is just plain data which was a data source now we want to remove it completely because now our data source must be a synchronous this is where here we can just create a data source and here we're just writing you users data source and this is just a class that we created and inside we must provide our dependency and as you can see this is user service this is why here we must create a Constructor and inject here user service so our user service will be user service now inside our users data source we're providing this user service and here now we successfully defined our data source of users data source but now we didn't use it yet we actually provided it inside our table and it is completely valid but we didn't trigger fetching of data this is why here I want to write implements on init and inside NG on it I want to fetch our data this is by here this dot data source Dot and as you can see we have several things first of all connect disconnect is loading users but also load users and this is exactly what we want to call here and this single line will just fetch an API and then fill data inside of a data source and then angular material table will use this data source to render data on the screen let's check if it's working I don't have any errors here let's reload our page and voila we still have this data inside our table but actually I can open network and you will see that this data are coming from the API so I'm reloading the page and here is our request localhost 3000 first left users and we're getting our array of users which actually means this is completely synchronous data which are coming from the API additionally to that we can use streams from our data source for example we can jump inside the users table and here on the top just before our table we can create a div with loading indicator so here let's write loading and before inside div I can just try it in GF condition and here directly data source stored and we have a sliding stream this is why here we must use a sync pipe but actually this is just some property from our service let's roll out the page and as you can see every single time when I reload the page for just a small moment here we can see a loading indicator so in the real API when you are getting data for some time you will see here spinner and the last thing that I want to show you is how to implement sorting inside angular material table and our first step will be to jump inside our user stable module and here we want to use one more module and actually here we don't need material table but we need material sort module and here it is coming not from the table but from Material sort now we must inject this module in our inputs so material sort module now we can use some additional directives inside our HTML so we want to jump here inside our HTML and what we want to write for our a table is material sort so actually after material table I will write material sort and in this case it is camel case also here we can provide material sword active and by default it will be ID which actually means we're sorting here by column ID and here we can also set material sort Direction and here we have ascending and actually here I made a typo it is material sort active and not action so here we're setting sort active this is our column and the reaction is what is default order and again these two properties are not mandatory but it is nice to have them now inside every single th we must apply additional directive so here it will be material sort header and now we must do exactly the same with every single th and we have three of them so here I wrote material sort header let's check if it's working but don't have any errors here let's reload the page and as you can see here with ID we already see an error which actually means it is already sorted in ascending order now we can click here and actually the error is going down so it is sorted descending but nothing changed here why is that because actually we never provided correct sorting to our API to refetch data accordingly now let's Implement that what we want to do here after materials or direction we can't just have any material sort change and every single time when we're changing sorting we will trigger this function for example sort users and we're providing inside dollar event but additionally here I want to set material sort disable clear and what does it do at all inside angular material table we have three different sortings we have ascending descending and none and typically you don't want to have this non-sorting because you just want to have ascending and descending so this option will will simply remove this non-sorting and now we will have just either ascending or descending now let's implement this sort user's method so inside our TS file we are create insert users and here we're getting sort and what is sort this is property sort from angular material sort and this is a void function and we must simply trigger Lord users this is why here this data source Lord users but we must provide inside sorting it doesn't make any sense to not provide sorting because we have default sorting or new certain this is right here inside engineered we also want to provide an object with active ID and here the reaction ascending and actually this format is exactly what we have inside sort we can open here sort and as you can see we have two properties active and direction this is exactly what I wrote here but now we must tune a little bit our load users function so so here we must say that we're getting our sorting and it is sorting and now we must provide this sorting inside fetch users function but as you can see our fetch users doesn't know anything regarding sort so we must implement it now so we can say here that we're getting sort and it is sold and now we must apply this sorting to our HTTP get and in order to do that we can simply create HTTP params so let's create property params here by using new HTTP params and inside we can simply create them and then apply some params by using set and inside set we first of all want to apply parram underscore sword and here we are just setting sort DOT active after this we're setting one more program and here we have underscore order and sort dot Direction and actually if you are wondering what is underscore sword and underscore order this is two parameters which exist inside the API that we are using in order to sort correctly our data now here after our URL inside get we can provide an object with programs inside let's check if it's working here we're getting an error data source Lord users active ID cannot find Name ID obviously here I forgot inside our engine you need to wrap ID as a string let's check again we don't have any errors but let's look inside Network and here as you can see on page reload we're providing inside always sort ID and draw the ascending and this is totally correct because we have such sorting now here I am clicking on the name and voila as you can see data were just sorted correctly because here we send a request with sort name and or the ascending and now our data are correctly sorted now we can click on the age and the bin refetched and rendered and actually if you are interested to know how to implement tables without any libraries inside the angular with sorting and filtering make sure to check this video also

Channel: Monsterlessons Academy

Views: 12,898

Keywords: angular material table

Id: itq4KHN8buM

Length: 28min 14sec (1694 seconds)

Published: Tue Dec 06 2022