Ultimate Guide to Angular Material | BPB Online | Skillshare

Ultimate Guide to Angular Material

BPB Online, Asia's Largest Publisher of Tech Books

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
39 Lessons (3h 3m)
    • 1. 1. Angular Material- Introduction

    • 2. 2. Setup and Installation

    • 3. 3. Adding Angular Material to Angular Application

    • 4. 4. Basic Introduction about environment about Angular Material

    • 5. 5. Using first component with Angular application

    • 6. 6. Button component in details

    • 7. 7. Working with input box

    • 8. 8. Working form field properties like matSuffix and matPreffix also showing them how to manage the m

    • 9. 9. Working with form filed properties like matHint and matErrors

    • 10. 10. Demo of Auto complete box

    • 11. 11. Setup guide for node.js

    • 12. 12. Nodejs dbconnection

    • 13. 13. Nodejs Model file for country

    • 14. 14. Nodejs Routing file for country

    • 15. 15. Making adjustment to app.js

    • 16. 16. Node.js Summary

    • 17. 17. Creating Service in Angular for fetch REST API

    • 18. 18. Autocompletebox with Live Data

    • 19. 19. Basic Data Table

    • 20. 20. Data Table Continues

    • 21. 21. Data Table with Filtering

    • 22. 22. Data Table with Pagination

    • 23. 23. Data Table with Sorting

    • 24. 24. Data Table with Expandable Row Introduction

    • 25. 25. Data Table with Expandable Row Implementation

    • 26. 26. Working with Card Layout with Live Data(HTTP)

    • 27. 27. Demo of Grid Layout

    • 28. 28. List Layout with Static Data

    • 29. 29. List Layout with Live Data

    • 30. 30. Tab Layout Demo Basics

    • 31. 31. Deep dive with tab layout with dynamic data

    • 32. 32. Sidebar Navigation & Routing Part I

    • 33. 33. Sidebar Navigation & Routing Part II

    • 34. 34. Creating Dashboard Component

    • 35. 35. Introduction to CDK (Component Development Kit)

    • 36. 36. Font Dialog Using CDK

    • 37. 37. Upgrading Existing application to angular 7.x.

    • 38. 38. DragnDrop Demo List with Static Data

    • 39. 39. DragnDrop Demo List with Dynamic Data


About This Class

There is no doubt Angular is an amazing Javascript framework with which we can create great web applications. And there are also lots of courses available that dive deeply to Angular Concepts, but indeed there is no as such course which focuses on Google’s Material Design. I mean if you are using Angular for your application which itself is a JavaScript framework and in the same application you might be using jquery or other JavaScript framework, it is not making any sense if we are using another JavaScript inside the JavaScript Framework. So primarily this course will focus only Google’s Material Design and create demos for a different component which is obviously built on Angular. I will assure you after having this course you can create an app which looks awesome and which is extremely fast in performance.


1. 1. Angular Material- Introduction: Hello, everyone. I welcome you all aboard on this course off angular material on behalf off BPB Online. I am Gensia, your trainer and instructor for this course. In this course, we've been learning about angular material. So what Actual annual material ease angular material is a library which is offered by and you, like team give user a mobile like experience on a bet the men concerned or the main design is built on the Google's material design principles and all the components off annual of material itself is built on angular. In this course, we will going to see all the components in action one by one, we will create this type off entire demo. Like we will see, the dashboard will create the dashboard using the angular CLI will create some music buttons when imports and floating label inputs This password box on a complete data table Not this data table will fetch the records from STT piece. So in order to fetch records from the race tp I we will create our own rest a pia using nor gs. So in this course you will also going to learn Norges basics off nor jazz and my Austria again. You will be using this data table into the details. Did a table with the filter whatever you right over here, that will be filtered in the there are table. Then you will see the data table with pagination their table with expandable rose and many more them. You will also see a godly out that will be very useful in a lab and mobile application. You will also learn terribly out how to create the layouts. Runtime. How to remove the tabs than time as well as you will clear are your custom component. This is most important, Siri Key component development kid. So you will be the outer off your own company. You are going to create your custom component. I am very much excited to welcome you on board again. That's die with the course. 2. 2. Setup and Installation: in this lecture, I will show you the requirements for using angular material to your local machine. First, you will require an I. D. In my case, I will be using visual studio cord as my i D. Because visual story accord is an open source and lightweight framework so you can never get toe court dot visual studio dot com and download this idee, and you are Phil free. You are free to use any I d off your choice. Second thing, as you all might aware, you will require angular cli to create an angular application. You can simply install Annular Seelye where I think this come on and PM Install high fungi at the rate angular is you lie to your command from I have already installed angular this year. Lie my local machine, so I will not required to do this step again. If you have already installed see light, you can simply create the angular application using Angeles your life. The next step is to create annular application, using the Angelus your life. Sure, ill write N g nu and the name of the application you want to create, so I'll name it toe n g material them not. This will create a new application. Angular application using anglers here like not this takes some time. I will be back while it is done. So yes, we have installed are we have created our first angular application using see light. In the next lecture, I will show you how we can integrate angular material to our angular application. 3. 3. Adding Angular Material to Angular Application: in the previous lecture, I told you how to create the application using angular see like now, in this lecture, I will be implementing toe angular material in our angular application. To do so, please open our visit material Daughter Annular Dart, Ill. Never get to guide step then click on getting started. Then here we have second alternative If you are using angular development kit, which is higher than six words in In our case, we are using Angular Seelye, which is angular. Six. Some. In that case, we need to write only N g A at Aniela material. Come on. So I copied this. Come on from the getting started tab, and I'll paste it on my command from Do not forget to navigate to the folder in for the application name. Here. I'll be writing NGL at angular slash material. Now it will install all the dependencies for the angular material. It will take some time so I'll be back while it is done. Sharon. It has updated few off our files like it has updated packaged or Jason file. It has a bit angular, Dark Jason. It has update app dot mortal dot es file. It also updated in next dollar TML as well as style. Lord CSS, I'm ensure you What is it? Has updated one by one in the next lecture. 4. 4. Basic Introduction about environment about Angular Material: In the previous lecture, we installed angular material in our existing angular application. It has updated some off the files. You never angular application. We will see all the updates, which it has updated in our annular application one by one, starting with Packaged or Jason. So I'll navigate to my application and open a packet star Jason. It has return angular Sirikit and angular material to the dependency than second Phillies. Angular dot Jason Fight. It has added a link for the style shoot. For your information. Angular material comes with pre built teams, so it has can figure online. Number 27. It has configured my angular application with inbuilt Rebuild. The Thing, which comes with an angular material and the name off The team is in legal pink dot CS. If you want toe, assign a different thing than this default one. You can do it by simply navigating toe, nor more deals inside nor models. Do you have a folder at Angular Inside at Annular, the directory is name material, and inside Medea we have the directory with the name Off rebuilt Tim's that pre built Tim's has a four different options. We can select any off this by simply referencing it toe annular Dargis and file. Even we can create other custom team even see how we can create the custom tens as the course progress. Then the next file with which it is updated his index. Not at Gmail. So toe open up in next door. That's TML. I'll never get inside the source directory Inside the source directory that is a file index dot html online number four and five. It has added two links when it's for material Aikens on the other one is the Robert off one . Then again, it had made changes to the APP Dart model file, and it has important browser animation model to my APP model. So this are the fewer just rent, which angular material has done for us in the case. If you are not using angular cli six, then we have to follow each and every step which is provided getting started Ted manually like, say, for example, the how to install this NPM install minus minus sale at angular material and at Aniela Siddiqui, our own, then as a next step V how toe configure Abdareh model, which Angula material has already done for us in the case. If we are not using Angular Seelye six, we have to do it manually. So in the case, which is not order, which is the lesser wasn't an annular Seelye. Six, you have to follow each and every step manually. In the next lecture, we even see how we can integrate our first component. That is a burden component to our angular application. 5. 5. Using first component with Angular application: So now, with everything installed, we are ready to use first angular materials component with our angular application to do so . I'll be never getting to this component tab, and I'll select a very basic component, and that is a button component. We can integrate this button with the ripple effect to our annual application. For that, follow the angular materials documentation. Click on this source. Burton. Then you will have its HTML. It's typescript as well as its CSS. If there is any CS is, it has used. So to integrate this burden, I'll be copy and pissed this ATS Tiemann to my angular application. As you all might be aware, annular application will come with the very basic component is app dot company dot html. So I'll just copy and paste this HTML to my APP components. X TML here. As you can see, it's look like a normal Burton, but it has a mad Burton attribute, which comes with annular material. Then it has another property, and the name of the property is a color. Yet I have said the color property toe the primary. Now we have three different options. We can set the value off color to accent, primary or warning by default for the team, which we are using. It gives us a three options. So now if we go ahead and say this application and run it in our browser, we can see the butter. For your information to run this application, I will be using Integrated Terminal, which comes with my i d to run this application. I already right Engy. So So now if I'll never get to my browser, we can see the butter. But it is not look like it does not look like the how it should be look like. And if we see the consul, it is also north suing us. Any added, Remember one important point before using any component off angular material. We need toe a lock that particular component from at annular material toe a love this Matt , but and more do I'll be navigating toe my model fight so I'll be navigating toe Apple tart model dot ps file And I have to import one package from at angular material, so I'll be importing the package from our Daniela material and the name of the packages. Mad button, More dill again. I need to import the same package inside the imports area. So again, I will be writing Matt Button model inside the imports area then and only then I will be able to use this, but and morning. So now if I say this again and run this application on my browser, we can see the button into the action. We can use button in a variously as we can navigate toe this documentation, we can see this many option within button component. We can use Burton with various defect, flat effect I can effect and the fab effect. So we will see this all different type off buttons or we will die in details with the buttons in the next lecture. 6. 6. Button component in details: in a previous lecture, I told you how we can create or in big Green button Cam Boland with angular application. In this lecture, we will be diving deeper with the burden component. So in this lecture we will see other option or other examples how we can create a different type off. But so we will be navigating toe angular materials, official documentation. And then we can go toe that example tab, where we can find a different option with the button we have raised. Wooden stroke Burton Flat Burton. I can burn fat buttons so even see all the burdens in action one by one. So say, for example, if you want to create a button like this raced border, then on your xdm ill, you have to just change this. Attribute Matt Button to Matt raised. But so here I'll change it. Mad raised, but And if I see of this in relented on my browser, then it will be look like a racist. But now say, for example, if we want to create a stroke button, then again on our X TML. What we have to do is on just duplicating this burden. Before that, I just insert one new line or you can say brake light. Then I'm duplicating this word and over here then instead off raised. I have to use this stroke, but so now if I go and seal on renders application again, it should be like a stroke. But see, for example, if you want to create and I can Burton, then you can create it simply by using the mad I can pack. So in this example, I will be using the button time inside that button that I will be using that Matt I content . So here, Matt Aiken and now here in Matt Aiken Tag. I have to specify the I can name, which I want to basically. So for the name off the icon or the list off the Aikens will yourself about, Marty likens, then you will be fined the material designs Aikens. And here from the list off the Aikens, I'll be using this air. Aiken. So on my it's demon, I would be seeing the name off. Daikon is now. If I see what this application and run it on my browser and if I open up my console good to ensure us and Adam and that arteries met ICANN is not unknown element. Remember, in a previous lecture I told you before, using any annular element you must need toe a love This Matt, I can doesn't come with the button. It really so in order to use this man, I can never application. We need toe on love this man I can from at Angela material, So I'll be navigating toe abd are mortal dot ps fight so on my abdomen modeled RTs file I need to unlock that mad I can model. So here I'll be importing that Matt Aiken, Morgan and the same Matt Aiken more. Do I need to also import inside the imports? Added cider. My important matter I can model from Ad Angula Marty Deal And I have to use the attributes instead off this matter. Raise Burton. I need to use that mad I can. But now, if I see all this application and running on my browser, you can see the I can with the plus side. All right. And if you want to create a callback or a click event for any button, you can create a simple click event for like what you are doing in angular application. This impacts for creating the event, or you can say a matter binding is around bracket inside their own brackets. I can use any event, so I'm using Click event and for for that click even I'll be writing one callback handler. So I'll be seeing on Click. So on my typescript I have toe right this function. So on my APP component, RTs filed. I'll just copy and paste dysfunction and I will be writing console dog law and saying, Excuse me, console Dark Law and I'm seeing Hello would. So now if we seal this application and again read on it on our browser, and if I press this button, you can see how the world is printed over there. It is just a normal, angular application. It has nothing to do with angular material. In Next Lecture revealed I deeper with input box. How we can use that include control with the floating label in our angular application 7. 7. Working with input box: in this lecture, we will integrated the input box with other angular application. Then put box is floating eyes comes with the floating label to implement this input box. In other angular application, we will be writing some court in our ex Demon beach. So I will be writing opening up ab dot component dot at Gmail. Inside this I will be using man form filled. Not this Matt from food has one more attribute on that is input and that in what has an attribute math and we can use a placeholder also. So here I will be using placeholder with the backs and your name. So now if we saved this application and run it on our browser vegan, see, an error that is showing Matt from Phil is not unknown Element. Got it. As I told you before, before using any angular materials component, we need to unlock it from at annular material. So we have one love this Matt form full model and matting food model from at angular material. So I never get to my app dot Mortal Dark? Yes, Well, inside that abdareh mortal dot Yes, friend, I need to import bought the package is the first practice name is Matt. Form filled Morning on the other one is known as Matt Input Morning. So I will first import Matt form. Feel mortal. It's well right, Matt? Form filled more do as well as mad in port morning again I need toe import both of the mortals inside imports areas right, Right again Mad form filled model on also mad In what more do? All right now if I see all this application in real, even our browser we can see working input box as we have seen or annular materials website . So now if I click here, it will be the floating label. No, if you can see this app more do has s o many imports regarding the material morning and as the course progress we will be importing more and more material models toe the app model file and it will be difficult to handle this material Icons are this material model inside the ab model fight so to manage getting easier. Easiest way I will be separating this material model import into a different model Fire. It will be only for the management purpose are or you can say it will be only for the you know it will be only for the like, making your task easy to manage this material imports. So what I'll do? I'll create one more model file. Like inside the APP directory. I limit toe material. Dark mordor dot ds on this mortal file will be the same as after morning. So the first import one core package on I'll name it Toe Limit toe Act angular, Cool and I'll import and Jim Ordeal. Then I can use this engine mortal decorator at N G. More do again. This engine model required one class alright, export glass and the name of the class is one can write anything. So I will be writing Marty Viel More do in this engine model shoot contents to wear it when his imports at it and the other one is exports. And now what I do. I just removed everything related to material from AP More do, and I'll based those things inside the material morning. So to make it visible, I just expanded within the line. So I have imported button model. I can model, form filled mortal and input more, and also I removed this imports from the imports at it and I will import those import inside the material Mordor. And also we need to import those more dues into exports at it. Also. Now, our material morning is creative short that we only need to import that material Morning Two of that act more so here we can write in what? As a statement and I can see it go and import material more do so. Here I will be writing material more and also I need to import this murderer mortal inside the imports area. Some now inside ever have more Do we need to import only one import and that is material morning. So it will be easier to manage all the imports off the material Morning. In simple word we can see we need to write each and every import regarding to material angular material inside the material Mortal only. All right, so now if I see this application and read and write on browser, doubted will be the same vm separate there, that mortal file just to make an easy to manage all the imports, we even see the input box into the details in the next lecture 8. 8. Working form field properties like matSuffix and matPreffix also showing them how to manage the m: in this lecture will be diving deeper with form full control. And this form Phil has a various attributes like, say, for example, one of the attribute is prefix and suffix. With the help of this attribute, we can create input box like this for the past four books, we can have the password I can. At the end of the input walks for the currency walks, we can have the currencies involved at the beginning off the input box and many more. So this from Phil has ah, various attributes. We will be using this prefix and suffix in this example. Also in this example, we will see how we can run time. Change that I can say. For example, if you want this visibility toe turn off, then the ICANN will be changed. Renting and the behavior off this and put box will be converted to the textbooks. And if I turn on the visibility again, then it will be converted to the password box. So even see this introduction. Just know in the previous lecture, we have already important Matt form filled in orderto in orderto integrate the input box. In this lecture, we do not need to import anything else from the Daniela material. So I'll be using Matt form Phil within that Matt from Philly. I'll be using one input box and, uh, that in football's as a tribute off Matt input. All right, on then, a placeholder I'll be seeing and your boss would within the same made form fill. I will be using Matt Aiken. So here I will be using mad I can, and on that matter I can. I'll be applying visibility. I could, as I told in the previous session. This is the name off die can you want to display for the list off Vikings? You have to navigate toe the material Aiken website. So if I now see this application and run it on my browser, you can see a normal passport box should be there. But it is showing the same oil, right? Beginning off the input box. I want this. I can be display at the act off at the end off the input box. So again, if I never get toe this Matt Aiken and apply one attribute Matt suffix. And now if I save this application and relearn it on my browser again, you can see this password box will be at the end of the input box. All it now I want to change this. I can rent them like as I As I say we help suffix and prefix. So if I apply instead off the suffix if I have fly mad prefix property and run this application that I can should be in the front off, then walks right. So now back to our example it will be using mad suffix. And as I said, I want to change this. I can rent, sir to do so. I'll be creating one more variable on my typescript finds I'll never get toe app dot component Dark years and they're all create one variable name it to flag and it should be type off Boolean and I'll sign it by default A true value. Well right now again back on my ATS TML yet I'm seeing go and applied the I can if the flag is true So here I'm seeing If the flag is true Guerra plight the visibility icon And if the flag is false then you should apply visibility off I can so here I'll be seeing on the square off, and now I'll be creating event for that. I can't. So here. All right, Click and what I'll do. I'll set of one called I Can set of on call back Handler. What even I can write court itself here. So what? I would write, I'll write flag a sign flag the in worst off its value. Shame saying flag is equals to immerse off flag. And now, if I hit us, I run this application again. You can see the ICANN will be changing random, but as you can see, it's like a normal textbooks. Now I want to said, Do the password box and I want to do this Changes to take place, renting. So here I'll said the property off this input box or you can say a type property, and I want to set this type property renting or dynamically. Then we are using one more property off. Angular is a property biting, so I'll set the type inside the square brackets and again here I'm seeing. Okay, apply the type toe the text. If the flag is true on, apply the type toe the password. If a flag is false or vice versa, so here. I'm seeing Flag is true. Then apply eight of property off a password. And if the flag is false, apply the property next. So now if I say this and really it on my browser, you can see it will be a password box. And now if I click this, it will become what they to the textbooks. This is how we can apply. Or we can set the type off the textbooks grunting or the input box rental. In the next lecture, we will be working more deeper with the mat form full property with the validations, how we can, how we can split errors, how we can despite the hands and many more. 9. 9. Working with form filed properties like matHint and matErrors: in this lecture, we even see two more attribute off a form full control. So form Phil has Matt Hint and Matt Error attributes. Matt Hint will be used to display any messages before user a curious Submit anything and mad at her will be used, you know, toe display where after users submit anything so we will be using both him and Arab properties offer a form fill in this lecture. In orderto use matting and mad Arab attributes, I have created a normal sign of form in this sign of form. I have ah, used when input box, part the email and well input box for the password. As you can see, it's like a normal xdm in In the previous session, we have already used this mad form filled little input, and this Matt form filled is type off password. All right, so now I'll be using engine model or two were banding toe get the are to detect the latest value off this input boxes, and also I'll be using validations that comes with an angular, For example, I'll be using require full validator for the input box and email validator for this email in the same way for the past. What I'll be using Max Lent and require validators In order to use and immoral, we need toe import for models to over app door model dot ps five trial first import as a statement and here I would see at and Euler forms and here, all seeing forms more do. And also I need toe import that forms model inside the imports area shall be using forms mortal so that I can use that engine model in my approach. So now I'll be using that engine model. So here are rewriting and immortal. And then I'll be seeing name property off this password, too. Boss work, and I'll create a reference for it. Like see, for example, password and I last sign it. And then you off Angie morning the same thing I'll create for the email to get the latest value or to detect the changes which use a religion run. So here are all saying name toe email, and I'll create a reference to email. All right? No. And I'll expand it within the line toe. Make visible to you. This possible box would be applying one validation, and I'm seeing it toe require. So now if I save this and run the application on my browser, if you can see it has already a marker but required. And when I click this and again, I'll do not write anything and click out. You can see this in football's will turn automatically to red in color. So it is not just a CSS angular material is more than a C assis. Now I want to use that Matt Hint property on this input box. So here, within this Matt form, filled only I'll be using Matt Hint. This hint can be said into is truly would Davis first year and said only it sciatic first. So now if I read in this, you can see only it characters, and you can said the same him property by using that hinge label property. So here L seeing Hint label and I left sign the same him message to death. Also, we can combine Matt Hint and hinted label together. So here I'll be seeing him label toe only eight characters, and in this mad him, I want to display the number off characters user type. So here I will be seeing Kit and here, I'll apply one more Validated says Max Land equals to it. So he announcing it. And I want to display the land off the characters User enter. So here I will be seeing Remember, I already created the reference for the bastard waas. So here I'm seeing boss work Dark value dot So now if I'd see this and return it on my browser, you can see boarded the hints out there only eight characters and are not type anything toe this password box It is seeing zero off it, but it's not looking prettier So I want to align this hint at the end of the input box. So what I can do is here on this matter and I can set a line property and, uh, a line on I can set it to end. So now finally, if I run this application again Oh, it's a diaper. So here on way typescript mistaken Dispelling is wrong. So Alker jeans so that we can like me. Correct this the spelling off line. And now I find in this again you can see this will be a dead. And now if I type anything, it will also update the value here. This is how he can be useful. No, I also want Toe said some validations for email. So here on my email again expanded within a line so you can you can see it properly. Yell again. I'll be using required validator, which is in build with an angular, and here are using email validation. Now I want to basically at her message with this email filled. So here I am using Matt Adams and I'm seeing e mail is required. And not if I see this and run my application. And if I click on this email and do not write anything and click out, it will display. They had a message. Email is required. But now if I tried anything and again if I click out, it also displayed the same message. I want this split both Adam Message differently. See, for example, if it is the require flatter, it should display email is required. And if it isn't it is an adder written for invalid email format. It should be under that Adam message to do so. I copied this math at it again, and here I'm seeing E mail is in value now I want to be split this ADDers conditionally. So here I can use the reference I created e mail. So here, all right, and you and I write email. Dark has errors and I'll jack for the required at her. And again, I'll copy it this ngf on my under the latter man sich and I'll see that displayed This email is in earlier if it doesn't has the required Adam. So now if I read on this application on my browser and if I'm right, I don't want right anything it should display email is required. And if I write incorrect email address, it will be displaying. Email is invalid. And if I lied the correct emulators that is ABC at the red damn on dot com, then it should not display any other message in the next lecture. Even see how we can use order complete box with an annual Ahmadiyah 10. 10. Demo of Auto complete box: in this lecture, we will be working with order, humbly come Boerner and to integrate art a gambler component over application. I have created a brand new component. So this is new component. And then name it to heart A complete. So here on my abs demon rewriting, mad form filled and inside the mat form again, I'll be using one input, darling put is having Mac input as attributes. And one more thing again, I'm using Matt or the complete. So this is new. Come for we need toe along this component from our at Angula material. Remember, V has created a separate morning and a name it toe material. Morning. So first I'll import that auto complete from material. So here I am, writing Mad Auto complete more do in the same order I need to import in inside the imports at it as well as exports. All right, so that I can use Mad auto complete on my ex demon. This might order complete. And this in food has to reconnect to connect them both. I'll create a reference over here and I'll assign has And now this will be the name. It would be anything this is up to you. And yet I'm seeing Matt Auto complete. And on this and boardwalks, I'm setting mad order. Complete property do art. The order is that Name off the reference you have Jews in, for this matter complete. Now, inside this matter of them bleed. I can write Mad option and I'll write a loop here n g four, and then see Let I am off. Yeah, Now this era should be the name off my edit. So I'll go to my typescript and creative on area. We're here. So here and see ERA, which is a type off a string area, and I ascend some static value to it. Say, for example, one do and three. So what I'll do is I looked through this area and I want to display that item inside my mad option. And here I can also said the value. So here I'll be setting. So now if I say about this and really it on my browser, you can see the other complete box is ready for you. Now, this is the damn off. Very basic order. Complete box. In the next lecture, we even see how we can fetch the data from the axe TTP. That is, from over raced FBI and we can clear the auto public box with that data. So in the legs lecture, we will try to implement this kind of order complete box which has a multiple columns. 11. 11. Setup guide for node.js: Hello and welcome to this mortal off. Nor Jess. I know you all might be surprised. Vine o. J s in Angola Material scores. But I want to give you a real experience or practical experience off how you can create the rest. AP ice and also you how you can use those created rest. AP I too Fast data on your angular materials camp. If you already know how to create the basic rest FBI using nor Jares, then you can simply skip this model and go ahead with the next morning. But if you are a beginner and you want to know how to create the Norges AP eyes than this model is for you, these are the mansion prerequisites before you know, starting with the Norges application in this application, we will be using the express template so fast you will be required to install Norges from its official documentation official website Norges dot org. Then we will require the express generator. So the second step is NPM install express generator and miners miners distance for global. That is you need to install that express generator or Leavins and the turn as a data is I'm using my SQL. So for my astrium, I already installed vamp or them server to my local machine. So if you guys are done with three done with three basic requirements then go ahead and create new application using nor GSO. Here are the steps to create a Norge s application. You need to write simple express because, as I said, we are using express template to create nor jest application. Now I will be using my SQL as my database. So here I have to write and b m install my ask you hyphen hyphen seal that will install my ask your dependency to my packaged orgies and file after having installed is my SQL I will be right I will be installing the corners courses for cross cross origin resource sharing It will take some time. I'll be back while it is done. So now, as a second step, we will require to install the corners swell right and pm install chorus and again minus minus Seal that we lead dependency to our package not Jesus. The courts will be required for cross origin resort sharing. It will take some time to install the dependency And then finally we need to write NPM install that will install all the dependencies which is returned in package dodges and fight. It will take some time. I will be back again while it is done. All right, so we are ready to go with Norges application In the next lecture, we will start with creating the rest Abia with Norges application. 12. 12. Nodejs dbconnection: in the previous lecture, We have created application using Norges. Now in this lecture, we will start working with the Norges application. But before doing or before starting the world briefly introduction, I'll give you a brief introduction about the files that comes with an express temple. The number one is packaged on Jesus this back it's not Jason contains all the dependencies which we are going to use. Say, for example, if you're using my SQL, remember, we have in stall and bm mind strong. Then again, this course so this back. It's not Jason contents. All the dependence is off your application. Then second families Abd RGs one can say it is the root off your nor GS application whenever user request any raced FBI first, it will redirect this app dot Js file from this Abd RGs file, it will be routed to its routes. Then we have this routes for the inside these routes for them, we will create the matters or we will check whether the request is a type of GATT. Whether the request this type off post whatever the request user had made. According toe that matter route will call ever more than Now that model will be the other business. Large our matter. Now In this lecture, we will create our first file, and that is known s BB connection dot gs. That file has all the necessary requirements to connect with our my SQL database. So before creating that BV connection Doggy s file, I'll first show you, however, databases will look like so I created one damn or database, namely, took country people and that country table contents. Some rose about some details off the country's like country name and the image off that country's flag. So we will be fetching this records in arborist GPS. So now let us start with DB connection dot gs. So I first I'll create a new file and I'll name it toe db Connection dodges. This name is totally up to you. You can give any name, whatever you like, and hear what I'll use. I'll use my SQL their dependency, which we have in store. So I'm seeing required and, uh, my sq it and then I create one pool and, uh ah, I use one variable. So I right there connection is equals to my SQL dark. Create full, not create full is ever matter. Inside there's a creative an object which has four Property number one is host. Host is where our database is actually hosting In our case, we are using of a local database. So I will be writing local host as my host. Second use it. So the default configuration with vampires em is like use The name is the root and the same way The default configuration one of emperors them for password is empty. So I'm seeing password to empty and the last property is dead Obvious. So here I'm seeing date of his name. Damn, because I given my database name off dead. Now, in order to use this configuration outside the scope of dip this db connection RGs file, I need toe export this fight. So what I do is right more do dark exports, my connection object. So he had an writing connection. All right. In the next lecture, we've been going to create a model for a model is in which we can write our business logic 13. 13. Nodejs Model file for country: So in this lecture we will create a moral fight. Now what is more than as I see their leer in moderns, we will be writing other business logic. So first, I'll never get through this and create when directory and I'll name it to mortals. And inside the models I'll create one new file and I limit toe country underscore Mortal god Gs Now again ensure you the table structure which I have created I have created I created a dam or database inside the demo database. I have created a country table and that country people has country I d country name and country flag. I've been fetched this data on my Lord yes application. So here first line, I need to import that baby connection which we have created in a previous lecture. This is already be connection and we have exported this connection object. So now here you never more than fine. I'll require our connection object to make in connection with our databases. So online number here I'm seeing required, and I'll import that BB connection dot gs fight. Currently, I'm inside the models directory, so I need to use that extremists in text for double door to move upwards inside the directory, and I'll name the right Levy connection. Then again, I'll create one more object. And here I'll say, countries and inside this object I'll create are different matters. So first matter I create is gap on and you can say countries. And I'm saying that it is a function which has an argument off called back. Now, inside this matter, I can write my query. So here I'm saying Repel BB now Levi's object to our connection maybe connection file. And here Deby has a matter off query. Inside that query, I'll write my SQL query. So I'm saying, See, like star from country table and as a second argument, I'll pass call back. So here I'll pass called Big as my second. No. In order to use this country's object outside this country mortal, I need to export. I will require this object on my routing file, from which I'm calling. This different matters. So here I'm seeing more do. Dot exports is equals to our object. In this file, you can create as many matters as you want, like say, for example, if you want to create air matter for this country stable. You can write a next rapper inside the same object in the next lecture VI vill create a routing file for our model. 14. 14. Nodejs Routing file for country: so in this lecture will create a routing fight. Now, what is not being friends? Locking friends is a fine which will decide which matter or which function is to be called from over. More than fight depends on user requirement. If user requested for a gap matter, it will call Get all countries. If you they requested for a post matter, it will call the insert countries or Air Countries method so nothing file will decide which matter. Toby called from over More than so fast Larry, get through this routing mortal So it has a routes mortal. And inside this route I create a new route and I'll name it too. Country under school routes dot gs Not This fire requires some imports to be done. First, I'll import there and say, Express on, I'll see require express No experience is a template which we are using for creating the rest Abia with gorgeous. So I'll say express. And, uh, second important required is out. So here l c out and I see express dot Then the third important required is this country morning which be here already exported. So here are right, Brad, uh, country is equals to required. And as I say, like now we are inside the louts model, so we need to sack part accordingly. So here said double door then mortals directory inside the morning in the next tree important country More Now here I can check if User has requested for GATT matter. So I am writing outer dot gap and it doesn't have any perimeter. So I'm writing empty are you can see a slash Then here I'm seeing as the second argument I will be seeing okay called a function which has three arguments and that is request response and the next inside the matter inside the function I'll be calling my matter from that country object. So here I was seeing country dark than the name off the matter. I want to call soon. Our key is the name of the man trees ghetto countries that cattle countries has one argument. Remember that call back? So here I am passing function as my argument with two arguments. Add it, Andrews. So what I'm seeing if there are any others were fetching the records from the table returned Anna and else if there are new ADDers, then return the record So here I'm seeing Eve. That isn't at her. So I'm seeing response. Responses are yes. So here and saying this once. God, Jason, I am done, Adam. And if that isn't any added them responds, not Jason and returned the ruse Got Ihsfah by that question. So now if I save this application and again I need toe export my routing object. So here I'll see more do dog exports and counting object. So now if we make and request whoever rest a p a So a request will be like this and it's true in the north pair, we will make in respect requests like this That's TTP Carlin slash Or here you can send directly local host caller 3000 slash and what will be the name off of a routing? So here I can say a country. Then this request first, first, open up in abd RGs fat. So now we need to set some settings inside the Abdullah GS fun. Remember, in the first lecture off this morning, I told you, abduct gears is the entry point off Norges application The never user request any new EPA on any restate Pia's request that will be navigate Abd RGs first. Then it will never get Buddha loving friend. So I didn't see what are the setting or what are the adjustments need to be done in? Abdel urges in the next lecture. 15. 15. Making adjustment to app.js: now in this lecture will make some adjustment. You never abd RGs fight First adjustment is for quarters now quarters will be required for cross origin Resource sharing In our case, our backend will be hosted on locals 3000 in our front and that is angular which will be hosted on local Oh, sport it wondering So in our case we must require the court as to exactly true If in your kids If your application and back and will be on the same domain then you will not required to make the chorus true. So first I'll write an important for the quarters So online number seven I'll be saying that quarters is equals to require quarters Remember, we are all really install and PM install quarters in the first lecture So now here All my line number 20 are I can say yes, My number 19 I would be seeing yeah not use And here I'm seeing chorus so that will be required to enable the chorus No, again, I need to make an important to my helping fight. So here I will be seeing that country. It will be a simple name, I'm saying or I'll import required and the part to my router. So here I'm seeing routes and inside the house country doubts. And what I do is online number 20 year. I'll be lighting after use here. This is the name off the part which will be shown in your You are so here. I'm seeing country. And the outing Phile. Which rotting import which we heard them just over here will be this. So here I'm seeing my routing file would be country. Okay, this is the spelling mistakes. Who? You got this country. And I also used this word here. What does it means? No admits like this than ever. User requests rest api. I like this local host. Call in 3000 slash country. Then this dome in will navigate us toe Abdullah gs than inside that AB dodges it will find for the country part of the country route. So here you never have not gears. We have said that if locals 3000 slash country then redirect this request to our routing warning now inside of a route we have returned. If the request is type off, get then go and make a call to ever get all countries which we have returned in other mortal fight. And inside every morning we have a ton of equity. This is how this is the sequence Hobby, yarn, STP, eyes, books. So now if I see this application and if I open up my terminal So I will be using Integrated Terminal which comes with my in the which comes with my i d So here I'm saying and b m stopped. If everything is got it and that our new hours, then this ever would be started. And now, if I never get to my browser and say local host 3000 it will diss players express as an hour. And now, if you make and call it over helping file So the u. N will be locals 3000 slash country, then that will be making a call to our routing files here. That is an error with our query. It issuing this country table doesn't exist because that is a spelling mistake in EverQuest . So what don't do? I'll open up my mortal file and I corrected the spelling over here, and I'm a tourist. I need to restart myself again. So on my terminal, what? I'll do. I'll stop the current terminal and again and restart my 10 minute and B m start. And if I make the request again and if everything is correct, it will return us that records. In the next lecture, we will fetch this record with ever are complete box. 16. 16. Node.js Summary: All right. So this is the some money on. You can see a brief introduction to the North GS application how you can create a very basic rest FBI with nor jest application. It is just in a world view. Ought to stop so that you can be dying with nor GS application. So now, back to the angular material. In the next morning, we'll work with angular materials component. 17. 17. Creating Service in Angular for fetch REST API: three are in order to fetch actually data, not the static data we have created. Arrest AP Eyes are race services using nor GS. Now it's time to open our angular application and fetch those created rest. FBI's in a regular application travel Move back to my angular application here. What I'll do. I'll open up my terminal and I'll create one service. That service will require toe create my at http call. No. Services are dry. That means do not repeat yourself. So what I'll do, I'll try to come on. That is N g Defour Generate asked for centuries and then name off the citizens. So here I was seeing it's a country surgeries. So again I'm seeing it. Uh, instead of country service and see it's a country. And if I press enter dangler see light will generate a service file for me. No attention reading a service. Fine. Sure. I'll open up my service fighting. I love one of my service file and inside this service fighting again. I'll make to imports when this for import the at city be more dealing. Not this exited. The model is required to make an ass TTP call so first I'll import That's TTP. So I write important as a statement here. I can see that. And you look Groman. And inside that Goldman, I think, acts to TP here inside this on import at city Peak Line package. So here I would be seeing as TTP client on another thing I would required would be haters. So he and I will see it. That's TTP hairs in order to make this exited declined work. We need to unlock this. That's TTP Klein model all over. Good morning. That is Abdareh mortal dot Be a spy. So I love one of my abdomen. Morning dot Yes, fine. And here I need to import the same import again. But this time I will import as TTP Klein model. So here I'm seeing at Jeweler Common and Slash acts TTP instead. Off accidentally, client I'll be seeing at Citi declined. More do and I need to import this climb more do inside the imports at all. Right now, if I see with this and we're here, I'm creating an instance off this at City declined application writing on the score. That's two dp, which is type off. Adds to DP client And now you create matter. Name it. Get all country All you can see countries on making extra DP call. So here I would say every day this dog act TTP Remember, our surveys are our race tepee A will require a get quote so he'll be using asked it'd be get that it will expect you are. So you copy my, um From the browser that is local host 3000 slash country. So I'll be Is this on my gap? Math, huh? Like this. And you are some. Now I have created this service. I need to call this service on my campus. So in the next lecture we will call this gather all countries matter all over order complete comfort. 18. 18. Autocompletebox with Live Data: in the previous lecture. We have created services now in this lecture, it's time to call this service on my component. So let me get to my component, and that is not a complete demo component here. I'll be calling that service before calling that service. Do not forget to start your back in. That is NPM Stop for your Norges application, which I already started in my terminal and for safer side. You can also check in the browser. The surgery started are not so in my case, my back and Israeli. So it's time to call it on my front and friend and minutes over angular application. So what I'll do is I'll ever get to my desk, amporn on dot beers, and I require one area to store this type off result now to store. This result, I'll create one class on my angular application. So here on the auto complete Campell and Bam Oil Right Creek and create new class, I'll name it to country dot psd assistance for typescript. And here I'll create one class and export glass and country. Inside the class. I'll clear one constructor, so constructor and inside the constructor, I'll create the three properties That should be same, which our service will return between our service. It is returning as a C I T. C name and see flag. So if we will give the same name, then we will not need tohave typecasting or type conversion. So here on my class, I'll create three properties else a public C i. D, which is type off number. Then again, I'll create a second property public see on the school name which is type off string and the terminus public See Underscore Flag, which is also type of string. Public, is important to access these properties on other component. So I'll see of this class and now all never component. What I'll do is first I'll import that class. So here I'll see important as a statement and inside the statement and seeing that go and import the country class. So here I'm seeing that country package So now I can create an area. So I was naming toe country underscore era, which is a type off country. Not this country is the class which we have created just now. So he had I'm seeing its type of adding then the second import required ease import as a statement and I'll import my service over here. So here I'm saying go and import my country service. So here I'll import the package country. And on my constructor I'll create an instance off that country service. So here I'm seeing Underscore country and which is a type off country service. So now on my constructor, I can call that matter which we have created in our country service. So here I'm saying this dog, my instance underscores country Dar name of the matter is cattle countries and that will return as an observable. So here I can Cesc subscribe to the girl countries. So this subscribe G was dead, which is type off country. Remember, we have created the class country and that has more than one record. So he had I'm seeing it will return as the data averages type off country area And now I want to map this data to my local area. It's the name of the local and his country tiara and yet I'm giving that data so not my courting portion is done. Now I need toe only bind this area to my daughter Gambling box on html. So what I do on my HTML, I would just duplicate this static auto complete box copy and paste over here and here and changed the reference what I created. I'll change it to auto one on. Also here on auto One. Now for the loop, I have to write Engy four Let item off era. So instead, off era I even see it should be country underscore tiara. And now I'll expanded within the line and I want protein, some design. So here I'll remove this binding and instead off this what I do is yet I ve bling one image . I want to put one image to display the flag image on the 2nd 1 Here I'll put this pond and that span will display the name off the country. So here I'm seeing item on. With the height off, you can see around 25 and the source. So here I'm finding the source and I want to find the source dynamically through my addicts . Or yet I'm seeing item dot c underscore flag. Now see, in the school flag is the name off my property, which I have created in my class. So inside this plan. I want to mind that country name. So he Ram Singh. Item dark, See? Underscore name. So now if I see it this application and really it on my browser, it should display as the are complete box with the flag. All right. But now if I click on this, it should be returning us object up because we forgot to sec the value property off Mad option. So here on this value property, I need to buying item Dar si underscore name. And now, if I see it this again and related on my browser. And if it on this And if I select India that it will display India. This is how we can mine the data with order complete box. In the next lecture, we will be talking about the day that papers 19. 19. Basic Data Table: in this lecture vividly working with the data table component deductible component will display our data into row and column form it. So that will be the most for most reusable former toe display. What data? In order to display data into the data table, we will be using the same data. Same rest api I, which we have created or used with and Arthur Conflict Box. Say, for example, this did this service will returners, calling my country I d country name and flag and all Already fear created a class to store this type of data. Even we already created a service to fat this data In our angular application, we will be using this service and class in the right table. Also in orderto display this data on my data table component. I need to create a new component. So here I will be generating a new component using angular you like So here I'll be like N g and distance for angular G stands for generate C stands for component, then the name off the component. So I will write a name off. The component is detectable them. In case if you have more than one more nail file. Then you have to use this mortal flag to say in which model you want to register this component. So in my case, I'm seeing registered this direct able component inside the APP model. So if I press enter, then angular, see light will generate a new component for us to display data on my component, and I need to make some adjustment on my typescript. So first I'll create to ery on my typescript the first a rebel bitter display columns. That area will be used to display the columns on over next year. So here I'll be naming toe displayed columns, which is a type off a string. So here I will be giving its values. So I'll be seeing this value will be the same as my column name. So here are be seeing seen name and the 2nd 1 would be to see on the school flag. All right, I don't want to display can three. I do. So I created only two columns. Now again, I need to create or I need to import one import from at annular material on. That is for Matt Table there a source. So here I'll be importing it from at Angela Material. And I limit map the well did I sauce? And here I create another area. Name it to data sores so you can name it anything. So you see, the resources equals two new map team. Well, the source All right. In order to fetch data from arrest, FBI, we need to import our service, so I'll see Gwen inboard my country service. So here I'm seeing country. And I'll also required the class to store their data so he'll be seeing important the country class from auto complete demo component. Andi. Yet I'm seeing country. No. On my constructor, I will be creating well instance off my service and name it to country and which is a type off country service. And yet I'm seeing this door country Dark name of the matter is get all countries and I'll write subscribe for it. So subscribe. Inside the subscribe, we will receive our data, which is a type off country glass. And yet I'm seeing I want to give this data my data source. So here I'll be seeing this dark data sores dot Did data source contains a data property in which you can assign your hair. So here I'm seeing this dark data source nor data is equals to did we have made an adjustment to our typescript. Or you can see we are able to fetch those data from over a PS in next lecture, we even see how to bind this data toe over at TML. 20. 20. Data Table Continues: in the previous lecture. We have done a court ill thatching the data from the wrist GPS. So now in this lecture, we will be binding this area's data source. Whoever at TML on my HTML, I'll be using one table 10 on that table. Sure have a man matter. Table attributes. So here I'll be using Mad table. Do not forget to import this map table before using it. So I already important the map table model inside my material. Morning. All right. Should know in this table we need to set one more property on. That is a data source. So here I will be using data source and that data Sure, sure contain our data source area. So here I'll be assigning it our data source area. Then this table should contain scholar for creating the column. I'll be using Engy can paler. So here. Unseeing n G container and one engine container should have one p hair. That is a match and one TV. But this angie container should have one definition, and that is mad column definition. Now that should be the name off my collar. So name off. My column is country need to see in the score name, then this D etch sure has to attribute. Verney is mad. Hey, you know, set on the another One is mad. He either sell definition and here I can bind any man that name will be displayed on my HTML. So here I would be seeing country name instead off seen him, then hear this duty is my map set. So yet I'm using Mat Saleh tribute And another attribute is Matt Cell definition. Ural. Create the instance. So here I'll say lap on the name off the variable would be true. And then inside this the Keeley I'll be binding that attributes here. I'm seeing Roar dog name off my column so you'll be seeing rule dot c and the score name. This is how you are. One column will look like, so to create another column. I'll be duplicating this crawl. Um, and here I would be assigning the name toe see underscore flair. Then again, I'll be renamed Toe Flag. And here, instead of finding the values to the column, I want to display the flag inside the image as image. So here I will be using image. That image should have a height and very so he'll be seeing 100 and hit it off. Also 100 then it should be. Have a source property and that shores will be. I'll be seeing roar dot c Underscore flag That is the name off my another column. Some now at the end, you need to create two rules one drew for the other hater rope. Or you can say that Roshan contain information about the haters and in that rubble be displayed as Matt. Hey there, rule. And yet I'm seeing mad. Hey, the root definition Now we have created our area for the header room and the name off the area is displayed columns right And in second row, we need to create the role definition. So the tribute is Mac true and that Metro will be mad roar definition And inside that metro definition, I'll be seeing Latin rule and another attributes were before columns. So here I'm seeing columns and columns value should be displayed columns. Now I see this application and to run this component, we have to change our starting components. So on my app company in dialects 10 year Mel, instead of this order complete component I will be calling my did a table. So here I'll be using APP, dinner table. And now I see it and run this application. And if everything is correct, we can see the data table one over browser. So now if I see you run this application, you can see the data people on the ground in the next lecture even see the data table in details. We will be seeing the pagination sorting and the filters and Manimal with the data table. 21. 21. Data Table with Filtering: In the previous lecture, we have seen how we can integrate our STP I or our live data to this day. That table now, in this lecture, we will be implementing this data table into the details. Now, in this lecture, we will see how we can integrate the filter functionality with the data table. So I'll open up my xdm ill and on my external I'll create one input box. So I will be using mad form filled inside the Mac form. Phil, I'll be using input. That input has a Mac input as a tribute with the placeholder off filter. And now I want to do some filtering functionality. So here, and create a reference variable for this input box. So I was name it Toe filter one, and I create one event. I name it to keep up one key up. I want to call my one function, so I'll name it toe apply filter and that apply fully dead should take one argument on Daddy's a value which user and tears into our input box. So here I'm seeing filter one dot value. All right. So expanded within the line. Okay, so now on my typescript I'll create one function one matter on my name it toe apply filter , which will take one argument, which is a type off string. And here I am seeing this dog did ASU's remember the data source is ever map table data source type area. So here I'm saying, this dark data source not filter, and I'll assign that string value which user has entered. So this filter and I'll calling the dream function as well as dot to lower kiss. So now if I say that this application and I need in my browser even write anything here, it will be filter. All right, This is how filtering will be done in there at table. In the next lecture, we even see how we can do a sorting or a pagination with the data table. 22. 22. Data Table with Pagination: in this lecture we will work with Beijing Nater So on my ATS TML after the people dead I will write when new component on the name of the company is mad Be originator Now, in order to use this Beijing it that I need to a lot this page in it in my material model. So I navigated this material Mordor file on on my material model I wouldn't be a locking Mac Bijie nater more dealing. And I need to also write this inside the imports, Eric as well as the exports added. So this is dead now with the page in there, I can set two more properties. One is be dis ice. So here, all seeing paid size to default three that will display three record by the fourth and the second barrel. Second attribute I'll use page size options that will give us and dropped out. So here are seeing paid size option toe 35 and 10. That will depend on your requirement How many records you want to display in the first screen? Now, over that stimulus done, we need to make some adjustment on over back screen. We will create one property on our types to link this page in ator component on our typescript. I'll be using reference minding. So here I am using hash and I'm assigning it any name, say, for example, I'll assign it originator. What? All right now on my typescript what I do I need to import first map Beijing native from at angular material So here I'll be writing mad Bijie Nectar And here I'll create one property . So here I've seen Bijan Eater, which is a type off Mac Bijan eater. Now I need to link this property toe my angsty Emil's control. So for that I will be using the view change. So he really first I need to import the view child. And then I can use that future decorator here before the pigeon editor at have you changed and then this view change killing my property to my ads demon. So here I'll see Name off the selector Ease, Originator. What? This is the name which are provided on my ex TML as a reference by name. All right, and now on my ngoni need I'm seeing this dot data source dot Bijie need and I'm assigning it to my local paginated. So here I'm seeing this dot bi Jinyu. Now if I sailed this application and reading it on my browser, if you can see by the fall, it will display on Lee three records because we have said our paid size 23 and it will give us a next page. But if we never get to next, it will show us the more records. And if we want to increase the paid size, we can increase it from paid size options. So here I'll be seeing to fight, and then I can see two panels. So this depends on the page size option, you have said. And by the four little display the three records. In the next lecture, we even see how sorting will work with the table. 23. 23. Data Table with Sorting: So in this lecture we will work with the sorting functionality with the data table. So I'll be using this Matt sort attribute with my data table. So here I'll be writing Max Sort and for any column to make it suitable. We need to use when I reviewed and that these Matt sought hated on any column. If you write this mad sort header, that column will be sort of in order to use this Matt sort we need to a love Matt Sort Morgan from at Angela Material. So on my material model, I will be important One more component or one more model and a limit to Matt Sort mortal. And do not forget to write this match sort morning inside the imports at it as well as our exports. So now on my typescript, I create one more property, which is a type off matt sort. So first I'll import Matt sort from the ad Aniela material. And here, Alec, a year, one more property. So I leave it to sort. You can give it any name, which is a type off max sort, and I want to link this property toe my mad short attribute So again, I will be using at view child at Coretta on that Have you changed? Can take a selector. So here I'll be saying Matt short. All right, now again on my ngoni need I will be seeing this dog. The source Dark sorting is equals to this dart sort. This is how we can implement the sorting functionality in other application. So now, if we never get to the browser And if we click on this name, it will be sorted in ascending order. And if you want to sorted in descending order, Then again, you need to click on this fit so that will be in descending order. This is how easy are angular component will make other job this much easier. In the next lecture, we will see how we can work with expandable room with the data table. 24. 24. Data Table with Expandable Row Introduction: Hello, everyone. I hope this course are until now is useful to you. Until now we have implement and data template in a various We like we have implemented this filter functionality, the sorting functionality and imagination with data table. In this lecture, I will be talking about the expandable Rose feature off the data people, This is the feature. If you can click on any room, I will be expanding the room with the animation. So to implement this feature in my application, I have already altered my table. I have added one more quality description, which is the description about the flag to my table. What I want to do is now I never user click on any room that will expand within the line like the same way it is expanded here on angular materials. Official documentation. I also want to follow this documentation because it will help you whenever you want to do any functionality by yourself. You should know how to follow this documentation. So in the next lecture, we will be implementing this features in our data table application 25. 25. Data Table with Expandable Row Implementation: So I have divided the process off implementing this expandable drove, featured or application in three simple steps. First, create the animation on the typescript. Second, create the expandable Templar on over 60 mile on the turf. Create the click event off that route, so I'll be following these steps. One. But we're so far. Step is, create the animation. So here one the official Aniela Materials Documentation. I'll be navigating Do view source. Then I'll be never getting good typescript. Then you can see we helped this animation inside the component meta data, So I'll be copy Paste this animation on my typescript inside the component matter data. So this is the animation, and this animation has nothing to do with angular material. It's Justin Angula cool, and for that animation to work we need to import. This package is also from at Aniela Animation. So on my typescript I'll be importing this packages this animation I'll given the name or created the trigger and name it toe detail expert. It has a two step collapsed and expert and one transition from expand do collapsed. Does this stab number what now? In order to work with the expandable Drew we need to make some adjustment on over at TML. So here, first, I have make this table Ah, use off Attribute multi template data rose. Then I will be using the expandable template or expandable drew over here. So what I'll do on my that's TML I'll be copy and paste this expandable drew from the official documentation and I need to change this template as forever requirement. So here this template using the cost One attribute on this call spun required the number off call spot on the number of column. You want too much. So here I'm seeing much this number of columns from my area. So my name off Mary is displayed. Collars not let then the name off the animation is a seem. So I'm seeing toe detail explain. And here I am using that ordinary operator. If the state is true, then used expanded stare And if Fallston usta collapsed it, then this is the designing or you can see these other columns is to be displayed whenever user expanded within a life. So I'll get rid off this columns instead of this columns, I will be writing my columns. So here, instead of this element, I will be using the image country. So image here. I'll be using height and I'm giving height off 100. Well, here I'm seeing were cough on drip and as and source, I will be seeing or being setting the source from Element. This element is a local reference, which is I created over here and here. I'm saying the name off my collar. So name off my column easy. And the school flag now here will be displaying the name off country. So again, I'm seeing element dot c underscored name that see in the school name is a problem name and last I want to display their description. So over here I'll be changing it to description. Yes, this is the name off my column. As I said in a little lecture, I have already altered my table and added one more column toe description. So I'll make an adjustment to my class. Also inside of my class, I will really created the fourth column description is diaper off string. So now I have make second and just I have make an adjustment to my next email template. Now the tar adjustment is toe make that click event off my column. So here, on its HTML, we need to create these three rules. We have copy that are we have created to rose earlier. But to make it easy, I'll copy these three rules from its XDM in and our next email based all that three rules were here. So the first true willing for how many columns you want to display, So I'm assigning it at display columns added to it. Then again, in a second rule changes to the display columns and this column we will be creating the click event, and the last column is for our expanded Route 10. Now we have followed all three steps. And now if I sailed this application and run it on my browser, if you can see it is already reloading my bitch. And if everything is correct and I click on this road, it will expand their within the light. Oh, here we have not closed this image tag inside our HTML. So to correct this, what I'll do, I'll never get to its html. And over here we have started this image stack, but not completely So now again, if I see it, this application and run it on our browser. If everything is correct, then we can see the image also expand within the light. So now if I click this, you can see it is working properly. In the next lecture, we will be talking about the layouts. 26. 26. Working with Card Layout with Live Data(HTTP): Hello, everyone. Welcome to the new model. On this morning we will be talking about differently outs. So layout says the various components like godly out greed Lee out tabs three list and many more. In this lecture, we will be talking about this card. Leo. We will be creating this godly out, using the official documentation like this. And as you are low about the previous session, we already have created a different service for the matching the ads. TTP records. So this is the service we are making an ass typical. We have created a matter. Get all countries which will return us the countries from the our table. We already have created a class to stored data value. So here we have created a class with the four columns Country I D. Country name, country, flag and the description We already created a new component on a name it to Carly out. Demo in on Carly out Demo. I important that country service and the country class object. Then again, here I created constructor inside the constructor. I've created the instance off the country service. I already created the area which is a type of country to store. The data averages returned from our databases. And here I'm seeing this dog country Dark Garel countries on here. I'm subscribing to my event. And then inside the subscript I'm ascending my data to my local area. Now it's time. Do some external work here on that's TML. We will be using the mad car, so I'll be designing it. So here are writing, Do you and that do is shoot type off class room. So far only designing purpose. I'll be using the bootstrap CSS. And inside this deal will be using Matt card. Do not forget to import this matter. Card model on material model. I already imported this Matt card model from at angular material yet and I already imported and exports that same model in a one, but really more didn't fight. So now, on my ex TML, what I'll do is I'll divide the mad card into four different sections. First is a mad card hater. So here I will be seeing mad card on, uh, you know, then the second sectional create is about displaying the flag. So here I'll be seeing image and that images having a height and width. So here will be assigning it height off 200 on duh. We're tough 200 and then I'll create the distraction and name it to Mac content. Shoe Matt Car content. Inside this, I'll be having one paragraph and inside the paragraph will binding my description. Then again, I will create another section of my name with two actions in this section. I'll put the burdens for like him. She This is how we can design of a car. So inside the header, what I'll do is I'll use another image, and I assign it to attribute Mac guard outta to display a stamp size flag image on the here . What I'll do is I'll repeat this Mac card until, or I want to report this mad car to look through my era. So what I'll do is here. I will be applying another's. Yes, it. So I'll be seeing Call Emory on four and then hear What I'll do is the right one. Look for look on here. I'm saying lack item off, So I looked through the era area on display in the records. So here I will be binding the source attributes from the era. So here I will be writing. I am dark name off the colonies Flag. Then again, inside the hater, I will be using Mac card title to display the country. Me and you'll be using items dot CME discordant. Not this item is my variable, which I'm using in my look So he and I would be assigning again source. So source. And that should be again his equals two mad See in the school flag That is the name off my column. And here I left, right, I'll be using one more attribute And that would be mad guard you Midge. Now, inside this paragraph, I want to display the description. So here I will be using I am down description. This is the name off my quality. So now on the action, I will be using the button. So here, inside the Burton I'll be using like and on the but And I'll be using the AC Tribute. Matt Button copy and paste this. But you know what? Here and I would give it the name. Shit the water do is I'll be using a pipe. Display the name in capital later So he'll be seeing name display the name in uppercase. And also the description is too long to display over here. So I'll be using the sub string function, and I'm seeing it toe display. Only 1st 200 characters. All right can hear will be using this border, and I'll see to read more. All right, so here I will be seeing read more. And now, if I see it this and reading it on my brother it everything would be correct. Then it should display the mad car with the flags. Data Here it is. You can see this is the mad card out our tribute then this is the name off my country in the upper case. Then this is the image of the flag than here is a description with the real more button. And this is the action tag in that I will be using, like in share. But in the next lecture level, we're talking about agreed Leo 27. 27. Demo of Grid Layout: in this lecture, we will be working with greed. Leo Gridley Out is a two dimensional list view that arranged in records into cells in greed based Leo. So in order to before using this greed Lille remember this. We must need to specify the number off columns we need to display inside the greed Attributes are agreed earlier, so we will be implementing the same example which is shown on angular materials documentation. So here, first, we need to create and interface on my types creep toe display, the records. So here I created the interface style, which has a four property Callisto display. The background calls will be used to define the call spot. Rose will be used to define a response on the text to display on your cell. So I already created this same interface on my newly created component. It's a newly creator component. I named it greedily out and inside the grid layout component. I already created the same interface which is shown on Angela Materials website. So now what I need to do is I need to create the area. So what I'll do, I'll create the same area which is shown on the angular materials website. On my typescript, I'll create the same area and that has a four records. Now This is calls and this is rules. So here I'm seeing calls and I said Toe three and rose to what that means. Qualls Fund will be three, and roast will be one only. So now in my Xdm Ill, I will be using the mat Greed Leo. So on the xdm Ill. What I'll do is and never get toe this. That's TML and I'll copy and paste. That's TML from the official materials website and now on my application, a copy and paste this design. What would it to do? Is Matt Gri list, and here I'm seeing create maximum four columns. We must need to specify this calls. Attributes row, height. I'm seeing it. 200 picks him. But if you are not specifying this attribute, that would be fine. It is an optional. If you do not specify this attribute, it will calculate the rawhide automatic than inside Mad agreed list. I'll be using the mad Greek style, and that time I'll be looping through my area in the name off their a styles, and I'm minding the values from the area when my will. So here I'm setting the call spot from the calls Rose Bond from the rules and the background color from the color it. And here I look for displaying the text from string in the Coalition in order to use this matter. Agreed We must need toe a love the Mac greed list model to over material Morning. So which I already ate them on the imports. I'm important, Matt Greed list More do and I already declared it into Dover imports and exports. So now if I say this and run this application, we can see the same output which is shown on angular materials. Website. This is the calls fun. Remember, on the first record, we have set a call spun off three So and we have said a maximum four columns. So this is a call spun tree and one more columns. It's a maximum four columns. If in your case, if you want to fast the data from your database or from STD, be raced MPs, you can simply use this as shown in a previous lecture. You need to create a centuries and then you need to create area and assign those data to your area. But do not forget to specify columns and rows. How to display our records on agreed Leo. In the next lecture, we will be working on a tablet. 28. 28. List Layout with Static Data: in this lecture, I will be working with list early out. It's a second component off layout. More do so I created a brand new component and name into list early out, so I'll create first an area which we will display on our list. So here I'll be writing ERA, which is type off a string. And I would say it's an area and I'm assigning it some static values. So here, and seeing ABC and be seeing a man, no, and the last is X rays it. Now I want to display these three values on my list. So on my that's TMM sure on my xdm ill what I'll be doing. I'll be just using Maga list soon. Matt List. This is the new component. So do not forget to add Matt List more do to our material. Morning. So on our material model, I will be never getting to material model And inside the material more Do I need to import that material list mortal from at Angula material. So here I'll be writing material more new materialist Morgan So what? Bvl and, uh, sorry. It's mad list morning. So he will be writing Matt List on more do and the same back it. I need boob at inside imports and exports. So he and I will be writing Mac list mortal as villas inside the exports at it Beat, I think Matt List Ward. All right, now here on why it's TML. I can use that Matt List. So here I'll assign one a tribute, and the name off that brute is rule. And here I am seeing it to list an inside Matt list. I will be using mata list item. So here I will be writing Matt List item and inside the matchless item, Ivan again used a rule on this rulings type off list item. So I'll be seeing list item, and I will be writing a loop on this a matter list item. So here, I'll be seeing let item off tiara. Now Yara is my head, and here I'm seeing display the name so here will be binding it to item. So what I have done here I created one matter list inside the matter list and created one item, and I looked through the area on display all the items one by one on my ex TML. So now If I run this application on my browser, you can see the list will be displayed over here. All right. This is how I have a list. Will look look like one over at Steel Mill. In the next lecture, we will be working on this list into the details. We will be displaying our actual later from the country table with list out are so we will be displaying a small stamp size flag as Vela's flag name in the next lecture. 29. 29. List Layout with Live Data: in this lecture, we will be fetching the rate up from the at city piece. So here I will be importing the service, which we have created in a previous lecture. The name off the service is a country service. So here I'll be importing the same service which we have used already used in there. That table and auto complete box them. So here I will be seeing important country service and the here, Ali Macon. In instance, off this also on constructor. So here I'll be lighting country service as well s. I will be using that country class to store my data. So here I am seeing important the statement and here I will be writing. They were not to move to the folder and then again, I'll be assigning apart for this. I'll be seeing auto, complete them on inside the auto complete name off my classes country. So I'll import the same class were here and I'm naming a new country. So now inside my class, I will create an area with the name country and it which is a type off country, and I'm seeing it toe the added All right, and now I'll create the instance off country service. Who here? I'm seeing private. And that's a sign of the name off country, which is a type off. I can see a country service. So here I'm seeing country salaries and inside the constructor, I will be calling my matter. So here I'll be writing this dog, this dog on the score country Dar get all countries and I need to subscribe toe this matter . So here I'm seeing subscribe and inside the subscribe I'll be seeing it will return us data , which is a type off country area, and I want to assign this data to my area. So here I'm seeing assigned this data to my area. So here the name off any is this dark country. Iraq is equals to data. So now we have fast data from the Ecstasy piece like we already fast the data on the table and are complete box in a previous session. Now it's time to display this country era whenever that's TML. So here, as we have done this in the about list, look, clicking this and P Steve over here now instead, off I looked through this year, I will see to country, and this is the name off my area. So here I'll be seeing it to country on the score era were they? And now, instead off binding the entire object. What I do, I bind the flag, toe, my image control as well as country named my hating. So here I'll be seeing image, which I'll assign one more attribute and that is map list out that will be to display the stem size image. And here I'm saying to source, an island signed this source value off item dog see in the school flag. Now this year underscore Flag is a name off my column and inside one hating say, for example, at ST I will be binding name off my country. So here again I'm seeing sea and the school named. So now if I run this application on my browser and if everything will be correct then it will display country name as well as the image off the flag on the ATS TML. So now one of the next year. If we wait for it to look, we can see countries with the flag you never list. So here are the board the list one is the list off static data on the list? It would actually leader from over. That's TML. In the next lecture, we will be working with the day of Leo. 30. 30. Tab Layout Demo Basics: in the previous lecture, we already worked with List Kampen this list component. We have created two days how to work with the static beta as well as how to fetch data from the Ri STP eyes and binding those data to the list. Come from now, in this lecture, we will be working with tabs. Leo. This tabling out will be mostly used layout nowadays, like this is example off tableau terribly out will look like a different views. But behind the scenes, it will be only one component. So in this lecture, we will be working with this stab Leo. So I have created a brand new component on my application and name it toe tabling out them . And inside this component, I will be using Matt Tabb Group. So here, I'll be using Matt Tabb Group and that met Tabb group should consist off. Matt dead. How many steps you want to create? You can create inside the mat Tabb group. This matter has one attribute and that name off that tribute is label. This should be the heading off your dead. So here I'll be seeing first. And this is the content area. So here you can display your contained for that day. No. I will be duplicating this tab to create another tab. And here I'll be displaying content toe as well as label number two. And in order to run this, do not forget to import mats. They have a model from Angela Material. So on my material model, I have already imported Mad Tabs model from at Daniela material. So now if I see of this application and run it on my browser, you can see this Tabs are creative. We have created two steps and we can see a different contained for different types. In the next lecture, we will be working deeper With this step component, we will see how we can create a runtime tabs how we can remove the tabs of run time as well as how we can mind the tabs run time from the our area 31. 31. Deep dive with tab layout with dynamic data: in the previous lecture, we have already created a demo using a static tab. Contains. So now in this lecture, I want to do some example or some implementation with a dynamic data. So here I will create another Tabb group Control. So here I will be writing Mac Tabb group. Inside that Matt tab, I will be using one Matt tab. And instead of writing the static content, I want to look through my area and display all the tabs which will be the records off my area. So here, instead off writing the matter instead of creating this mad cap. Statically what? I'll do you right a loop. So here I'll be using the n g four and I'll be saying he lead item off. Not before using this area. Let me never get to this typescript and create one area. So here I'm seeing era, which is equals to area. And here I will assign some values. So here I'll be assigning first, then second, this will be some values and that values should not be the static. If you want to fast this value from the race TPS you can as we have fetched the data from in the previous session. So here I'll assign. I were assigned some name 1st 2nd and third, and then knife. I see what this and here I want to look through this year and inside this matter tab. What I want to do is I want to set the label dynamically. So here I will be using this label inside the square dresses. And what I can do is here I can see buying the item. So that will be the name which we have created inside over area, and this contain I will be writing content for and then I'm seeing this is content for the item one. All right. And now if I say this application and rely on it on my browser, you can see it has created three taps porters, and here you can see content 44 step than second. Contend for second depth and contend for third. This is how we can create or weaken bine dynamic data to over dab control. Now again, I will hear one butter. So here I'll be seeing button, which I'll apply von attribute Matt Burton and I will name to add new tab. And what I want to do is whenever user press this water. I want to create a runtime 10. So what? Alrighty. I will be creating a click handler. So here I'll be seeing click and here and be seeing on Air Tab. And then on my typescript, I will be adding a new record. So here I'll be creating event. So here I'll be writing on air And whenever use a press this button I want to add new records were all missing this dot RR dot Bush And on my bush area I'd be seeing new tap here. You can you any name? This name is totally up to you here. You can also take name from the user if you want to end. If you want to make doesn't that newly at a tab as an active tab, you can write this dot tabs not selected value equals to this newly dead. Now, if I sell this application and I also need to say this, that's TML. And if I really in this application in my browser, you can see it has one Burton add new death. And if I pressed this, it will lead a new tab runtime for us the same way we can create a delete button to remove any time you want to remove to do it. What I'll do inside my Matt kept contained area. I'll put another Burton and I'll be using that mad. But an attribute and I'll see is removed. And here I'll be creating the event again. So what I'll do, I'll be using this click and here create on the lead. But before removing this, I will require the index off the tab, which we want toe removed. So on our loop, I will create an index. So here I will be using Lad in LAX equals two packs. Now that will be the reference variable. You can see her in Next variable. Which G was the index off the 10. So here, world well past that index in as an argument. So now on my typescript, I need to create this matter so I'll never get my typescript and hear what I'll do is I'll copy and paste that matter. And here I'll write this dark era now instead, off push. I'll be using that supplies matter and that supplies matter will require index. So here I'll be seeing index. And as a second argument, it will require from that index how many rules you want to believe? So here I'll be seeing where and now if I save this application and relented on my browser . If you can see, it will take time to load on. Yes, it is loaded. So now if you can see you have this removed at so you can use that removed tab on any area . Now say, for example, I want to remove the second tab here. I'll press this removed tab. It will be removed for us. This is how we can use this. W like we can find this run time. We can remove the tabs and many more. This will be the mostly used Leo in the Vab and Mobile platform. 32. 32. Sidebar Navigation & Routing Part I: Hello, everyone. I hope you all are injuring this course off Angela Material. We are really learned a lot about Angela Medea. Now, in this morning, we will be talking about something new feature which release with angular six. And these are the starter components that comes with angular material. Say, for example, if we want to generate a dashboard component, then we can write a simple command on our CLI injury. Generate at annual A material material dashboard minus minus name, and this should be the name which you want to assign to your component and in case in your application. If you have more than one mortal file, then again unit to specify in which model you want to add this component. So here I am specifying minus minus model and registered this component inside the APP component seemly. If you want to use a side about navigation, you are just a step of it. You need to write the same command injury generate at Angela material than material navigation and minus minus name. Here, you can specify the name off your component, so we will be seeing this started component one Bible into the action in this lecture. We will going to generate this side. One navigation on my application. What I'll do is I'll open up the terminal. I'll expanded so you all can visible it. So here, this isn't a critic terminal that comes with my i d. So here what I'll do is I'll ride that come on n g generate at Angela material than material navigation. This is the name off my campell, right? And minus minus more to Len Somali. If I dress and it will generate a new component on that will be named toe material navigation, you can see it does generally that's TML type scripts. Yes, s and specifications. Now, if I never get so this component are before navigating toe this component. What I do is I simply never get to my app. Campbell in this is my route component. And here instead, off running this tabling out. What I'll do is here. I will write app and here and see material navigation. This is the selector off my component. And now if I sail this application and run it on my browser, you can see it will create a side Well, navigation ready for us is just a click of it. So now on our browser, you can see this is our sidebar navigation ready for us. And if we switch it toe the mobile more. This will automatically converted toe the mobile menu. So this is easy. This is how easy you can generate aside one navigation. In the next lecture, we will be working with the routing. We will provide all the routes to over different components in the next lecture. 33. 33. Sidebar Navigation & Routing Part II: in the previous lecture, we already have created a component called Material Navigation using over angular see like Now let me show you what that CLI has generated for us. It has generated that's TML type scripts, yeses and specifications. It also update our app dot mortal fight. So now let me show you what it has a better in our Abdareh mortal file it has, And in the package which is required to run the sidebar navigation. So we do not need to import this package ourselves from at Angela material. But in our kids, we are managing this material models are this material imports in another morning. So what we can do is we can simply copy in pissed this important mortals in material mornings. But we'll do it later. Now I want to show you the HTML which it has in return for us. So now I'll never get to material navigation on a well, that's TML. It has generated a sidebar convener. So the sidebar container has a two Section one is a sidebar navigation and the other one is a sidebar navigation contain the Sybil Navigation has mapped navigation list. Inside this list, we will create the links on which we want to navigate. So this is a kind off menu to us. And here inside this content area, we can display over can components. So say for example, if user clicks on auto complete, we will display order complete component. Over here we will create the rows to create a routing inside the angular application. So what I do is I'll never get toe the app directory inside ab directory. I will create a new file and I name it toe app dot Routing dog. Yes. You can give you any name as you want. This court has nothing to do with annular material. This is Justin Aniela core. So now what I'll do is I'll import two packages from Aniela Material one Sorry. Excuse me. I will import two packages from and angular route. So what I'll do is and angular Walter. And here I need to import two packages. One is routes and the other one is router more do all right now I will create an area. That area is a very off but so here I'll be seeing Gon's in the name off. There will be a routes and which is a type off routes that routes It's the package and I'll assign it an area. So inside this area created an object. That object should consist off minimum to property. Well is a part, and that part should be here. I'm seeing if on my browser, if the parties like Local who's 4200 slash and I will be writing basic, then go in. Lord, my basic component in the basic component is button and in food demo component. So I need to import that buttons and include demo component from its spot. Then next year I'll be creating. If the part is I will be seeing, like auto complete. Then go and import the order complete component from its location. So here I'm seeing auto Complete them so that will import order Complete demo Abdareh gloating. Then I'll create another part on That is for you can see sign up component in here I'm seeing going import the sign of components. So here I'll be seeing Zainab Company Now I have created the area. I want to use this area. What? I want to link this routing my app dot model fight. So I need to export this routing. So here I'll be seeing export and I will create another constant I'll name Do rotting and I'll be using that router model package. So here I'll be single. Alper Morgan on that rather morning has four route matter and here unless I need crowds, which is a well area. Now I see what this application and I link this routing to my app dot modify. That is a root morning. So now on my app dot Modeled RTs what I'll do. I'll import another statement swelling borders a statement. Yet I'll be seeing import that at dot routing file and from the routing file import my routing package now inside the imports area. What I'll do, I will import the routing. So here I'll be saying so that I can use routing anywhere on my approaching. And the last step is on my sidebar navigation. So here I'll be using material navigation on its XDM ill. I will use the tar keyword or the third directive on That should be a route outlet. So here I'm seeing now that out No, on my link here, I'll be displaying some tax here and seeing basic. Then here I will be using Sign up. Then again, I'm seeing auto complete and instead off at sheriff I will use that outselling you are low , angular follows its in build routing for the navigation. So here I'll be using a router link and inside this out and link, I need to specify the part which we have already created. All app dot routing dot peers say, for example, toe open this basic component. We need to specify that out. A link to basic In order to open this sign up component, we need to specify the rattling for sign up here. And that should be the signing. This should be seemed on. Our ABN are dropping component and the last one I want to create a navigation for the order complete. So here I will be seeing router link and that should be article. Now if I say this application and what I'll do is instead off that tab them I need to run my material navigation on my route component. So here on route come my root Com Poland. I already assigned Apple Material Navigation selected. So now on my browser. If you will never get to this, you can see the man who is ready for you. So now if I never get to sign up, it will display the sign up. And if I never get to order complete, it will also navigate to the order complete. You can see our routing is work like in the next lecture. What I'll do is I'll create a next component that is a dashboard using, and you'll see it like 34. 34. Creating Dashboard Component: In the previous lecture, we have created routes for basic sign up and article. Now, in this lecture, I have already created part for the entire them off which we have created using a filler material. So, on my application, I have created that app dot routing file. It has the parts like it issuing here. And also I have creator my ass TML to wear those links. Basic sign up or a complete. There are table, as we have discussed in a previous lecture. Now, in this lecture, I want to create another component. And the name of the component is a dashboard. Not this dashboard will be used to create a dash war on Adam inside. So now in our application, I will open up Dr Middle again. What I'll do is I will generate a new component. So here I'll be writing in degenerate at Angela Material dashboard, and I'm giving you the name off material dashboard again. I would be registering this component inside my app. Morning. So now I feel if I press enter, it will generate a readymade component for us. So let me just quickly navigate toe this component. What it has generated for you. So here on its ATS TML, if we can see it, has generated agreed Lee out for us and that greed Lee out is consist off different cards. So what I'll do is I will end the part for the material navigation and dashboard to my sprouting. So here I want to make this dashboard as my home page. Say, for example, if you're right, nothing Dartmouth's user only like locals 4200 and the party is empty. Then go and lured my home component and the name off the home component days dashboard. So here I'll be seeing Dashboard and I'm importing the dash world. So I already created the part in my routing. We already registered this on half mortal, now another that's TML. What I'll do is I will create one more link to open my dashboard. So here what I'll do is I'll copy and paste the link and he had I'm seeing. The outer link is empty and good. A dash going Lord a dashboard. So now if I say this application and really it on my browser, we can see the dashboard in action. So now if I press on this dashboard. You can see you have the Valium. A dash more credit with you. I in the lecture of the Gridley out. I already told you about the greed, Leo. So this dashboard is using the same concept off greed. Leo, It has created a four different car for you. Like for this carnival. It is using a rose fan off and call Spun off to for this car. Three It is using respond off too and called Spun off. This is how you can use this dashboard. Create your annular application. In the next lecture, we will be talking about Syracuse, and that is most important topic component. Damn Loveman kid, in which you can create your own components. 35. 35. Introduction to CDK (Component Development Kit): So now all off you might be aware about the angular material because we have seen a lot of component in action in this course. So these antar course, we will be talking about annual materials, different components, but you might be probably new to the word Sirikit. Sirica stands for Component Development Kid. And the aim behind the city key is to provide a developers tooling for creating awesome components for the and that awesome components is a custom couple so that you can create the components yourselves. So you are the author off that component and the main Arab Mondays off. The silicate is you do not have to follow the principle off. Google's material design is your language. You can create component by your designing principle. All spa. While they are developing this come Aniela material. Daniel Material team has find something in common while they are developing this different components like date picker or a gambling man when snake. But they find this camp owner needs to open and floating panel when there is that that components are active in the same case off the tabs and the stepper component different then it to render abuse dynamically in the case off site about navigation and dialogues defined, they need to make that side about navigation active at the time users click the component, so the mail. This package is of a label globally for the user to create your own components, we will see all the packages one by one. These are the few example off common packages. First is accessibility package. It generally builds with keyboard shortcuts and the you can say accessibility to make that gamble in focus. Then second Will is by this bite. I package is used for bi directional. Say, for example, if you want to display the content left to right or right to left, this will be the useful packet. Then the turban is an overlay package that will be useful to open a floating panel on this cream That is important. This will be the package which is used to render a dynamic view like, as I said, for Tab or the step component, and the last one is the Lee Out Company, which is generally deals with users size change detection. So this all the package it it is available with the Sirikit. We can create our own component. With the help off this package in the next election, we will create our first custom component using Siri Key. In that lecture, we will create a simple component off wanted island I never use oppressed on a button that will open up and pull ole panel, in which we will be displaced. Forints. The reach of the foreign selector by user that will change over background off the phone given. See that in the next lecture. 36. 36. Font Dialog Using CDK: in this lecture, I already helped create their a new component and name it to foreign dialogue. Syndicate them. I registered this component inside of my app more do and to include this component in our project. With the routing I already created a new route for this form to dialogue. So registered a new route inside my abdo routing dot Yes, which is my parent routing. And I already created a link on my material navigation component on it sets TML. I created a basic design ready. In this design, I use a jumbotron. It's a CSS purpose only. And there I'll be using one hitter. Welcome toe angular material course and i'll be using this. But on my typescript I have created three properties is open which is a type of a flag through enforce selector form that will be deformed name which will usable select from the floating panel And this is the forms area. So I created this things on my typescript. Now if I say this application and run it on my browser, you can see it is display and output. Now what I want to do is they never user press on this front button it. We opened up the floating panel which have the list off the phones. Whatever the for end users select. That should be apply over here. This is how I want to use a CD key. In order to use this silly care I need to important packets on my app. Morning. So here on my app model what I do is I already have important this overlay model which comes with and you let Siri shy Important everything Now we are good to go with them Damn on my SD ml, What I do is I look use one and jeep template Inside this energy template I will create my floating panel. But before that I need to register a click event off this butter. So here I will be using click And on this klieg what I want to do I want to set that is open to the inverse off is open. So if it is true, I want to assign it the false value. If it is forms, I want to assign it a true value. What if And now here I will be using to attribute off that overlay packet. The first attribute is Sirikit overlay origin. Now this is the attributes which comes with that Siddiqui over live package. And here I will be using template reference wending and I will create a reference you can name it anything I'll name Toe X and I want to us and this x a reference off Siri kid or were earlier Or did you making sense? Now here inside my Engy template What I'll do first I need to connect this butter with the template. So first I'll do Sirikit connect there overly. Then inside this template I need to set two more property. I need to set its origin as well. Let's it's open property. So here I'll be setting Sirikit Good night, dear Over earlier origin and I'm seeing its origin to X now access the reference off my button and then another property I want to sat Is Sirikit connect there overly open? Not this property I'll assign is open The value of his open will be true and false. And now, inside this energy template What I lose? I used to you and I want to look through my Eric So here will be writing do. And inside that view I looked through my rescue here I'll be seeing n g four, so I'll be using Loop on Looked through the forms, Eric, which I have created on my typescript and whatever the phone users select. I want to apply its on my heading. So here I'll create a click even for it, and I'll write selected form that should be equal to item dark me and one more thing I want to apply that is open toe false. That means I want to close that family floating point about on inside this Do I want to display all the phones? So here I'll be writing item dot name. Now the last thing I need to do is here on my Jumbotron. What I'll do is I'll set the form family renting. So here I said, style dog for my family on I want to sacked it selected for So now if I say this, I already started the engines so and Breeland this application, it will be displaying this xdm. It's now if I press on this form, it will display this formed menu and whatever the formed I select, it will apply on this. Actually, if I open the panel again. And if I applied this on a deformed, that will be changed. This is how you can create your own custom component in the same way, you can also create a color dialogue using the Sirikit. 37. 37. Upgrading Existing application to angular 7.x.: Hello, everyone at the point of time when I started recording this course, will you that current version off angular Waas annular 6.0 Now angular Lee has released a new aversion off Angela on that age. Aniela Version seven. So first we need to update this project of this application to angular seven comfortably. And then we can use the new features that are a little bit version seven, whoever exist e application. So to update our application, what I'll do is I'll be using the Mina, which comes with my I d. And a year I'll write the command and Deep update. And then first I love their my Mueller's your life and my cool package. So here, all right. And Mueller's you like and cool. Now what it will do, it will have did my current Sierra and the angular poor package What This application It will take some time depend on my intimate connection and then you I will be back then it waas really do use So now we are updated of us. Rely on the court back Now it's time to obey our Angela material package. If you are leading the new application with version seven Only then you will not require toe a bit The application. So for the existing application which has a six or more comfortable ity, they are little choir to perform this step. So here I will be writing Engy again a dead and at ULA but so that we love day My annular material package worth seven again. I will be back when it is finish. So now we're done with the installation. So if I navigate my back is docked Jason and if you can see it will automatically glared over back in Dodge Asian to worship on. As you can see, my material and silly keyboard will be omitted, Worship said in the next lecture. We even start are working with the dragon drop morning. 38. 38. DragnDrop Demo List with Static Data: in the previous lecture, we have done some adjustment to a credible existing application compatible with angular version seven. Now, in this lecture, we want to implement that dragon providentially that we can assign any list item, any order you want to ask. So this is the list we want implement? He never angular British. What simplicity and seeing over time. What I are done is I was already called me this CSS and the air the movies head So one of the application what I do is I already copy in peace best guesses and I was very clear there. The area and the group voice No. One My ex Tianmen. What you do is I didn't use when you on that You used a class and we can say example list inside that view I've been used to do and that we've used a class and we can see it is an example I can't example Box. So here I write example walks and now the most important thing this list do has an attribute that cdg drop a least and this deal the boss to do has an attribute Sirikit drop or drag this drop, please and this drag discomfit the drag and drop morning. I have on very important the dragon drop. Morgan. Deliver what deal? Morning. So you can see a drag club. More do. I will really important and exported inside our morning, right? So yeah, What I do is now on my extended. I looked through the A c right, Alu, and I'm seeing that I don't all movies. Louise is the name off my head it. And here I will display James. And now if I see this application and run it on my browser, you can see you can see we have the list even became moving. But it is not updating its place to a bed. It's place or its index. We need to listen to its event in the name off the event this drop. So now back to my application here what I'll do. I'll create any event in the name of the event. Ease Sirikit Probably list drop and I will write a call back. So you will be writing drop. And as an argument I will pass one do element and then needed to dollar. Even so now on my tax cream cleared one event drop and before writing anything that top, I need to import one or two packages from at and you'll a CD. So here I've been see Importance estate and that Thank you. And inside that city who do that drag and drop more. Now we need to import the packet City care, drag and drop. So here I'll be writing drag and drop And on in the morning that quietus boom So now on my drop, we have send a dollar even the dome object as our panel meter. So here I'll be seeing Event is type off CVG drag drop at which has a string value because we are passing the meaning only, All right. And now inside the event what I use I use that white dramatic lunch so he and I would be using the more dramatic it will require t three arguments. First the name off the edge. So here I didn't see the name off the areas, these dark buoys, then second is its oil index. So you're driving saying event door even does my and I will be seeing devious index in the Tyler human it will require is event, not current index. So here I'll be seeing current index. And now if I see of this application and green and it on my job sir, you can see we can move the list and evened item will be stored at the new British. This is how you can use this dragon drop you never. In the next lecture we will be using the same list. But the life did. 39. 39. DragnDrop Demo List with Dynamic Data: from the previous lecture, we have worked with the standing data. Now, in this lecture you deal fast the data from over actual data bees. So on our application, we instead of this static data First we need to create an area which is a type off country . And then we will fetch the data from that country service. So here I'll import the service. First, I need to create the instance over here. So here and we sing country. And it is a type off country service. And also here I could hear it and add it surreal and right country era, which is a type off country and off. So now on my constrictor, I've been fast the record. So here I would be saying this dark under school, country, dark and all countries and I didn't subscribe. And here I can see the down which is a type what country and I want to us in this data my here, so name off their race country era. That is equals too big. No, on this drop human instead off this buoys area I need to write country. Yeah, rest. Everything will be the sea now. Wonder what xdm in place of this movie's area. Now I need to write the country. Yeah, And instead of this item and buying, see on the scrutiny that this country, me and I want to clear a custom or you can see a drag. Bree So here I used the image again. I'll be using the height and width. So I 202 100 and then I haven't used the source. So here will be saying source on that is equal street item dark. See, underscore Flick That is the name off my and again alternate text that I'll be using. I am not seeing the school need now. The important thing is we can use the attributes here. Silly key review, drag breed. So that will be about preview via Leah, dragging that item between create and you've what us. So now if I see of this application and really limit on my browser, you can see the list is populated with the countries. And now if I drag this country South Africa, then you can see the image. So now if I drag this India, then you can against that which this is how we can use this dragon drop