Angular & NestJS - The Modern MEAN Stack Guide | Baljeet Singh | Skillshare

Angular & NestJS - The Modern MEAN Stack Guide

Baljeet Singh, Freelance Full Stack Developer, Instruct

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (4h 30m)
    • 1. Introduction to Course

      2:16
    • 2. Introduction to NestJS

      1:27
    • 3. Introduction to Angular

      1:35
    • 4. Setup Development Environment

      2:04
    • 5. Installing Nest CLI

      1:39
    • 6. Creating New Project with Nest CLI

      0:59
    • 7. Running The Project

      3:26
    • 8. Project Structure

      6:45
    • 9. Creating First Route

      3:26
    • 10. Creating Controller

      4:45
    • 11. Creating Service

      3:39
    • 12. Making Post Request

      7:44
    • 13. Adding Interface

      2:02
    • 14. Setup OpenAPI (Swagger)

      6:27
    • 15. Working on Http Requests

      14:02
    • 16. Debugging Nest CLI Applications

      4:37
    • 17. Enabling CORS

      1:09
    • 18. Connecting to MongoDB Database

      3:22
    • 19. Adding Environment Variables

      1:51
    • 20. Adding Quotes Module

      2:47
    • 21. Adding Quotes Schema

      1:59
    • 22. Creating a Quote

      5:51
    • 23. Adding CRUD Functionality

      7:20
    • 24. Logging the Output

      4:05
    • 25. Adding Logger Middleware

      5:23
    • 26. Catching Quote Not Found Error

      2:41
    • 27. Create Quote Validation Mongoose

      6:11
    • 28. Installing Angular CLI

      1:59
    • 29. Creating New Application

      1:00
    • 30. Running the Application

      1:49
    • 31. Angular Project Structure

      6:17
    • 32. Installing Angular Material

      5:23
    • 33. Adding Material Module

      6:43
    • 34. Creating Menu

      8:16
    • 35. Working on the Home Page

      11:47
    • 36. Adding Lazy Loading Module

      7:08
    • 37. Working on Quotes Page UI

      11:47
    • 38. Displaying Multiple Quotes

      1:58
    • 39. Getting Author Initials

      2:11
    • 40. Adding Random Avatar Background

      2:48
    • 41. Introduction

      1:15
    • 42. Creating a Service

      6:27
    • 43. Displaying Data

      1:54
    • 44. Unsubscribing From Subscription

      1:36
    • 45. Using Async Pipe

      1:35
    • 46. Creating Interface

      3:09
    • 47. Using tap Operator

      1:52
    • 48. Using Environment Variables

      2:39
    • 49. Updating Home Page

      5:09
    • 50. Adding Create Quote Component

      5:42
    • 51. Working on Create Quote UI

      9:21
    • 52. Sending Post Request

      5:06
    • 53. Angular Form Validation

      7:02
    • 54. Editing a Quote

      12:29
    • 55. Deleting a Quote

      4:04
    • 56. Adding Material Snackbar

      2:44
    • 57. Connecting to Cloud MongoDB Atlas

      5:24
    • 58. Deploying NestJS to Heroku

      8:47
    • 59. Deploying Angular App to Netlify

      4:19
    • 60. Course Roundup

      0:26

About This Class

We can use Angular to create powerful frontend web applications powered by TypeScript / JavaScript. What if we can use the Angular knowledge to build backend applications also, here comes NestJS to the rescue. NestJS is heavily inspired by Angular.

Even If you don't know Angular, You should give NestJS a try. NestJS is the most popular NodeJS by github stars this year.

This course takes you from zero to published app, taking a very practice-orientated route. We'll build a quotes app throughout this course, we'll see how we can use Angular Material library, how to fetch and handle user input, how to store data and much more!

We will also see, how we can document our api with the help of Swagger.

We will touch on various topics like Architecture, Components, Navigation, User Input, CRUD, Http, CLI etc...

And since building apps is only part of the fun, you'll also learn how we can deploy the application we build from Development to Production Envrionment using Heroku, Netlify, Cloud MongoDB Atlas.

What exactly are you going to learn then?

  • NestJS Fundamentals

  • NestJS Controllers, Services

  • Using Swagger

  • Using MongoDB Compass

  • Debugging NestJS

  • CORS

  • Working with MongoDB, Mongoose

  • Create, Read, Update, Delete with MongoDB

  • Backend Validation, Logging

  • Angular Fundamentals

  • Angular CLI

  • Using Angular Schematics

  • Using Angular Material For UI

  • Responsive Layouts using Flexbox and Media Queries

  • Lazy Loading

  • Async Data

  • Observables

  • Setup Development and Production Envrionments in Angular

  • Deloy Backend app to Heroku

  • Deploy Database on Cloud MongoDB Atlas

  • Deploy FrontEnd app to Netlify

  • and much more ...

So Let's Get Started.

Transcripts

1. Introduction to Course: Hello and welcome to my coarse angler and messages the modern means to guide My name is Bill de Sing, and I am going to your instructor in this course. I am a freelance, full stack web and mobile application developer. I'm also a blogger and I Okay, ready, create YouTube videos. My personal website is Billy Sing daughter. You can follow me on pretty much every social network with the user name Mbuji. See? So the course overview what we're going to be building in the scores level of creating a course application. We will start by creating a P a with help off last year's, which is a Norge es framework, and it is heavily inspired by angular and it is based on typescript. And then we will see how we can document every p a with the help of Swagger. And this is a tool provided by the nastiest team. So we can actually use that. And then we will be able to execute our a p a inside off this rig exploded. And then we will also see how weaken deploy over application toe the Hiroko so that our application will live life on the silver we will be using mobile TV at less toe deploy our production data vis and then for the front end, we will be using angular. We will be creating a course client which will make use off the A p A. That we will create within SJs So we will be able to create new course and then we can up there the course lead the courts from the actual A p in points and at the end we will finish by uploading or deploying of a Wrangler application toe the nettle if I platform So what are some of the Preda cruisers for the scores to do to her basic understanding off extreme El as Valencia says, You need to have understanding off JavaScript and off yearly typescript. But we will cover this in this course and then you also need tohave, angler fundamentals, knowledge and this three optional. So, without further ado, let's get started 2. Introduction to NestJS: So let's talk about next year's what is next IUs. Next year's is a JavaScript back in front and free work. Nest is heavily inspired. Where Angola, the nastiest application court weighs, looks very similar to a magnet application. Also, Ness uses various angle concepts like more deals, said bases, interceptors, etcetera and many more. So we can use nest to build powerful, structured, scalable back and applications and application programming interfaces, or a PS with help off typescript. Now she s is opinion later, and this is very similar to angler in this regard, but it makes structuring our application cord very easy. So what we're going to learning about nasty is in the scores. So we will be creating a P a with help off. Nash is so we will learn about controllers and how we can use them. So we will learn more services, routing cli and how we can use C. L. A. To generate various services controllers upset right. And then we will talk about validation and we will see how we can use Middle Weird's and we will see how we can connect. So this forward David database using Mongols connector and we will document over epi A with the help of swagger and much much for 3. Introduction to Angular: So let's talk about angular. What is angular angler? Either Joe Skip Front End development Free work and it has been created and maintained by the team at Google. Angler is based on components in the sense said. We have to divide our application, toe the components and then we have to make these components interact with each other. Angling, used to build powerful front end applications and anger have source for the rapid development and the coordination with help off angular CLI, which is angry Command line interface. Angler is opinionated in the sense that we have to structure the Agra application in a specific manner, but it makes it easy to maintain the applications in the longer term. So what, we're going to learning in this course, Really. We're taking a look at how we can use components, services, routing, lazy loading, how we can lazy lord, the models or the components in of replication. And we will be taking a look at template ing and data binding, and we will see how we can use as TTP more do toe call the back and and we will see how we can use from small deal validation of the rebels and we will also see how we can use anger material for the U A off of replication, and then we will see how we can make of application responsive and much, much more. 4. Setup Development Environment: in this video, we will take a look at how we can set up our development environment on the local machine. We need to have no Js installed on over system and for the terminal we're going to using hyper and you can use any terminal or the default criminal on the Windows or Mac or Lennix . And for the editor or the coordinator, we're going to be using video studio cord. This is a free editor, and for the browser, we're going to be using chrome and then for testing the rest A p a. For the starting sections were going to be using Postman, and later we will be using swagger and then four testing over database. We really using Mogul David Compass. So you condone Lord North? Yes, by going to nor gs toward orgy and then you condone or either the LTs, which is a long term sport version or the conversion so both will work. So after you install it, you can't run. No, Tash V and NPM dash we inside off your terminal. And if you're seeing these version numbers, that means you're good to go and for the terminal or the Kamar line, I am using hyper, but you can use any Windows, twofold commode line or the make default modeling and then for the editor we're going to using with your studio cord. And here you can download the editor for your special platform. You condone it for Windows. Our you can download it for Mac OS or Linea and for the browser I am going to using Google Chrome, we will be using a tool called Postman for testing of arrest, a P A in the starting videos and then for managing our mobile. Davide Tavi is we're going to be using mongo DB Compass, But you also need to install mobility for so you can goto jogo de v dot com. So if you click on this products and then you condone or the mobile TV server, and then you will be able to use the Mongo DB server on your local machine, 5. Installing Nest CLI: So let's start by installing the NSC ally. So if you go to Nastya, start comb and then weekly conduct lamentation and then if it weaken first steps and if it's grown a bit, we can see the command to install it. CLI and P m i de g at Nastia Sleigh Seeley. So this will install messages cli globally on our local machine. Soldier stood So now first we need to make sure we have no installed on over local machine so we can type note Dash V and NPM dashi. If you are seeing somewhere she number that means story successfully installed other ways you can goto nor Gs totoro ready to install it Now let's clear the terminal here now to install Nessie alive, we can type and b m I only install then death g to install it globally and then add nest gs desh cli So if you press enter now, this will go ahead and installed nest see, like globally own over local machine. This might take some time depending upon the Internet speed, So I will be back when it finishes. So one city in store we can confirm the installation by typing nest there. Tish version. And here you can see the output. We're getting $6 $6 3 You might get a different one, but they're so okay. 6. Creating New Project with Nest CLI: to create a new project. We can go to the directory off our choice. So currently, I'm on the desktop and then we can type nest new as we're going to re creating a course application so we can name our nest app Cordes server. Okay, so now we can press enter, and then this is asking us which back in many ever you like to use. So I want to use and b m in this application. So we reflect this one, and now this will go ahead and then install the dependencies. And now we're getting successfully created product core server. And then this is also asking us to do changing the rectitude over newly created project. And then we could run the project by typing and family and start so we will do it in the next two radio. 7. Running The Project: now to run our application, we can either use this terminal window and then we continue or directly to the project. And then we can run this command. But I will be using with your studio cord. So let's go to We used to record. And then I have opened our project inside off the escort by going toe file and then open folder. And now we can go toe terminal and then we can click on New terminal and now to run of replication, weekend type and PM Done start. So here you can see this is building our project for the first time and then this is starting over server and now here we can see nest application started successfully and now to see of replication running, we can go to the browser and then we can tie local host, then 3000 port. So here we can see we're getting hello world. So now we can close over terminal here. And if you go to source and then main door ts so here we can see we are defining abduct listen and then 3000 poor. So that's why we're reading local host 3000 and the veil you're getting there. Tell a word is weaken Goto a control order TS And here we have defined the get request that is running this get hello mattered and then this. Get Halama. Third is running APP service don't get hello mattered. So if you go toe apso is And here we can see we have this get hello matter which is turning Hello world. And now if we change it to something else So let's say maybe Hello world then update. So now we can save it. And here we can see our application is still running and they figure to the browser. And then very fresh the page we conceive you're still getting the same output. The reason is we have run the command and PM Bram start. So this is just starting over server. But what we need to do is we have to run our server in the development board to see these changes when we just update of replication. So what we can do is we can close or maybe closest terminal window and then weaken type and B m run start. And here we can pass deaf. So after we run this, let it build and when it finishes So now we can see starting compilation and watch more. So that means when we update it to this will rebuild application. And now if you go to a browser and then refresh so here we can see we're getting this Hello world update. And then no, If we change it to something else, maybe let's say my name so we can add Melody sing And now I save it. So here you can see this is showing us fire chain detective starting Incremental compilation. So now if you go over browser and we refresh it So we're getting apology sinking. So during development, we will mostly used this have command. 8. Project Structure: Now, let's take a look at the project structure here so we can close the terminal here. And then we can also clothes the's open taps. And then let's claps this Explorer window. So what? Weaken ways. We have this dis folder. So this is creature. When we run and PM, Ron start or and Pemberton start deaf command from the terminal. So this is a folder that is showing us the output inside off the browser. So if he opened this, we can see all the fire this visionary so we won't actually work in this folder. But this is a folder that really pushing toe Leviev server when we want to host of replication. And next, we have this north more deuce folder. So this includes various packages that we have installed or the nest C l A has installed when we created a replication or when we actually heard the new packages. So this is a folder where this will be saved. All right, so if you go toe over packaged or Jason and then we scroll down a bit. So there we have these dependencies and then dependencies airy, our object, we can see. So here we have defined the speculators. Old nest. Seeley has added these for us. So these are the packages that we have inside off the north more juice folder. And it also includes the packages that these packages depend upon. And then we have this source folder. We will get in, tow it in a second, and then we have this test folder. So these includes files for the testing, actually, and twin testing, so we won't get into that. And then we have this get ignore folder or a clear file. So here we define all the fires that we don't want to push Strug it. So then we have prettier RC file. So this is used for actually formatting the court. And then we have ness. Eli Door, Jason. So here we have defined the language that we want to use for our project 30 years stance or typescript. And then we have collection that has nest year slash schematics. So when we installed nest es globally, so it provides us with schematics, so we will see how well you think schematics in the coming videos. And then we have defined our source root folder. So that folder where we will add more strove of record. So now we can close it. And then we have this package or Jason So inside Off package or Jason We have various properties, so we have dependencies and the dependencies. So these are installed when we create our newness project, as we have already discussed. So these are installed in north models. So dependencies are a sense shell for our application. That means we have to push the dependencies with over court when we need to. Host of application and the devil dependencies are required only when we're developing our application. And now if we school up a bit, we have various other key value pairs. So here we have name as key. So here we're defining the name off replication. And then we have version. We can define the version number here. We can also define description, author and license for our application. And then we have this very important scripts airy so we can see. We have already done a couple of Kumar's here start and start death. So to run this one, we will do and be Embrun and then this command. So you can see we have ordered on these commitments. And let's say if you want to build our application with Children and be Embrun build So this will perform this action similar to how when we don't start and started and then we have read me and then to yes, config files. So now we can go toe over social rectory and here we can see we can go toe main door ts as we have already seen, we have this app dot Listen, So that means our application is running on Port 3000. If we change it toe any other port than other application were unknown that port. So on the top, we can see we're importing nest factory from next gs slash core and then this is creating our APP model or configuring apart up models. That model is a main model in our application. So if you go to over at Memorial Lortie s, so here you can see we're reporting other services and controllers. So if you have worked with angler before, so this will look very similar. If not, we use models to open a lower court. So we have this model and then here imports Arian third, we can import other models in a replication. And here we have controllers inside of nest es controlar We define our routes and of replication. And then we have providers or we can say services and inside of services we can extract our cold. And then we can inject these services or providers inside off the controllers so that controllers can make use off the provider scored. So now if you go to app controller door ts and here we can see we have this class cold app controller and here we're defining ever get request. So that means this is going to the root because we haven't defined anything here. So this will make more sense in the coming videos. And when we make get request over route, we're calling this method called Get Hello And then we have injected our AB service here. You can see so no to youth. The service we can do ab service start, get Hello. So this is a method that is on our service. So here. So that's why the application is running and at last to have this app controller door Specter Tia's So this is the file that too useful unit testing so we won't get into that much. So all these may not make much sense if you don't have angler background, but this will become more clear as we go on in the course. 9. Creating First Route: No. Let's go ahead and create our first road so we can go toe ab controller door ts And then here we can see we already have a route here for our route part. So get we haven't defined anything here or here. So if we do something like get and then we define our part inside off Prentice's so we can add course here and then we can see get courts all right, and here we can define anything. So let's say the turn coats. So now if I save it and let's see if over server is running. So yes, it is running. And now in the browser, if we go toe local host, 3000 slash courts. So here you can see we're getting courts. And if he operated to something else, so maybe let's see, nor do actually airy. Let's change it to object. And then we had a message. Cold courts and I save it. And now if we go back to the browser, we can see we're getting this message courts. So your output for the Jason Maynard looked like this. So if North you can install the Jason, you're from Crumble store. But you will get the same message. No, the benefit off Nestea asses We can use typescript with it. So here we can see forget Hello Meditate were defining the type string So that means this is valid Only a fear turning a string So that means we can define die forever Custom brought So what we can do is we can add So let's try adding string here So here you can see we have added string type but we're getting added So that means Stipe Mesic string is not assign able to type So that means we already know for we would get this error if you don't write the right type So what we can do is no We can add message off type string So now the arable Gorby Similarly, if we also aired message off type numbers so that means we can only pass number here. So now if I had won ho that terrible go away And now if we save it and we go back to the browser and I d fresh it so we're getting the massive on here. So let's go back and replace it. Fred, this messy off courts and if you go back here and refresh it. So we're getting message boards, so this seems OK and this works, but we shouldn't we adding the root level routes toe this app control order tears instead, we should of strict or extracted toe their respective controller. So let's say for course we can create controller for courts. So then we can put all these routes inside off the courts. So in the next video, we will see how we can add controller and then at that house to it. 10. Creating Controller: Now let's go ahead and create the controller four of the courts. So let's clear the other types here, and then we can go toe over terminal window and then we can hit this new terminal window and the African type nest, generate or weaken type G. Then we can take controller, and then the controller name will re courts. And after that, we can also pass death stash on dry run just to check what fired this village in rate. But it won't actually generated this time, so we have to run the command without driver. So here we can see when we run this command this field in rate course toward controller, door to spec tortillas file and then controller, and then this will update over after model tortillas. And now I don't want to generate this testing file in this case. So what we can do is we can also pass their stash No spec. And then if you don't, this command we can see, we will generate this court control order ts file and then this will update Ah, well at memorial tortillas fire. So this looks OK. So now we can run this command without driver. And now if I run it on the left side and explorer, we can see we have this course folder and inside off this course folder. We have this course controller door TS. So now we can actually close over terminal and then inside off app controller Dirty s. We can actually comment discord out as inside. Of course, controller dot ts We can see here in the controller. We have defined this court spot so this is actually auto generator. So now what we can do is so if he aired at, get so if I press center so you can see we're importing it from next year's slash common. So you have to actually at this inside off import statement. Self, your Norges NVs scored severe scored air said automatically. So now here were no defining or adding any route. So then we can add find courts or a killer to say, get courts, and then we can return hello from courts. So actually, I have to wear Prentice's here. So now we can save it and then you can see the other is going away. So now inside of the brother. If I refresh the page we can see we're getting hello from courts. So this is worth we have return here. Hello from courts. So now what we can see is so we haven't defined this course route here. We had a clue to find it here. So that means this route chorus forms true. Ah, local host 3000 slash courts. All right. And if I end maybe course here. So that will go to sports too. Court slash course. So to confirm it, we have saved it. And inside of the brother weaken Goto courts slash courts. All right, so you can see we're getting this. Hello from course. So now if every move one course here so you can see we're getting nor defined because we don't have any route for this. So inside off our editor, we can acquit him off this because we have already defined aval route part here. And so this corresponds toe courts so they can actually move this commenters on it. And we can also close this app controller dot es because we no longer required that we can actually move it this court and then save it. And the V a discourse controller is working because inside off our APM ordered 40 years and inside the controllers airy, we have actually added this course controller. So this is automatically idea. Then regenerate our new controller. And then we have Erda import part here. So now we can close it and let's add a type for their So maybe this time we can add a string. All right? 11. Creating Service: so inside off nest, we can create a service or provider so we can expect most off our core inside of service. And then we can inject of a service inside off the controller and then we can use the service matters. So let's see how we can do that. So let's start by opening the terminal here, and then we compress this plus Aiken toe, create a new terminal now to generate a new service, weaken, type, nest G, or generate. And then we can add service and the service name in our case will be courts. And after that, we can first run it with Dr Ron toe, see the actual output. So we don't want to generate this speck file so we can again pass their stash No spec. And now we can press enter. And here we can see the fire Sis village in rate. And now we can under command without driving. So here we can see inside off our courts. Fulla, we have this court service, So if we click on that currently this is empty. So we have this injectable decorator here, so that means we can inject this service inside off the controller. So if you go to add more Jill Dougherty s So we have this providers Ari, in here we have added our courts service and absolutists waas by default. So we can actually close this terminal now. And no, let's close f model and maybe let's start by creating a new matter. So let's say get goods on it and then this will itr This will returned all the courts on it and also we can define the type here. So that's a string, because this is returning the string and now inside off controller. What we can do is we can inject this service. So here what we can do is we can define a constructor, and here we can define ah, private. And then we can add our service name. So let's say cords service. All right, so this is the name that we're going to using and at here we can define our courts service . So this we need to import from door slash course store service on the same folder here and here we can add double curly braces, so no, if you save it. And now we have referenced toe this court service so What we can do is we can return this door court service. So if a air dot so you can see all the matters that we define inside off the course service so we can select get courts. And now I can save it. And I have already defined string here, so this should work. And now if I go back to our my browser and now if I refresh it so you can see this return all the course and that is coming from core service tortillas. And if I operated so maybe something like update and I refresh and here we can see this will turn all the courts, then update. 12. Making Post Request: Now let's start by adding a post requesting a replication. So we will go to the courts controller door TS. And in here we can add post a quitter. So here we're getting the prompt for auto imports. So we will press, enter. And this will add this post from nastya slash Cottman. And now we can add parentheses here and here we can add posed court. Or maybe let's create court. All right. And now we can. You'll sis Matt there to this will create our new coat. All right. And let's a type called Stinky. No, we cannot make boss Tree cursed through brother only. So we have to use a specific application. So I will be using a client Gold postman So inside of postman. So this arrest ap a client so we can click on this plus icon and let's first test, I will get regressed. So if we add as to to be local host 3000 slash Cordes and I hit send here in the response we can see we're getting this village turn all the courts and if I click on this request, drop down, we can select any request. So if Italy composed. And this is the same mural that we want to use. And now I can hit Send. So here we're getting this field create a new court. So this is the same output that we have here. So, no, I actually want to send the body off the request. So what? We can do it inside of body, we can select raw, and here we can select application slash Jason, and then we can send the Jason data. So I want to send Daido so this will be the core tighter so that I can add a new court. The story off life is quicker than the Linkov and I. All right, So the author off this court is Jimmy Hendrix. All right, so I want to send this autumn and Dider. So now if I hit send, you can see we're still getting this will create a new court. So, no, we need a V toe, get this data or intercept this data in another application. So the way we do it inside off nest is we create something called GTO data transfer object , and we do it with help off a body decorator. So we want to add a body here. And after that, we can pass, create court the deal. And here we have toe inject, create goat DiDio because we haven't already defined this. So that's why we're getting this red line. So let's first create our DDO. So inside off courts, we can create a new file. So we will add it inside off duty or folder and let's create, I could hear. Did you create court door de todo RTs? All right. And here we can add export callus create good. I need you. And then we can add our title and auto property here so we can add read only title. So this will be off type string, and then we can add read only author. So that will also be off type string. And now we can save it. And in here we can again, let's try yet in create goat video. So here we can see we're getting this prompt for adding on imports statements so we can flick it. And here we conceive you're reading this import. All right, So know what we can do is we can return this, uh, cleared court. Did you? Okay, so maybe let's save it. But now you can see we're getting a better. So maybe let's aired type any for now. So this error will go away. And now inside of the postman, We're already sending title at author. And if I hit send, you can see we're getting back title and the author. So now this is up to us how we want to display their response. So if you go back to our editor, we can Maybe let's say we only want to show the title. So what we can do is we can use templates, strings, and then dollar sign. Do you get called GTO dot title? All right, so now we can save it. So this will only show that title. Where did we send our title at Outer boat. So if I send it, you can see we're getting only the title here. All right. We can also opt it like so. Maybe so. If you want to say create goat video dot Arthur has it. Doesn't this court? All right, so here we have Where e So now we can press enter. So inside a postman, we can send it. So we're getting to me and drinks Hazard in the story off life is good command of ink off and I So there's how we interceptor data from the front. And so now we can go to our agitator and then we can extract this scored toe over service. So now what we can do is we can do in third, of course, service we can add create. Good. All right, so this feel except our So here we can add goat. So this will be off type a court interferes. But for now, let's add any here and then we can return so we can close this And here we can actually go put this court Maybe let's there doesn't it from here. And then instead of create cardio, we can add Got here. All right, so now here we can return this dort court service dot Create court and then we have to add create goaded you here So now we can save it And no, if it on the application again So maybe let's it send here so you can see we're getting the same. So let's straight, Janey, something here. So maybe the author name. So there said update here. So again, same old or so. Now we're getting operate here, so there's remove it. It said so that seems OK 13. Adding Interface: so here we can see inside off our create coat mattered were defining the type Annie and similarly here for our court were defining the type any. So they see note recommend er So what we need to do is we have to define the crack type. So let's first gender to a statement here so we can clear the exact court here. And no, if you go back to the postman and then we send the post request, we can see we're getting that title and Outer Beck. And now what we can do is we can define interface and start off this any and then we can add the interface here. So let's create a new file inside off course. So this should be inside in professes slash court dog interface Doherty years. And here we can create a new interface export interface and then the interface name, and I will name it court. So we will define couple of properties. So the 1st 1 is I d. So this is optional. And then this will be off type Shane and the next one is title. This will again be off type string, and the last one is auto off type string. So now we can save it and then we can go toe course controller dot ds and here instead of any we can add coat. So if I press center here, this will or to import the interface here and similarly, we can go to court service 30 years and this will be off type goat, so no, we can save it. And now we can once again send the post request and see if everything is working so we can send it. So yes, we're getting getting the title and daughter back. 14. Setup OpenAPI (Swagger): in this video, we will take a look at how we can add swagger, which is a peer documentation toe inside off our nest. Yes, application. So we can start off by opening the terminal and then we can close of replication and then we can first install couple of packages. So let's first clearly termina and then we can install at last year's slash swagger and then we need with stalls. Tiger, you are express Now after it is told we can close over terminal and then we can go to Maine . Daughter Yes. And in here we can define options for this vagary p a. So here we can married new document builders. So first we need to import document builder from at next year s slice swagger. And then we can use thes matters like we can set the title for over a p a. So in our case, that will be course a b A, and then we can add description. So that will records AP a description and next week unset devotion for over a p a. So maybe, let's say a needle 0.1, and we can add X for over a p a so that will be golds. And at last weekend pass, they build method. And now we have to create the document from this vigor model. So we can do goes document three good more deal dot create document. And in here we can pass over app and then the options. And at last we can set up over a p a. We can add. The place of that will be the part where we can view over straggly way and next week and pass the app and then the document. So no, we can save it and left started server again so we can type and b m run. Start there. So sorry, ovaries running again so we can go to the browser and then we can go to local host 3000. Then we can go toe slash ap a And in here we can see the trigger, a period of commendation tool and at the bottom, we can see all the routes that we have currently defined. So if I click on that, get courts and then we can click on, try it out and then execute. And in the response body, we can see we're getting the same output that we were seeing in the browser so similarly free. Copy this. U R l and we pasted here. So this is the same output. Also, if it's gold on a bit, we have this post courts and here we can do try it out. And then we can define our detail or the values here, Solar said a title property. So maybe life is like Islam, and then we can, specially for your alter. So someone and then we can execute it. And at the bottom we can see the response. 40. We're getting that title and outer back. So from now you can either use this regularly way or you can use postman. They both will work just fine. And now if you scroll up a bit here, we can see we have the stack gold courts, but over a p A showing in the fall tech. So to add the AP inside, of course, what we can do is we can go toe over editor, so let's minimize it, and then we can go to our controller. So let's close the other types, and here we can add our decorator gold at a P a use tags. We need to import it from next year. Slash swagger. And then he had weakened. If I never tag, so that will be courts. So now if I save it and then I re fresh it here, we can see we're getting our courts get and the Post mattered inside off the course style. Similarly, if we go to ever create cored 80 immortal, we're not seeing anything here. So we also have to define the AP moral property inside off the DDO so we can go to a predator and then we can click on Create Go, did you hear? And for the title we can add a P mortal property and similarly, we can add it for the author. So now if you save it and I go back to the browser and I refresh it and now if I click on create go DiDio, we can see the title and daughter property here also, if it leak on post courts, we can also see our day tier properties here 15. Working on Http Requests: in this video we will take a located How we can air remaining Sud matters inside off the course controller So we will start by getting the single court. So for that we can make a get request So we let get and then we can pass the perimeter or the dynamic I d here so I can be anything. So if we add i d here. So that means the Ural will be local host 3000 slash you goats, then any dynamic I d feel so what? We can do it. So this can we want to three All right. And next What we can do is we can add a mattered solar said get caught. And in that we can add up what I am loquitur all right. And after that we have to specify the property, so I will end. But I am here, all right. And now we can access this very evil solar's first return This idea. So what we can do is we can add this template string and here we can add program dot id So preamble contain all the dynamic ideas that we will adhere so we can access it. Why program dot and in dynamic field. So that is I t here. All right, So now if you save it and then we go back to the browser so we can access our epi a like courts slash maybe 11 So here you can see we're getting 11 And if I air something like 123 so you will get 123 And now we can also test it with help off this figure. Us. So we will go to slash ap a and in here we will get that new route. Goats slash. They're dynamic I d. So if Italy contrite out so we can see we don't have any feel toe put that dynamic. I de Soto add that what we can do is we can use another decorators that is specific to the swaggered you it so we can add at a p a implicit premise. All right. And then we have to pass the name off. Our dynamic properties of that is I d. Never case. So now we can actually save it. Soldiers remove that comment. All right, so now here we can save it. And if you go back to the browser and I refresh the page once again. So you can see if you click on that get course we already have that I d feel here. So now, effectively contrite out and we add any dynamic ideas. So let's say one toe area, click on execute and I scroll down a bit in the responsibility. You can see we're getting that well, value or it and they know what we can do is we can go to our code editor. And now, instead of getting the entire object here, what we can do is we can pass the I d field or the dynamic feel here or the property, and then we can I d here. So that way we can just access the i d. So let's say maybe court, I d. Okay, so now we don't have to go through that program Daut than the property here. So we can just use it like this. So now we can save it. And in here we can refresh the page and here we can click on, try it out and let's add maybe one toe or 132 Maybe so if I click on execute here If you scroll down, we're getting caught. 132 Now let's extract the court to our service. So what we can do is we can go toe over court, serviced RTs and in here, maybe. Let's copy discord, and then we can change it. Toe get goat, and then we will pass the i d. Here. So this wilder turned the string for now. So what we can do is we will return this one. So here we can access it way core service don't get caught. And then we will pass the I d. And, uh then this will actually return that same idea. Okay, so here we can add idea off type, maybe number. So now we can save it here. So this seems OK. And now let's be fresh it once again. So I think we don't need to refresh summary their side 11 and execute so you can see we're still getting the response. Now let's refit to the court a little bit. So instead of just returning their string, we will add the actual course here. So maybe we'll hard coded for now. So let's aired property cold courts, and let's assign it an airy So I already have a couple off courts defined in the area, so I will just copy paste it. All right, So I can know Save it, and this course will be off type court. So the interface that we define and then we can say quote, Eddie. So here we can see we're getting an error code idea. Should we string? So if we go to our interface, we can see we have defined our idea, the string. So what we can do is we can actually converted to string for no and like this. So now the is going away. So now what we can do is and start off returning this favorite on all the courts so we can actually return our core. So this will with this door courts. So now we're getting the error because we had no longer returning the string here, So this will be off type. Good, Eddie. All right. And now if we go toe over, controller were again getting louder because again, we have to change the type here to court every all right. And similarly, we can change, ever get cold here. So instead of returning that code I d. So let's actually changing toe, maybe string here. And then here we can use this note courts don't find, and then that will be caught. And we can use air operator or at a function here, and then we can say court dot i d two political toe the I d that were passing here, all right, And now we can save it. So here we're getting type according not assign able to type string because we're adding string here. So this should accurate return the court, all right. And now we can save it. And similarly, we have to change the para meters. So we actually haven't had any type here, so lopsided. This will be off type coat. Okay, so now we can save it. And now, if you take a look at inside of the browser, we can go to get courts and then try it out and let's executed so you can see we're getting all the course here. And if I goto maybe get cold, I d. So let's pass it. Idea off one. So I executed. You can see we're getting the first court. And if we had do here, we're getting the second court here. This one. All right. Now, let's there the matters for update and deleting a court. So what we can do is in here. Begin ad put, Decorator. So this will accept, and I d So this will, with the idea of the court that we want to update, and then we can say update court. All right, so this feel also accept. Ah, did you so we can add update, court lady. Also, this really off type create court video. So that will be similar. And then we will certain court in other case. All right. And then here. What we can do is so we can return this not course service, not update coat. And we want to a separate Opie limiters. So the 1st 1 will be i d. And the 2nd 1 will be update court. Did you? We haven't added the Prem for 80 years. Alerts added. So that will be Baram. And then I d All right, so we have two. Where'd that got here? So now we can save it. So now let's define over update. Goat mattered here inside of the service. So that will be update court So this will accept idea off type string and then update court need to you so we can actually name it anything. And then what? We can do ways so we can add Let go tickle too. This door codes don't find then court. We can use our function here. Go dot i d triple ical Dwight d. So we're finding over court, all right? And then what? Begin to ways. So the name should be deferred. So let's make it data. All right? Now, to update the core of what we can do is we can add data dot title equal to so update go de todo tighter. So if it is defined, we can use this. All right. Otherwise, we will use data door tighter. All right, so now we can save it, and similarly, we can cope it, and then we can change it to our author or it so we can actually make this const. And then we can turn our data. All right, so now we can save it. And now if you go back to the brother and refresh the page, we conceive, we have this party quest for the I d. And in here this Villa Sepp title and author. So what we can do is are you think I have to wear that program first so we can add AP I implicit Bram for that name, then I d so no, we can save it. So now we fairly fresh the paid here, we can see if I click on, try it out. We can never ideas. So if I had first court here and let's air the Tyto, my first court and then let's note past the outer so they should update the title and then keep the outer. So if I executed, you can see we're getting response back. I d could. One title is my first court and if you go back here to the service, we can see So this wasa title and then we uploaded it. But the authenticity remains. John Keats. And now let's add a matter for the leading a coat so we can go to a recourse controller. And here we can add the lead decorator and this will accept our i d off the court that we want to leave and then we can Adam it cold. The lead court and in here we can add our but I am. All right, so this I can add, I d All right, so this can actually return this door core service door, the lead coat, and then we will let the idea here. So now we can save it, and then we have to create a method for the living in court. So in the service, what we can do is we can add delete court, then i d off type string. All right, so for now, let's return the code that we want to delete. All right, so this will actually return the type coat, and we should also update the update, go to court. All right. And if you go to the controller back, uh, we can actually hurt Got here. All right, so now we can save it. And let's add that a p a implicit baram a here inside off that delete request also. So now we can save it, actually, and we can go back to the browser and be fresh this page. And now we can close this put request and we want to make deluded request and click on, try it out, and let's air our I D one. So we executed. So we're getting the first gold back. So currently the cedar response we're expecting, but in a real application, when we use the database, we would like to remove this good. 16. Debugging Nest CLI Applications: in this video we will take a look at how we can debug our nasty s application inside via SCO. So if we take a look at this regular you inside off the browser and we click on get courts and then any I d. So if you press one here and we executed So we're getting this sports back, right? So if I add any different I d that we don't have inside the court and we click execute, you can see we're not getting any response back. Soto debug is what we can do is weaken. Gotovina scored. And here we can go to our debug Aiken. And here we can select this setting and click. Oh, nor Gs. Alright. And in here we can add a new configuration that is Norges attached to process. All right, so this the confusion that we have added So the type is no. The request is off type attach and then the name that we will see here that is that we re actually when we save it or save it actually so we will get attached by process I d. And then this will show all the different north processes when we click on that and then we have select the process that we want to debug. So let's actually move their other configuration that is added by default. So now we can save it. And now here we can select a gradual process I d if it is not already selected and then weaken great. Gone start debugging. And then we can select the North process that we're going to debug. So if we take a look at the 1st 1 So this is a one that is running with the word nasty s application. So we want to develop this form. So let's click Konate. All right, so no, our be burger is a test, so you can see there Tool were at the top. We can pause it. We can either step over the court, step into the gold step boat, and they restarted the burger and or disconnected. So now what we can do is let's close this our long Jason and let's close this other ones. So maybe we can add a break quite here inside. They get good service matter for it. And now if you go back to the browser and I hit 123 again and a click execute. You can see we're getting the loading here and then our d burger is a test to it. And then it hit that break point When we click execute and no, we can see that old The properties are very evil So we can see the i d here so we can see 123 So we can vote for the properties of medieval so we can see the call stack. So here and the border, we can see the break points. All right. And now, if I click or Khobar over this I d. We can see we're getting the idea. Von 23 from the request. And then we have this course city, which has only three course so defined by 0123 here. So we have caught with I d 12 and three. And here we can see if you over over this fiery we have this 123 So we have come Maybe comparing the string 123 with just one or two or three. So that means we don't have idea with the court. 123 So that is how you can I d work with via scored. So you can also step over, step into step out off it. We won't get into that. So after you re finished, you can click, actually continue here, and then if he here, click here, then we can see we're getting the response So we don't have that idea. So that's why we're not getting anything. So if I click here and change it to one and I executed so again, our break point is hit. And now we can continue. All right. And in here we can see the response. And once you're finished with everything, you can break, disconnect, and if required, you can remove the brake parts also. All right, so this is how you can do the debugging inside the B s court. 17. Enabling CORS: if you go to Nasty s website documentation and then we can click on techniques and here we can click on security. And here we can see we have this course go stands for gross original soul sharing. So here you can see cause is a mechanism that allows the resources Toby requested from another domain. This is very going practice in the a p a and the front and application. So a peer lives on different server and then front and application lives on different server. So to allow the front and application toe make requests toe the A P s over, we need to unable this course. So this is very easy in nest. So let's see how we can do that. So inside, off over coordinator, we can go toe main door, Tietz, And in here we can add a dog and never, of course. So this is the only statement that we need to write to enable gross original. So sharing in other applications 18. Connecting to MongoDB Database: in this section, we will start working on the back end off of replication, so we will be using Mongo TV. So what we can do is inside off our coordinator. We can open terminal and let's close server for now and let's clear it. And then we can install the dependencies first. So we will install Mongoose so we can win PM and stall at next year's slash mongoose. So we want to a solid as a dependency. And then we want to install Mongoose also. All right, so this will knowest all these dependencies. So once this is finished weekend than the server again. So in Pembaruan start deaf. So the server is running in watch board again and now we can close over terminal. And maybe let's close these open files and let's collapse Explorer. And now we can go toe our source and then we can go toe at more do. And in here we can import mongrels model. So first we need to make sure we import it at the top also, So import from nest gs slash mongoose All right, so we want to import more go smaller from here. But I know that it is. Go on And then we can add dot for the route because this is the route model in our application. So we will air for root matter here and in here we can actually add the string to our more war Davies over as I have already installed Mangala Devi on my local machine and I started to server. So what we can do is we can connect to it by typing mongo db then slash local host slash court. So course will, with the name off that database So now we can actually save it. And now if I open the door Manila here, you can see we're getting mongoose mortal dependencies initialized. So here we're getting an edit call are never to connect to the database. So I think I have forgotten l Here's this should be local host. So now we should be good to go. And in here we're getting nest application. Start disgracefully And in here we're getting mongoose mortal dependencies Initial light. So we're getting a warning here and then toe get rid of this morning. We can use this object cold Use new your parcel. So maybe let's add it So here we can add a new object. Use new. You went in Parsa and we want to add through here. So now we can save it. So my editor has are 24 matter to the court for me. So no, If I scroll down a bit, we conceive were no longer getting this error so and our connection toe the Mangala Devi server is successful. 19. Adding Environment Variables: so we shouldn't be adding database Urals in the plain sight. So what we can do instead is we can extract this Yura toe the environmental variables, and then we can use this environment variables here. So what we can do is we can actually collapses, explore, and let's create our new foil called E N V. And in here we can define a very wilder see mongo. You are I. And then we can define our very ever so north fel so we can actually copy this string, and then we can paste it here. All right. And now, to access these variables, we have to use a package. So first we need to install it so we can run and pm his stole dot e n v. So this is a picket that we're going to be using to maybe access naughty and we file. So once this is told, we can go toe main door ts so here we can import Dougherty envy slash gone fig. All right, so now we can save it. And now excesses manga you are. What we can use is we can copy this And in the airport, all we can do close is Dottie envy dot Mobile. You are. All right. So now if you save it and let's close this terminal, all right? And here we can see we're still connected. Toe the manga. Smallville. So that is successful. 20. Adding Quotes Module: in this video, we will take a look at how we can extract our course. Controller and services toe the course more. Do so complete physical locate our APP model 40 years We're adding controller for courts and services here. So what we can do is we can actually create our new, more do cold courts. And then we can import these services there. And then we can actually import the entire course model in this import Seri. So let's see how we can do that. So if I create a new terminal window and I can the nest generate or g for short, more do and then cold sold its first right with Dryland so far on it, I will get this source courts and then courts more little tortillas. And then this will operate the dependency automatically inside off model. All right, so now they can it without trader so that this will create the course model. So once this is creator so we can kill this terminal. All right, so, inside off our course, we have the score Smallville tortillas or it. So currently, this empty. So we will add courts controller and service here in a second. And if you go to over app more deals or t s, we can see we have this course model inside off the imports area. So now what we can do is we can actually remove course controller and core service from here. All right. And let's remove these imports statements also. So, no, we can save it, so the application will break now. All right. But what we can do is we can go toe course more deal dot es and inside off this at more do decorated, we can add controllers. So here we can add course controller. All right. And then we can add provider ceri. And here we can define courts service. All right, so now we can save it, and everything should work the same way before, So next application started successfully. So maybe if I save it and go back to the browser. So let's close that and maybe lives refresh it, man. Medically couldn't get courts try, tote and execute. So we're still getting the gorse Maxwell things working as before 21. Adding Quotes Schema: So now we will start by working on the schema for our courts that we need to store in the database. So what we can do is inside our course folder, we can create a new file. So this will be under Seimas and then we can create court ought schema dot es And here we can first start by importing Mongol so we can add import start as Mang goes from bongos. So now we get reference Mongols by just writing this mongrels, keyword or it And next we can export. Ah constant goal Gord Schema. Alright. And in here we can add new mongoose dot schema And here we can define our object so we can add data. This should be off type string and then we can define our daughter. They should also also be off type string. All right, so now we can save it and let's closed steps and no inside off our course Morial Door Dia's we Canaria imports so we can add imports airy and in here we can add mongoose more do And now we want to use for feature matter because this is northern route model Solar said for feature and then here we can heard Harry. And then let's create off here. So the name we want to keep your singular. So this will be converted toe course inside the TV Solar said schema and the schema. We want to use his court schema. All right. And in here, let's aired, uh, coma at the end, so no other save it. 22. Creating a Quote: Now that we have defined the schema forever court, we can go ahead and then inject the court mortal inside off course service. So in here we can create a constructor, and then we can add drive it. Indeed, only every court mortal, And then we want weird model off type coat. All right, so we need to import more so we can import it from mongrels. All right, so this can be like this, so no, we can save it. We also have to add inject model here. This can be off type coat. All right, this is a quiet, because this is don't actually the part off nest code. So there. So we have to add inject model here and now we can actually remove this court's through these aesthetic and then what we can do ways we can return this note. Court mortal dot Find note. Execute. All right, so we're getting these others there, So a killer escape the course variable for now, so we will revert that. And now we can change this to goat. Mortal Lord, find or execute. All right. So now if I save it and I go back to the browser and I refresh this a p a. And likely couldn't get court. So this should get the data from the mongo db server so perfectly can try it out. And I execute. And then a school on a bit, you conceive, you're getting the response empty because currently, we don't have any item inside off the date of is. So let's start by working on the create court matter first. So what we can do is let's create a constant gold new court, and then we can you up this stored court mortal, and then we can pass in court here. So this is a court were passing to the model, and then we can return new court dot sale. All right. And we can also add their turn here, so this should return a promise off type court. All right, so now we can save it. And now if you go back to course, Controller daughter, Yes. So we can see we're getting another promise. Court is missing the falling properties. So here, instead of court, we can add promise off type coat. All right, so now we can save it, and let's try creating a new court. So we can actually refresh the FBI, and then we can go to post courts and right out. So here we can add a court. My life is my message. And this is by Mahatma Gandhi, all right, and now we can hit. Execute. All right, So in the response body, we can see of your getting our newly created court from the Mongol DVD. It's obvious. And then we're getting that object tidying that is saved inside off the mobile DVD activities. We can also confirmed by going toe among would TV compass. So that is application that we can use to connect toe more divided of is. So when you open it, you can click connect. So once it is connected on the left hand side, you can see the database or all the services that are available. So we have created that courts. So this is great. It automatically when we created a new court. So here we have this course collection and in here we have this first court. My life is my message. So let's head a couple off more courts so we can go toe over editor and inside of the service we can actually copy this title, and then we can paste it here. We can also go up in this water, and now it executes. So this will create a psych uncalled for us. And let's add one more, this one. So we can based the title here. And there's head the author also So we can best it and executed. All right. And now we figured, Whoever more go Devi compass. And then I hit. Refresh. You can see all three course here. And also, if you go to our swagger a p a And here in the get requests, we can click on, try it out and execute. So we have already at that court. So here we're again seeing these three course. 23. Adding CRUD Functionality: So let's start working on the remaining request. So what we can do is let's start by going toe the service. So let's closing the tabs here and inside off service. Let's first work on Get coat. So here, what we can do is so here we condone this door court model dot fine by I d. And then we can pass the I d and then execute. So this will give us the single coat. Eso this should return a promise. So let's use a think of it here. So I think, and then of it, and then this will become promise court s. So I think we can. The effect of this also is think of it and then this return a promise off type coat every so if you're new to a sink of it, then do add a sink before the function. This will always certain a promise, and then you can add of it before any statements. So this will wait for their statement to execute before going further and similarly forever create court. We can add a sink and then of a tear. Uh, this should be a bit so no, we can save it and four of adopted court matter, we can add his sink, and then we can actually remove this court. And then we can return the Stort court mortal don't find by i d and update. So this expect i d and then the update data. So that will be update goat, did you? And at last we can turn new equal to drew. So they should return us. They modified objects. So here we can add actually of it. And then this Villager from is off type court All right. And at last for the lead court. We can heard they think then we can add of it this dot court more than not fine by i d and remove. So this will expect the i d that we want to remove. And then this very turn our promise so we can add it. Promise off type any here and no over services complete. And now we can get rid off this course airy. We no longer require that because we're using the date of this. All right. And now we can go to course controller and their effect River court. So here this will be promise off type coterie. So this will be promise off type court and this feel very promise off type any and again, this will be promise off type court. Okay, so now there is no adage. And now let's test over FBI so we can go toe our swagger ap explorer. And let's start by creating a new court. So we conflict right out. And for the Titan, let's add a new court. Life is a question and hope be live. It is our answer and for the altar. So that is Gary Geller. Okay, And here we can click execute, And here we can see of a new court is greater. And if you go toe the mongo, Davey compass and I hit Refresh, you can see the new court is greater here. All right. And next we can hit this, get courts and try it out. So that should give us all the courts. Okay, so here we can see all the course that we currently have inside off the date of this. And next, we can actually copy this court or i d. And here inside, off get goat. I d. I can pass this idee and then hit Execute eso We're getting some adder here. So we're getting status Score 500. So let's go back to the cold and let's see what that it is. So here we are using e excessively, should we e x e c And now if you go back and I hit execute. So we're getting failed to fetch. Maybe we need to refresh the page. And now, Vic, click on, try it out, and I hit I d and execute. So, yes, you can see the i d here and next wrote that we want to use is put so we can dry it out. And here's we can first past the I d And then we can add the opposite statements here. So this will update our new court that we have better so we can edge. Uh, this is the best. Good. All right, So if we don't pass out s o, they should only update the title. And now, if I hit, execute at the bottom, you can see if you're getting this is desk code. But the author is still the same. So that is OK. And now if you go back here and I hit, get courts and execute so you can see we're getting This is test court that is updated one and then the other is still the same. And at last, what we can do is we can go to delete court and here we have to add the i. D. So this idea that we want to delete So I hit, execute, and then you can see the response body off the court that is deleted. And now if I school up and I hit execute for the get court, This should not include that code that we have just a later. So here you can see the three course and start off four. And also, if we go to Mongolia, become pus and I hit Refresh here so you can see currently we have three ID's or three course. 24. Logging the Output: in this section, we will take a look at how we can add logging and validation in a replication. So let's start by how we can look some output toe the council when we hit our course wrote . So if you go to courts controller door TS and inside the get course mattered We can edge gone soul dot love uh, new Gore's AP a request we can actually, anything here. So for now, we are adding new course AP request. So we're getting an air here, So this is actually due to my editor, so this will actually work. So now if you go back to your browser and then we hit the courts and point and then we go back to the editor and re open the terminal here in the bottom, you can see we're getting the new course AP A request. So this is very helpful if you want to output your very able values or whatever you're getting from the server, toe the council. All right. And now let's say if you again, I want to show the same council message when we goto the single course wrote, you can copy this council log statement And now if you go back to hours browser and I hit refresh here. And then I opened this court's slash their single I d. And I go back to my agitated weaken TV air getting to console log statements. Now this will work, but nest provides us with a better class, so we can actually use longer instead off console. So now we have to import longer from next rias slash common from here. All right, and then the other actually goes of a And here we can also change it to logger dot log All right. And now, if I save it so we're not getting any error inside the editor And then if we hit over single core salt and then we go back to over editor at the border, we can see if you're getting the better Messi when this request has happened. And what were the log Messy and how much time did it take? And similarly, if they hit the course throat and then we can also see we're getting the same outward. And now it also has very Southern Mr. So We can use what? So let's save it. And now if I make the regressed to the courts. So if I hit three fish here and then I go back to the brother, we can see. So this is slightly different. Previously for that log message This was green, and now this is something similar to yellow, and we can also change it toe the bug. So no, we can save it. And then in the browser. If I hit refresh and I go back to the editor, we can see now this is a different color right solar exchanged toe log and save it. And now let's say we want to show that log message whenever we hit any a p a four course or any court slash maybe single go tidy or any court route. So what we have to do is we have to either copy paste these log messages in African dollar matter, or we can use something gold middleware. So in the next video we will see how we can use middleware toe, add the log messages whenever we hit the course wrote or any course wrote 25. Adding Logger Middleware: in the studio, we will take a look. Eight how we can air middleware to streamline about process off showing this log Mesic or new course AP requests for each request we make toe the courts epi a so that start very moving this log messages And then we will go ahead and click on this new terminal window and then we will create a new middle of air. So we would write nest, generate middle of ear and then we will generate a middle were cold logger. So let's run it with dried and first so that it will show us the fires this building rate so it will create our logger middleware inside off the source directory. So what I want to do is I don't want that spec files so we can hair dye stash no spec here . And I also want to air the logo toe shared and then middle. Where's directory? So now if I press enter here, we can see. So we will get Logue Adored middleweight. RTs fire inside off source shared middle years. All right, so this seems okay. So now we can remove that dry run flag and then run this command, So this will create our longer middleware for us. So inside off this shared folder, we have this middle wears and then we have local brittle. So let's remove this terminal. And now we can also close it and inside off this use method we can add of our longer service or then we can have toe import their declaration. So now we can save it. So for around this is what we need. Toe print. When we hit any course paid out and the next step is we can go toe over at Modeled or TS file. And here we have to configure our middle veil. So first we need to implement next more do so we need to import it from Nastia slash common . And after that we can add gonna figure it. And in here consumer, which will be off type middleware consumer college and then we can aired consumer dot apply . Then we have to add over longer middle veil that we have added longer middle there and at the top, you can see we are importing it from shared middle of years and then logo dot movie and next we have to wear for routes. So here we have to define their hours were we want to use this model of here as we have entered her house forever courts so we can use it there. And now if you go back to the browser and I hit, that course wrote And now I go back to the ejector and let's open a terminal. So here you can see we're getting this new course a prayer request. So to confirm it, we can actually change it. So let's save it. And now, inside the brother, we can hit very fresh again. And then if you go back to DeRita, we can see that caught a pair quest. And similarly, if we go toe that single court and then we go back to a vote agita, we're getting that course ap A request. And now you can save your moving that logo statement from our controller. And we're just using that logger middleware. We can also lower with AP Ural inside off that local statement. So what begin do is we can actually aired the Ural for our a p a inside off that Logan statement. So what we can do is we can pass request dot Base, you are all here. All right. And no, if I save it and then I make the request to the courts and I go back to the editor, we can see we're making the request. Courts ap request to that coats. So let's maybe edge calling here, all right. And similarly, if we go toe the single court and then we go here, we are still seeing that slash course served. God, this is the best, Ural. So what we have to do is to get the complete your all we will at court dot Europe. So they should show the entire you're in here. So now if I save it And here if I hit the fish once again and in here, we're getting code slash single coat i d. So that is how you can air middle wears inside off the rest years 26. Catching Quote Not Found Error: in this video we will take a look at how we can catch the other for the single court. North fouled many whenever we make a request or the get request to an A p a and we passed certain court i d. And for that court idea if the court is not available inside off the data vis, we want to show the different messy called court not found. So currently, if we take a look at the behaviour inside off the brother, if you go toe court slash single co tidy. So if the court is available, we're getting this court I d here. So let's say if we aired some I d. For that, the court is not a very well, we're getting the state of school 500 and then internal server. So that correspond. So there is something wrong with the for service, but we want to show a mess. Ical court north found, and then for a four letter. So to do that what? We can do it inside off our cord. Editor. So we're getting out of here. So that is due to that $500. So this will go over in a second. So let's close terminal here. And then we will go to a world court serviced RTs, and let's close the other types also and long. What we can do is we can wrap our get coat function inside that I catch block. All right, So know what we can do is we Can I try? And then we can add a catch at it. All right. So inside, off dry began her turn that of it for that court model, and we're passing the tidy. So if it trades available, so this will return. Otherwise, we want to throw an exception, So that will be through new s GDP exception. So we have to imported from Nastya slash common and the first pyramid. It is that response that message we want to send. So that is got not found in my kids. So you can add any other messi. And then the 2nd 1 is we want wear that duty free status so we can address http status dot and we won't wear that north phone one. Okay, so now we can save it. And now if I go back to the browser and if I open the court that is available is this issue of the court. And then if I at the court I d for that, the court is not available. So there, in that case, we're getting that for four data and the messages court not found. 27. Create Quote Validation Mongoose: in this video, we will take a look at how we can add validation toe over Mongol schema while creating a coat. So if we go toe over, scheme us and then go door scheme and or ts So here we have justifying title should be off type strength. So what we can do is we can actually start an object here and then make it type sting here and now we can add other properties, for example, one is required so we can make it true. All right. And we have to add calmer toe. And also and similarly, we can do the same thing for our author. So type can be string again and required is true. So for every court we want to enter both title and watery fun off them is missing. We want to throw an error. All right, so this is required. And what else we can do is instead of just passing that bullion, But what we can do is we can wrap it inside Larry for the first perimeter. We want to make it so let's sit true, because this is required. And for the next perimeter, we can add that statement or the messy that we want to show. If the title is note entered while sending a pasta Crist so we can add, please enter court title. Okay? And similarly, we can do it for the author also. So let's make it please and to court authors. So now we can save it. And now if we go back to our browser and then we go toe ap I because we cannot make post aggress through, browse directly. We have to use something called arrest a big light with his fag. Another case. So this is your city way, and here we can make the riposte request and let's script dry. So here maybe, let's add a court solar. See, Love is the most dangerous thing in the world. And let's snowed at daughter this time. And then we can hit execute here so you can see we're getting that Adit buried the quest so that is a different request and I were expecting so I think shouldn't be coma. And now let's execute it. And now yes, we're getting the correct error here. So we're getting estate scored 500 then Internusa where? So if you go to the editor again and I open the tahmeena and here we can see we're getting court validation failed or Third, please enter code daughter. And then we're getting that a Irma's again. So this is really getting it in the council. What? We have to show some message to the user in the response also. So what we can do is we can open our course controller 40 years and then in the Post request for create a court. We can wrap it inside off the dry get block. So let's try. So this is a correct statement. And for the catch when there is an we want to throw an exception, throw new as two TB exception, and then the other messes we want to show will come from error dot message. So that will include the statement whichever fields are not valid. And then we want to show the extra tippy staters, which is un process civil entity. Okay, so now we can save it. Now let's take a look at inside the browser so we can go here and then in the post course we can try it out and let's add a court. Love is the most dangerous thing in the world. Okay, so, no, we can hit execute. So we're still getting the same error, So let's debug it. Mm. Also. Well, you didn't like it. Let's maybe wrap it and sigh a sink of it. So maybe And then we can turn a bit so that the promise is fulfilled. So now we can save it. And then we can go back to the browser here and maybe let scope in this court and then refresh the page and it dried out so we can usis and let's hit execute once again. And yes, we're getting that message. Gold validation field author, please enter or goat authority. So if I removed the title now and I hit, execute here. So this time you can see gold. Very addition. Failed author Pre center court title. And for the title of your getting please enter coat tighter. All right. And now if they add goat title and then the altar and that is you Any food bees? Solar's make it correct. All right. And now if I hit execute, you can see we're getting or creating when you record here. And now if I go to get courts and I had to try it out and execute, we're getting all the courses. All right, 28. Installing Angular CLI: in this section, we will start working on our front turned with angular. So if we go toe angular dot io website, we can click on talks and then we can click on set Up. And if you scroll down a bit, so we just need to make sure we have no GS and stalled on our system. And after that we can go ahead and then and stall angular, see, like globally on over local machine advance. This is finished. We can create a new application by typing N g New and then the name of the application. So let's see how we can do that so we can start by typing note Dash V and and PM dashi. As we're seeing the version numbers, that means Nordic successfully installed on our local machine. And now the next step is we need to install Angler Seelye, so weaken type and PM and store the G to install it globally and then weaken tape at angler slash Seelye. Now this will go ahead and install angular cli globally on over local machine. And once this is finished, we will be greeted with that utility called N G. So we can run N g and if your own our system. So first we need to make sure the C. L. A is successfully installed so we can type and G dash dash version so you can run this Camargue from anywhere in your system. So when you run this command, you will see this prompt where you will see the angler cli version number and then the north version number that you're using And then the always and also the packages there, the silly installed with it. In the next video, we will take a look at how we can create a new angler project with the CLI. 29. Creating New Application: to create a new angle replication. We can go to the directory off, Troy. So currently I am owned a stroke and then projects so you can use any folder off your choice. So now we can run and g new and then the name of the application, as we were creating course AP I So I've unnamed my application. Goard's glint. Okay, so when we run this, we will get this prompt. Would you like to air Anglo routing? So I will press Yes. And which stay huge format would you like to use? I want to use a CS is No, they're Trevor. Project is successfully created so we can open a product inside our editor. I'm using your studio court. You can use any A trough. Your choice. So I have opened the project by going to file and then open folder. And then I have opened this folder called course client 30. Running the Application: no to run over application inside of your school, we can go to terminal and then click on new Terminal. So this field opened the interrogator terminal for us. And here we can type n g self, their stash open or weaken type N. G s Dachau. So as he short for serve and then stash open is short for dash. And now we can press enter. So this will build our product for the first time. And due to dash or flag, it will automatically open the product inside off our browser. And if you don't pass Dachau, then it will just build the project and then it will give us a You are. And then we have to open this Ural automatically, actually manually inside off the problem. But in other cases, this will open automatically. Like here, you can see our application is running on local host sport 4200 and at a dog fear getting welcome to courts client. And now if you go to over adductor and less close the terminal here and then we can go to source app and then we can go toe component daughter's team. So this is a tax that we're seeing there. So this is string interpolation, so that means So we have that title property inside off our typescript file here, so we can't really a predator solar. Say welcome to our course. EPPS with this will show it like this. So if I save it, no and then you can see this will automatically reload. And then we will get welcome to court, Sepp. 31. Angular Project Structure: in this video, we will decay, locate the angle product structure. So if he see inside off of our editor, let's close thes steps and then let's collapses. So we have this e to e file. So this issues for an twin testing and angler uses protector tool for that, and we won't get into testing that much. And after that, we have this north more deals folder. So this is a folder where all the packages either dependencies, all the dependencies that is quiet for a regular applications are installed. And then we have this source folder. We will get into that in a second. And then we have this get ignore fire so that it used for get version control. And then we have this angler door, Jason. So this is the file that we use for anger configuration. So here you can see, we have these products object. And here we have defined over product Gold courts client. So currently we only have one product. So what actually happens is in the anglers theory lay application, we can create many projects. Currently, we have only ones who their sway. We have this court's client or Dick Tony right. And then if you scroll down a bit so here you can see for style were using SCS is so everything that defined here inside off angler door Jason. And if you scroll down a bit, we can see forever soar through directory. We want to use source so that it defined here. So this directory were all over court is placed and then we have this prefix. So we will see in the coming videos when we create or generate a new component or any service. So this will be prefixed with AP. So if you want to change that, so this is the place where we want to change it. And then we have defined the bill process and we're when we will ever application were this will get built. So this is dist slash course client, and then we have defined our index page. So this is source slash and exhorted Gemma All right. And then if you scroll down, we have this style Seri where we can define or add the starships that we want to include in our application. And similarly, we have this configuration so we can define the environment variables for our development and the production environment. And there are many other options, so we won't get into all off them. So these are very useful. So if you want to change anything inside the angle project so this is the place where you should go and if you close it and then we have this car Mondor conflict Ortiz. So this is the file that is used for unit testing. And then we have this Beckett or Jason here we have script defined that we can run from over terminal. So if you remember, we run this nd sir. Come on. So we can also run and be Embrun start. So every commander to see here on the left, you can run with and I am run. And then this morning, all right. And then we have this dependencies object where we have defined the dependencies acquired for our application. And then we have this step dependencies. So these are only included in the local machine. So when we bury love replication so they won't be included there And no, if it's cool down a bit so their self for this package or Jason and then we have the street , we file where you can see how having it on this application. So this is automatically creator And then we have these types of conflict file and NTS lint for lending. And now if you open over so strictly and left sexually closes, treat me and no, you cannot see. And if I open this app directory that direct restricted is very similar to the nest application. The thing is, nest is heavily inspired by angular. So that's why it has the directory structure very similar to the angler project. So if I opened the next project side by side toe, the angler Project and let's open this source directory and in here we can see we have this app models file. So we have their similar models file inside off the angler product. If you don't know on the left, we have the anger project and on the right, we have the nest Yes, project. And then we've see at the bottom here they're the main tortillas file and similarly only nous side. We have the main dirtiest file and on the other side we have this abd or service tortillas and in here can't leave. We don't have their service file. But in the coming reduce, we will see We have to create this service file. So all in old, you can say the director structure is very similar. So let's maximize our angler project. And in here we can open this index storage. Tamil. So here we perhaps we can say we have this airport define here and this is basically over at components. So if I open a door component tortillas, we can see the selector here approved. So this is the selector that we have defined here inside off the body. So this lords, everything in our application and we have defined or important this selector or the component inside off the app Mort, you So here we can see we're importing over app component and then the air propping. That is quite forever application. And then we're both stepping over their component inside off that model and then inside off the main dirty s we can see we're we're stepping this app model. So this is how our anger application is running 32. Installing Angular Material: in this section, with the star working on the your A off of replication. So we will be using angle material in other application for the user interface. So if you go to the angle material website and then we click on components so we can see it provides various components. So let's click on this stool war component, and if you click on examples here, we can see we can use this for creating of our menu and maybe less. Click on this card component and then we can see that's how we can use card another application. We will see how we can use some of these components, and then you will get the idea off how you can create the application using angle on video . So inside, off, over Domina, let's close everything first and then let's open the terminal. And maybe, let's stop the server first and no nurse. Clear it and no to add angry material. In other application, we can use angler schematic so we can add Angie heard at Angula slash materia so you might get this error skipping insulation back. You're already installed. The pequod and you're trying to wear doesn't sports schematics. So to remedy that, what you can do is you can goto the end. So if I click on get started here and then you can start by following these steps Minority all the second step is first, we need to install these packages, and after that we can run n g ed anger slash material. If there doesn't work for you, you can follow all these steps. This will install angle material successfully on your local machine. So let's start with installing couple of packages. So let's clear it. So we can a stall Angolan material and then we can add angle C. D. K. And then we can also install angler animations. So this seems okay. Soldiers run it and after this is installed, began used that schematic again. And then at that time this will work successfully. So now that this is finished So let's clear the terminal and then we can again run and g at at Angola slash materia Okay, so this time you're again getting skipping escalation backyard reinstalled. But then you're getting a prompt so you can first select the built in team. So I will go with indigo pink. So you can use the arrow keys to select any other things. So I respect that indigo pink one and then set up a hammer. Here's for gesture recognition. So I will choose Yes, here and set up browser animations for angry material. So I will also press. Yes, here. So now this will go ahead and add the necessary fires for us. And then we'll update the package or Jason. So here in the bottom, we can see this has updated all these files. Solar See them one by one. So if a open man main duty is so here, we can see we have this online. I don't import ham urges, So this use for gesture recognition. So now if we go toe apm ordeal tortillas so we can also gondor click here. So if I open it here, you can see this has added this or important this brother animations model and then has also added it inside off the imports Eric and also the side operator, the Anglo door. Jason. So if you scroll down and we open Anglo Door Jason and let's scroll up here, we can see this. Has I did this team ceases five here inside off the styles. Every and if you go to index, start at Gmail file. This has added these folks from Google. They're towboat off home. And then these material Aikens phone which will enable us to use I consumer application and then inside off the style start SCS is This has added a couple of these styles and now we can again run the application by typing N g sir. So this time we have to open the browser manually. So the product they successfully built so no, we can go to the browser and then we can be fresh the application here and let's open the developer council so we can right click and click, inspect or decompress after l've on the keyboard. And here we can see we're not getting any other in the console, so that means everything is working fine. And also you can see the phone has changed a bit because this is using the robot off. Won't 33. Adding Material Module: no to use any angler material component, We first have to import their respective model. So let's see how we can use button inside of replication. So if I click on a button here and in the overview, we can see this is how the murder a year. But I look like and now we have to click on these epi A. And first we have to import this model from Agra Material Button. And after that we can use this inside off for you. I So let's see how we can do that. So inside off our editor. So let's close this terminal and risk closest tabs. And maybe let's collapse it so fast for you to goto over. And then at Mordor Door two years and in here we have to first import met, but in model because we want to use this met working model. So first we have imported form angular material slash, But okay, and then we have to add this import, Matt Martin more do all right. And now we have to add this model inside off the Import Seri so we can add it here Met button model. So no, we can save it. And then we can go toe over a component daughters Jima and let's agitate the top. So what we can do is we can start way north, this one so we can add, but in tag here and in here, we can say Click me. All right. And what we have to do to make it material button is we can add a directive Cold, Matt. But so now we can save it, and then we can go to our browser, and here we can see this more do working or the Spartan work, all right. And now we can also use various other properties with it that I defined so we can add a color. It could do primary. And if you save it and here in the browser weaken. See, we're getting this color primary and in anger, material documentation. We can see if we go toe button and then examples. So here we can see all the varieties that we can use, and we connect quickly. Come this view swords and then here and that shema. We can see the source that we can use. So let's say if you want to add that raised, wouldn't so we can actually go pretty scored. And then we can paste it here and start off that Click me. All right. And now, if you go back to over problems it in here, we can see that trees. Jordan. So this is how you can use thes components very easily. But you shouldn't be adding these models or importing this more use directory inside off the model. So this Phil clutter very easily. So we have to import various more deals, various material models. So this file will look very large. So instead, what we can do is we can create additional material more deal, and then we can import that Mordor inside off our APP model. So what we can do is inside, off over terminal, we can click this new terminal, and then we can start by generating our new more deals. So weaken do and you generate more deal, and we want to name it. But Ariel All right, so let's see it with dry run. So when we run any generator commode dryer on so this feel note actually on the command. But this Felix issue waas but files this village in rate in the Explorer, So let's run it. And here we can see this will create our new material model inside off EP material and then material dot model tortillas. And we don't want that. I want to just create more dual inside off ep slash material model tortillas. So for that, what we can do is we can pass another flay gold Attash flat. And now, if they are need with Chiron, you can see this will create in this file inside off the app directly. So no, we can run this command with off driving so that this will create the file. And now we can see inside off over Explorer. We have this material dot more your daughter? Yes, All right. And know what we can do is solar sexually. Hello, Sister Amina. So we can actually copy this met, but on more do here inside off material more do and then we can actually cut it here and save it And we have toe add import here. All right, as we're no defining this more directly inside off the app Morial. So inside off our material model, we have to add export area also so we can add exports So this will also include whichever mortal reimport. So if he had met, but more due here, inside, off the imports airy. You have to read it inside off the export Cerrito. All right. And next we can import our material more. You're here, all right. And make sure to wear this import statement at the top so we can save it and know everything should work same. And here we can see we're not getting the expected output Solar to see what is going on. So let's open the terminal here and maybe less. Three. Start the silver. Andy, serve. So, no, if you go back to the browser and here we can see our application is running successfully, and we can see this, Burton. So sometimes you have to restart a server toe, get exact output. 34. Creating Menu: now we can start by adding May knew in other application. So inside the angry material documentation we can click on the stool were link. And here you can see this is how our basic tool were looks like So we can create either single room or we can also create multiple rows. But in this case, we're only interested in a single room because we will be adding it'd the top off over application. So if I click on the examples here inside of material, we want to use this color also. And if I click view source here so we can make use off these court also solar, See how we can create the menu in a replication. So first we need to import, met, deliver more doing inside off over material model. So here we can do import and foam angular Matea and then toolbar. Okay. And here we can add the import met toolbar more. Do you? So this will be actually Anguilla? No, we can add it here inside off the import city and we also have to read it inside off the export city. All right, so now we can save it, So we can actually close this model tortillas here. So inside off our app component where we have all this scored. So that is the one that is showing here. So we don't need any of that. So we can actually remove it so we can keep their loved rock alert. And let's remove everything here and let's start reading, maybe courts up here, soldier. Save it. Okay. And if you go back to the browser, you can see I am only getting the courts up here now. So now instead, off our H one tag, as we have already imported Matal, but here so we can use this. So what we can do is we can had met toolbar. All right, And, uh, let's cross the stag and inside off the metal over we can add matter, Alvaro. So defiance How many rules we want? Wait. So if we only want to add one drop so we will air this tag one time. And if you want to wear multiple words, we will use the stag multiple times. And now we can add are spent deck and inside off that we can create for ed of replication name. So I will say course client. All right, so if I save it now and I go back to the browser so we can see this is already shaping up, but we're not getting the color at the back. So for that matter, where has a property called color and we can name it, But I am very order so we can save it. And now, inside off the browser, we can see the color of change. True, that blue color. So that is a prime vehicular inside off that indeed groping team that we have selected at the start. You can see older available corruptions inside the documentation. So we have a history options like accent war object. So know what we can do is after the Sapan we can add ever button. Okay. And inside off that, Burton, we can edge courts. So this is a navigation item. Oh, that. People used to go to the courts speech. And if you save it now and we go toe over browser So we will see that court Spartan, but we don't have any styling, but where the styling, what we can do is we have to wear the directive. Gold met Martin So now if I save it and go back to the editor and you can see we have this styling and now I want to air that I can beside the scores link. So what? Begin the ways we can go toe material likens. So this is a one material lord, I o slash source slash icons. And here we can see or like and center of a livered waas. I already know what I can I want to use. So if I search for gold here so you can see I want to use this cycle so we can just go have this name call for mid court and then here inside off That made Britain We can use another tech gold Met Aiken and he had weaken based or actually aired format coat. And now if I save it, we should get an adult. So here, inside off the brother You can see Matt. I can is note and known animal. All right, so that means we have directly import mad. I can model So inside off predator. So inside off material or model 30 years we can start by importing Ever met I can model. So we want to import it from angler material slash Aiken and then we can add the import here Met? I can model. No, we can admit I can model inside off for imports and exports. Very so inside of your school, we can type simultaneously on various position. So if I left, click own, board the areas so awaken tape simultaneously here. So no, you can add coma and then mad I can model slightly more tune. So now I can save it and that you don't need it here. I don't know when it goes either here, So let's save it now. And now if I go back to the editor actually the browser we can see our court. I can adhere now I want to position this application name on the left and this menu item on the right. So let's see how we can do that Now Inside off the mad toolbar Oh, we can have a new class seller said a toolbar and know what we can do it We can go toe ab component Doris CSS So this is specific toe their type component daughters Jamie So if you go to app Cambone under ts so here you can see we have these style you are else. So here we have defined that AP component or dioceses. So there's where we have opened this. And also, if you see here inside of temperate urine were reading all overage table court, inside off app, component or regime. And so this is weird. This is defined. Okay, so exactly close it. So inside off our app component or a CSS solar's specify a close gold bar and I will use flexible so we can say display flecks on it and then just to fight content. So I will use space with me. So now if you go back to our browser, you can see we have our Aiken or the menu item on that I can side. And then we have over app name on the left hand side. And if you want to learn more about flex walks, you can goto CSS reference dot io slash flex books. And here you can click on that flex box and here you can see all the properties saying how you can use them. I will also include this in the resources 35. Working on the Home Page: in this video, we will start working on the home page off replication so we can start by opening the terminal inside off the editor. And let's click on this new terminal, Aiken. And then we can start by generating overcome Boehner. So I want to name our component home so we can do Angie generate component, and we can see whole. So let's first test this command with dry run. And here we can see we're getting the error. More than one more do matches, So I was expecting that. So what is happening here? So we have two more juice inside off our APP directory here. So one is more dealing tortillas and the other one is material model DOrtiz sort of remedy that. What we can do is you can either move our Matija model inside off the folder or other thing we can do is we want to specify that the model when we convey double components. So let's use a second matter here. So here, after component home, we can air their stash more do and weaken Sattar tickle toe. And now we can on this Come on again with the dry run and here we conceive were getting so this will generate home component door esteem, Inspector. Two years, two years and there ceases. And then this will also operate our at more Jill Dougherty years. So let's run this command without drive. And now so that it will create all these fights for us. And now inside off over the app directory, we can see every component home waking clears all these files and then if we go to over at more than 30 years, we can see it also added home component inside off over Declaration city. So this is important part. And now what we can do is let's start by going toe over air profiting model Doherty s file here and here. We can specify the route for our home component here, so I want to add it to the route. So let's say we can add part and then we can add Empress sting here so that when we reach a bird or open our route peso this carpentry lord so we can add component And here we can add whole component. So make sure to add this import statement at the top or it So now if you go back to the browser, you conceive, you're getting homework's. And here in the U Terry, few upon home component or esteem, we're seeing homework sales. So this is coming from that home. Good morning dot html. And now if we see if we had course here, okay, and let's save it. And now if you go toe over editor, actually browser. We're nor seeing Homeworks here. So now if you go to courts and that case, we're seeing homework, see? So let's go back here and maybe let's change back to over two part and in the browser we conceive yet again getting homework's and know what we can do is we can start for working on the U A. Off of our home page. So before that, we can open our airport component or touch Immel and let Sepp of a Route Routledge inside off the container. Dave. So maybe we can add container or David a class off undated here and maybe reputable soft chocolate. And next what we can do ways. We can specify certain styles for that so we can add container. And he had weak unaired display flex, and I want to specify a weird 100%. And then we can add justify content equal to center so that it centers the content horizontally. And next we couldn't go toe over home component, daughter esteem. And here we can start by adding a division with the class off home container. All right, And then we can heard Ah, span, where we can specify overcoat. So when we north that big So let's save it And let's close a terminal here. And now if you go back to the browser, we can see this court here, okay? And next, What we can do is we can start by adding over button and which will save you all courts. So then quickly conduct Britain. This should take us toe the course page, which we don't have currently. So we will edit. And then we have this mattress button directive that we will held toe over the Old course Spartan, and then they want to use the color. But I'm buddy. Okay, so now we can save it. And then inside off of our browser, we can see we're getting this court here. And then we have this Martin view. Old course. Now we can start working on the styling off our homepage so we can go to our home component and order. I see ASUs as we want to target home component or esteem ill elements. And here we Kinnaird home container And let's start by adding display flex and I want to use flex spokes. And in this case, I want to use flex direction toe call him. So if I save it and I go back to the brother here, so this is still lording and here you can see we're getting a court and then we have over Burton. They're stacked vertically or doctor boredom. And now we can also specify another property. So let's said justify content center and a line items center because we want to center it from both open bottom and then left and right. All right, so if you go back to the brother now so we won't sees that much change here. Our modern is slightly narrower, but this is not centered. So what we can do is to achieve that, we first have to specify the height here so we can add height a TV H. In other case, so we stands for we white. So you can think off the entire webpage here as Ah 100 VH and we want to use a TV H off that. So now if you go back to our browser here, we can see our content is perfectly centered from top to bottom. Here we can also air some spacing between our coat and then this view all course Morton. So let's add BR tag. So here in the component, we can add BR and we can save it, actually, and this looks slightly better and now we can target our court. So this one and maybe let's start by adding glass name here so we can add court. So no, we can target that. So inside off our home component Weaken Aid Court and let's said, Ah, phone size off you r e m so R e m is ah, relative unit. So that means if you have a phone site or the default phone side on your very applications had to develop fixes. So in that case, this phone size will be equal toe to into 12 picks is that means 24 picks is and next weekend news text transform upper case so that this virtuous uppercase. And here we can see this is looking slightly better, but nor that center. So we will fix that in a second, and then we can use. So if you see inside off of a home component or estimate we won't wear course here so we can air it like this. So if I save it, this works. So we're getting these courts here. So what I want to do is I want rated via Theis is just to show it different, V. So what we can do is we can use good and then double colon, and then we can end before and then we can use the property called content. And here we can specify the text we want to wear. And before we won't wear this court. And if I copy this and maybe pasted, I can also add after And if I save it? No. So you will get the same effect. We're still getting the courts here. Okay. And now here, you conceive, you're repeating our selected here as we're using sauce here. So we have Newton later. Trick. So what we can do is we can got based our selectors here and instead of using this dog goat again and again so we can actually replace it with. And so this will correspond to that parent selector that we're in. And now if you take a look at inside off the brother, we can see the same output here. So if we open the developer council here and maybe let's three sides of indoor here so you can see this is looking OK on them away device here. So if you reach here But as we go toward est offside, this doesn't look that good. So if you can see here, so what we want to do away. So when we'd each over the stuff size, we don't want to use the entire bit off the page. So what we can do is we can use maybe 50 or 60% of the world. So what we can do is we can specify the media credit here and inside off of our home. Cambone and Order. SCS is here so we can add media Some green and and he African specify men vert here and I want to say it's 7686 is so that means whenever village 768 pixels or ever we want to use this media query. So here we can specify the home container here and here we can specify lover and in other guest, Let's say we want to use were taken to 60 view of it. So now if I save it and they go back to the browser, so here you can see Now we're using 60% of the word here. And if I change it, toe the mobile device. And if you see here top, you can see the pixel CIA. So whenever video, each 768 picks is and law, this is taking the entire bit off over device. And if we go toe 768 and a bulb, this is using 60 percent off their device with. 36. Adding Lazy Loading Module: In this video, we will see how we can create lazy lowering, more deals and never application. So if you see here currently inside off over application. So we have added our home component, which is loaded whenever we hear another application automatically. So with help off lazy loading models of Benefit is so whenever we hit an easy vote. So then we can load our more deal or the component. We don't want to lower each and every component in every application when they're pinkish entrants, so it is beneficial to use lazy loading. So let's see how we can do that. So inside, off, over editor for first, let's start by closing all these steps and then we can open our terminal here and then start by creating this new terminal now to generate a lazy loading, more tools. So what we have to do is we can start by generating Andy, generate or weaken a G, and then we can see more deal and we want to generate the model cold courts. And next we have to specify the road which will be added inside off air propping mortar, so we want to name it courts and at last we have to specify our main model. So where we have toe add this model So we will add ap more dio Okay, so we can start. We're running it with dry run and here you can see this will create our course routing more do than course more do and all this component files And then it will also update a prodding more Your dirty is so the same Sochi So let's run it without dry run. So now on the left hand side, we can see we have this course more duel with the court's component And if we go toe over air prodding more deal dot Yes Here we can see our part to the courts And here we're using this large in a property that it just for lazy loading the models. And here we are using this arrow Syntex at a function Syntex And then we're importing of ah course, more deal. So then we had using this course morning and next difficult over the course rafting more your door ts So here you can see we have this routes airy here We're specifying for the route part. So now this corresponds to over this course spot. And whenever it we goto this court part inside off our route, we want to open this course component. And now let's save everything. And let's closer terminal here. Now, here in the browser. If we go toe slash courts so you can see we're getting courts works. And if you go to the editor and we open courts come born and order html So this is estimate that is being loaded here. So the benefit here is whenever we go to courts route then and only then over more DOOL for courts and the component for courses ordered. So the north loaded when we're on the application for the first time, But you will make our replication run quite faster. Now let's try to Ed. They're part when we click on our courts link here. So what we can do is we can go toe over a component, orders Gmail here and then four hour course bottom. Here we can edge about the link and then inside off the every we can add slash courts. All right, so now we can save it as very currently in never course throughout sold. Maybe. Let's go toe over home wrote. And now if I click on courts, you can see we're getting our courts works. And then we're director toe over courts throat. So now if I open the developer tools here and maybe there's resize this window and I go toe over network death and let's first goto the homepage, all right. And now, if I click on so actually let's clear everything. So you see, if I click on courts, you can see then and only then we're lording over course, mortal daughters. So this is how you can see our model is lording lazily so this is beneficial for our application. And now let's see how we can make this link active whenever we go Toe course wrote. So inside off our editor we can use for more directive here without to link active. And we can add a class here called Maybe Active. Okay, So whenever this link is active, oh, we go to that court so we want to make it use that class active. So now if I go back to the browser and a press after well, here and elements so if I inspected, you can see here inside off our class. We have this callus active added. So if I go back to that home page yeah, and then I inspect this button. So currently we don't have this glass added here. So if I add courts and no inside off that class, we have this active glass center. Okay? So no, we can make use of this class through active this link. So let's go here and inside off app component daughter SCS is here. We can use our class on their side active So accurate, straight making. Ah, it maybe it Okay, so now I can save it. And if I go back here so you can see So now this is appearing red. If I go back to the homepage, this will look same. So if I go here, this will make it a threat. But I don't actually want to use red, so I actually have a color that I want to use. So I want to use that some share of blue. So that it 344 and a 397 So know I can save it. And here in the browser, you can see this slight background here. So this looks much better 37. Working on Quotes Page UI: in this video, we will start working on the home page off replication so we can start by opening the terminal inside off the editor. And let's click on this new terminal, Aiken. And then we can start by generating overcome Boehner. So I want to name our component home so we can do Angie generate component, and we can see whole. So let's first test this command with dry run. And here we can see we're getting the error. More than one more do matches, So I was expecting that. So what is happening here? So we have two more juice inside off our APP directory here. So one is more dealing tortillas and the other one is material model DOrtiz sort of remedy that. What we can do is you can either move our Matija model inside off the folder or other thing we can do is we want to specify that the model when we convey double components. So let's use a second matter here. So here, after component home, we can air their stash more do and weaken Sattar tickle toe. And now we can on this Come on again with the dry run and here we conceive were getting so this will generate home component door esteem, Inspector. Two years, two years and there ceases. And then this will also operate our at more Jill Dougherty years. So let's run this command without drive. And now so that it will create all these fights for us. And now inside off over the app directory, we can see every component home waking clears all these files and then if we go to over at more than 30 years, we can see it also added home component inside off over Declaration city. So this is important part. And now what we can do is let's start by going toe over air profiting model Doherty s file here and here. We can specify the route for our home component here, so I want to add it to the route. So let's say we can add part and then we can add Empress sting here so that when we reach a bird or open our route peso this carpentry lord so we can add component And here we can add whole component. So make sure to add this import statement at the top or it So now if you go back to the browser, you conceive, you're getting homework's. And here in the U Terry, few upon home component or esteem, we're seeing homework sales. So this is coming from that home. Good morning dot html. And now if we see if we had course here, okay, and let's save it. And now if you go toe over editor, actually browser. We're nor seeing Homeworks here. So now if you go to courts and that case, we're seeing homework, see? So let's go back here and maybe let's change back to over two part and in the browser we conceive yet again getting homework's and know what we can do is we can start for working on the U A. Off of our home page. So before that, we can open our airport component or touch Immel and let Sepp of a Route Routledge inside off the container. Dave. So maybe we can add container or David a class off undated here and maybe reputable soft chocolate. And next what we can do ways. We can specify certain styles for that so we can add container. And he had weak unaired display flex, and I want to specify a weird 100%. And then we can add justify content equal to center so that it centers the content horizontally. And next we couldn't go toe over home component, daughter esteem. And here we can start by adding a division with the class off home container. All right, And then we can heard Ah, span, where we can specify overcoat. So when we north that big So let's save it And let's close a terminal here. And now if you go back to the browser, we can see this court here, okay? And next, What we can do is we can start by adding over button and which will save you all courts. So then quickly conduct Britain. This should take us toe the course page, which we don't have currently. So we will edit. And then we have this mattress button directive that we will held toe over the Old course Spartan, and then they want to use the color. But I'm buddy. Okay, so now we can save it. And then inside off of our browser, we can see we're getting this court here. And then we have this Martin view. Old course. Now we can start working on the styling off our homepage so we can go to our home component and order. I see Asus as we want to target home component or esteem ill elements. And here we Kinnaird home container And let's start by adding display flex and I want to use flex spokes. And in this case, I want to use flex direction toe call him. So if I save it and I go back to the brother here, so this is still lording and here you can see we're getting a court and then we have over Burton. They're stacked vertically or doctor boredom. And now we can also specify another property. So let's said justify content center and a line items center because we want to center it from both open bottom and then left and right. All right, so if you go back to the brother now so we won't sees that much change here. Our modern is slightly narrower, but this is not centered. So what we can do is to achieve that, we first have to specify the height here so we can add height a TV H. In other case, so we stands for we white. So you can think off the entire webpage here as Ah 100 VH and we want to use a TV H off that. So now if you go back to our browser here, we can see our content is perfectly centered from top to bottom. Here we can also air some spacing between our coat and then this view all course Morton. So let's add BR tag. So here in the component, we can add BR and we can save it, actually, and this looks slightly better and now we can target our court. So this one and maybe let's start by adding glass name here so we can add court. So no, we can target that. So inside off our home component Weaken Aid Court and let's said, Ah, phone size off you r e m so R e m is ah, relative unit. So that means if you have a phone site or the default phone side on your very applications had to develop fixes. So in that case, this phone size will be equal toe to into 12 picks is that means 24 picks is and next weekend news text transform upper case so that this virtuous uppercase. And here we can see this is looking slightly better, but nor that center. So we will fix that in a second, and then we can use. So if you see inside off of a home component or estimate we won't wear course here so we can air it like this. So if I save it, this works. So we're getting these courts here. So what I want to do is I want rated via Theis is just to show it different, V. So what we can do is we can use good and then double colon, and then we can end before and then we can use the property called content. And here we can specify the text we want to wear. And before we won't wear this court. And if I copy this and maybe pasted, I can also add after And if I save it? No. So you will get the same effect. We're still getting the courts here. Okay. And now here, you conceive, you're repeating our selected here as we're using sauce here. So we have Newton later. Trick. So what we can do is we can got based our selectors here and instead of using this dog goat again and again so we can actually replace it with. And so this will correspond to that parent selector that we're in. And now if you take a look at inside off the brother, we can see the same output here. So if we open the developer council here and maybe let's three sides of indoor here so you can see this is looking OK on them away device here. So if you reach here But as we go toward est offside, this doesn't look that good. So if you can see here, so what we want to do away. So when we'd each over the stuff size, we don't want to use the entire bit off the page. So what we can do is we can use maybe 50 or 60% of the world. So what we can do is we can specify the media credit here and inside off of our home. Cambone and Order. SCS is here so we can add media Some green and and he African specify men vert here and I want to say it's 7686 is so that means whenever village 768 pixels or ever we want to use this media query. So here we can specify the home container here and here we can specify lover and in other guest, Let's say we want to use were taken to 60 view of it. So now if I save it and they go back to the browser, so here you can see Now we're using 60% of the word here. And if I change it, toe the mobile device. And if you see here top, you can see the pixel CIA. So whenever video, each 768 picks is and law, this is taking the entire bit off over device. And if we go toe 768 and a bulb, this is using 60 percent off their device with. 38. Displaying Multiple Quotes: so currently inside, off course paid. We can see we have only one card item displaying here, or we can save on court is showing here. So what if we want to show multiple courts in our paid so we can make use off Andy for directive so we can go to our courts component or HTML And it never met guard component. We can make you soft and before so we can add star and before let item off list. So list can be an airy so we can add any elements. So maybe 1234 or five million. So the year four elements. So that will make us show for lest items so we can actually make it court. So we're country north, Make news of it. But this will make use off this area. So whenever we're fetching data from the back end, So in that case, we will add the actual data here, but currently dizzy. Just a strategy. So now we can save it. And now if you go back to the browser so here we can see we're getting four course 123 and four because we have four elements inside off the area. So if we aired left elements of this official five items but we can use for need later trick. So we can elsewhere Eddie Dort, constructor. And then we can pass however, number of animals who want wear. So if we add maybe three here solar to save it. And here in the browser, we can see now we have three elements here. Okay, So if I heard maybe 20 so no, I save it so you can see we have many items and believe me, they are 20. 39. Getting Author Initials: in this video, we will see how we can get the initials for over water. So if we have altar, call Mahatma Gandhi, then we will get em. And if you have all called bulgy sing, then we will get be. So if you actually go to the console and maybe let's try with with my heart MMA Gandhi. And if I try to split it All right, you will see, we will get an area off all these different characters that are inside off the outer. And if i e use this Jiro Index, you can see I'm getting MP solar straight, changing the name here and maybe let's edge. But you sing here. Okay? So in that case, I'm getting beat. So what we can do is we can make you so for this split function. So let's see how we can do that. So inside off our editor, So here, currently we're adding M. And so let's use this Mahatma Gandhi here, and then we can edge curly brackets, and inside of that maybe began put it inside of courts and here we can you split and we want to use their zero index okay. In the real application. What we will do is whenever we are getting the writer from the back end so that Outer V will get from the backend and we will use that property for that author inside both these positions and then automatically we will get the initial for that auto. And now, if I save it and here so we won't see any change here because we have already added am here . So if I change it to something like maybe But he's saying OK, so if I save it and inside off the browser for courts, we can see be here. Okay, so now let's change it back to Mahatma Gandhi and maybe save it. 40. Adding Random Avatar Background: in this video, we will take a look at how we can add the random background forward each other. So here we will get different picture in the background and for the second quarter, different one and so So let's see how we can do that. So inside off court editor, we can go toe courts component or TS, and let's start by creating a matter so that will give us random color. So I will name it, get random color, okay. And no, let's first specify your constant for the letters. And if you know all the phones, have a letter from Jiro to nine and then a B c d e f. So we can specify all this letter sale there. 123456789 and a B C D e f. Okay. And after that, we can say let color equal to Hesh and then we can come get in eight the random sting that revealed in rates. So let's make it color And no, we can use for loop. So four let I equals zero. I last 10 6 I plus plus So that love bill run from 0 to 6 were actually six times and weaken do color plus equal to letters. And then I want to use met dot random and I want to multiply it by 16 because we will be getting Exodus IMA and I actually want to wrap it inside off mass. Start floor. Okay, so now we can save it. And at the end, we can return background, a call to color. All right, so now we can save it, and then to use this matter, weaken goto over course component daughters to Yemen. And then we can make use off Andy style directive so we can air nd style. And here inside, of course, we can do get random color, and then we can save it. So now, inside the browser, we can see for each of water, we're getting the different background color. All right, so if I act really fresh it once again so this will change, So yeah, so you can see this happening 41. Introduction: in this section, we will take a look at how we can connect our anger application toe the next years back in . So my server is ordered returning so I can type local host 3000 slash ap A So this will open over Swagger Explorer, where we can see every p a. And if you don't have a server running than you can goto the server directory which in other cases, course over and then we have to run this command and Tamron start, Dev. All right, After there you can open this urine and then you will be able to see your a p A. That you have great Rendah Nasty s video section. And now if I click on this get course request so we will be using this course area here we will be adding all of a request or the course which we will get from of a server back So we can click on this, get court request and then we can try it out and then we can hit execute here and here you can see at the bottom we have these four courts. So in the next video we will see how we can use thes courts and then display on this course page 42. Creating a Service: So let's start by creating a service that we were usedto data manipulation in double beckoned. So what we can do is we can open our terminal here, and then we can click on this new terminal, Aiken, and then we can generate of a service. And then we have to buy n g generate service, and then we have to give the service name and I want neighbor service courts. And after third figure on this, come on with dry run. So here we can see this village in rate to files one is gold sore serviced or specter teas and other one is actual service file. So we don't want to create this testing file so we can pass additional flag here so we can actually dash, dash, skip bests, Okay? And then we condone it again with the dry run just to see the output. So here we can see this feel, just create only one file code stores harvester ts inside off the AB directory. So now we're good to go, and then we can undiscovered without driving. And here we can see this has agreed to this file for us. And if I scroll down a bit. Here. We can see we have this court stored service tortillas file The benefit off service in angler is there. You can inject the service in various components, and then you can use the same court or reuse the court within various components. So in in a service class, what you can see is there is a decorated record injectable for it. So in every class, we have this injectable, and then we have this provided in property. So it is said to root here. All right. That means we can use this service anywhere in our application. And now let's go ahead and close over terminal window here, and then we can go here and then create a new my third solar. Say, get data. All right. And we want to use the Sgtp service here. So what we can do is we first have to goto app dot more deals 40 years. And first we have to import as TTP Klein model and we have to import it from angular Goldman Sgtp. And the more dual is a studio peak. Right, more You. Okay, so we also have to add it to the imports Airy so Now we can save this file and now we can use the extra TV service anywhere in our application. So what we can do is we can inject the STP client inside off the service here so we can do private as to t p. And we can adhere scdp light and make sure to imported from angler common acidity of it. So, no, we can make use off this Sgtp method. So what we can do is we can make the get to quest to over a p a. So if you go here toe this regular, you are here so you can see the grass, your toe get all the goat. Is this one or so? When we executed, you can see the progress Ural here so we can actually cope it. And now inside off. Over. Get Data Matic. We can make the get request to our a p I. So what we can do is we can turn this daughter as Judah p dot get, and then we can pass a You are all here. All right. And then we can save it. And now, to use this matter, we can go to our course component or TS. And here we first have to inject our service so we can do private Goard's service. And then we can add courts service import here at the top or it so this should be service. This can be anything. So we're gonna also neighbor Qs. But I'm naming it as court service in my case. So know what we can do is we can access the get data, met her inside off the court service tortillas call it. So what we can do is inside off our NGO knit lifecycle hook. We can call this matter so we can do this door core service dot Get data. All right. As the angular is to Tippi, service returns of the river so we can actually subscribe to it. So if you don't know about off, the rivers of the drivel are actually a stream off data that you can subscribe to and then had some later point. If the value changes inside off the observable. So you are already subscribed to their data, and then you will get the latest data or no to subscribe to this. We can do dot, subscribe. All right. And then here we can make you self at a function, and then we will get data back. So this can be any name. And that will hold over date, actually, so we can use council or law Dude. So now, if I save it and here inside of the browser, If I press after, Well, as we're already inside, our courts speak so you can see we're getting this output on the console. So that is actually coming from the back and a p A. So if I actually expand it, you can see we're getting four courts and inside a swagger. The way we can also see, we have these four course, and the 1st 1 is my life is my message. And here we can see the first goat ate this one. 43. Displaying Data: in this video we ridicule, okayed how? Weaken Display the data on our front end. So we will start by creating a new property called Courts inside off the course component. So I will name it courts. And then what? We can wait inside off Hours of scribe matter there were subscribing to the data. We can assign this data property to the courts so we can do this dot Courts equal data. So now the start courts hold all the data that we're getting from the back end. And now instead, off this led coat off a read or constructive matter inside off our course component or regimen here we can make use off over course property. So now if I say exactly so let's see it without saving it. So here you can see currently we have all these 50 course there we were getting from over constructor matted. And now if I save it and here you go back to the browser and all of a sudden you can see we're getting these four courts and that is because we're getting four course from the backend. So this is still the static data, so we have to populate all the courts with this data. So no, we can make yourself string interpolation. So let's change it. So that will become caught dot water. All right, so this court and here we can change this to go daughter throw. So and now this will be our court title. So that is good thought title. So now we can actually save it. And then inside of the browser, we can see all the courts that are coming from the back and here, So these are the courts, all right. 44. Unsubscribing From Subscription: in angular whenever we subscribed. When observable, our subscription is creator. And it is important that Francis cry from any subscriptions that we create in our components tow, avoid memory leaks. So let's see how we can do that. So we can go to over course component RTs. And here we can create a new property called subscription. All right. And then began a sign over subscription toe this property so we can do this store subscription equal to then over there. So sky matter, all right. And now we have to implement on destroy hook. And here at the bottom, we can implement your Smetters so we can do nt own destroy. And in this hook became unsubscribed from our subscription because Andy own destroy the life cycle method which is run when we are living of a component. So now we can do this door subscription dot unsubscribe. All right, so now we can save it. And now if you go back to the browser, you can see of replication is still running Fine. But this is very important to once a scrape from any active subscriptions. Whenever we no need them 45. Using Async Pipe: in angler, we can make use off a sink pipe which can automatically subscribe and unsubscribe from other rivers. So let's see how we can use that. So if we go to our core editor and then inside off over NGO known it so we can actually calmer this subscription, and then we can assign our get data metal from core service to our course property. So weakened. Oh, this dog courts equal to this Dort course service dogs get did or it. And if I say it and now inside off the course start component daughter s human. We can use this pipe operator and then we can add a sink. And no, if I save it and I go back to the browser again, we can again see our courts. And this time we don't have to subscribe or unsubscribe the river because it was automatically handed by the icing pipe. And now, if they go back to the editor, we can actually remove this nd on destroy matter, all right. And we can also move it from here and make sure to remove it from here also. And then we also don't need this subscription property so we can actually move it also. All right, So this is how you can use a sink pipe in angler. 46. Creating Interface: In this video, we will see how we can air types toe over properties and methods in angler. So we will start by defining interface. So we will open the terminal and let's click on this new terminal, Aiken. And then we can use the generator and G generate interface, and I want to name over Interferes Court and let's first run it with dry run. And here we can see this will create a new file called Court or TS inside off the APP territory. So I actually want to create it inside off courts. So I will edit court slash court and maybe let's removed right on now. And now if they could run it, you can see the said created a new file called Court Tortillas inside off the course directory. So now I can open it. So this is just an interface. So we're exporting an interface Gold Court that we want to use in various methods. And let's give it a properties title off string and auto off type string, because these properties that are defined in ever court. So if you see anywhere inside off the back end, we have a court with the property title and daughter. So now we can a click or two termino and so we can use this court interface and we can go to our courts service here, and then we can make it get to crest off type goat, Harry. So we want to make sure we are importing this interface, all right? And to make this area, we can add that Harry or it. And now this filled return and of the river so we can add off the real so that we need to import from our next years. So this will be off type coat, Eddie. So now we can actually save it. And then now we can go back to our courts stored component Ortiez here and here. We can define our course as court Eddie, actually, and it should be off off the reveal of type CO Derry. Okay, so now we can save it. So here we're getting another here, Cannot find name court. So we actually have fighting import court, so we can actually aired control dot here. So this will give us this prompt, and then we have to import court from slash court. Okay, so now this ad is gone, and now we can save it. And then if you go back to the browser, you can see everything is still working fine. 47. Using tap Operator: no here in a consul were no longer seeing our course data that we were seeing inside our previous videos where we're getting the right date, our own over front and application. So if we go toe over the editor here, we were previously using their subscribe method and inside off their subscribe method. We heard this console door locks treatment, which was out putting our course data. But as we're now using a sink so we're just assigning to get data matter to our course property and then displaying it with a sink. So now if we want to use this console or log statement, we cannot subscribe here. So what we can do is we can go to our service here, So let's actually close the other types. And here what we can do is so we can use the pipe operator and then inside off the pipe, we can make use off our Xia step operator so we can add depth. So first we need to import step from our exteriors slash operators who we will lead Rx years slash operators And here Villard step. All right, So, no, that is gone. And here's what we can do is we can add data so this can be any name. And then we can add consoled or clog. Maybe there said course. And here we can head our data. All right, so now we can save it. And now, if you go back to the browser, so here again, you can see there were loose forever courts inside off the council. But this shows only then when we subscribe to our data. 48. Using Environment Variables: No. Let's see how we can use environment. Valuables inside off, Angler in anger. We can define different variables or different environment variables for development and the production environments. So let's see how we can do that so we can go toe over environments folder and then we can open environment Daughter? Yes. And here, let's define about base. If you're you are holic. So we can actually copy this, okay? And then paste it here. So this dubious Ural for our a p a. Because for never change. So if you see here, this is a bass part. And after that, whenever we aired any you Earl, we're getting the response back. And whenever we're pushing the court to the production, so that will be different urine and that we can add inside off our environment door production. Doughty it so evil again, create that base Ural property here. And then we can add the different Ural here. Okay, so for no, we can actually remove it. Right? So let's close that. And I know what we can do is we can create a constant here, cost this euro, and then we can get it from environment and make sure to wear the imports different here, and then we can adult base urine. Okay, so now we can use it here like, so we can actually can get in there so we can do base. You are plus, And here we can hear slash. And after that, we can add course, actually begin aired. Course here also. All right, so now we can save it. And now if I go back to the browser here, you can see we're still getting the same output. That four course area. The other thing we can do is we can either come getting Nate it like this. Or we can make use off tempered stings so we can use back takes here and then to use anywhere evil we can use dollar and then these curly braces. So here we can add base. You are, and then we can have slash course. So now, if I save it and inside of the Broza, we can see we're still getting the same output. But now this looks much cleaner. 49. Updating Home Page: in this video of evil update our home page to get a single court, and then we can show this court on our homepage. So if you currently look at our home page So here we can see if you're getting this study court here, so we want to replace it so we can go to a swagger. You weigh. And here we can make yourself get their single court mattered so we can click here and then we need that I d here so we can make yourself any coat. Solar Skopje decided here. And let's click on, try it out, and then we can paste it here, and then we can actually execute it. So here you can see we're getting this court here and now to use this code, we can copy this request rural and then inside off Predator. So let's start vacating new methods of you lead, get, do you know All right. So here we can add our i d. So that will expect an i d. And then it would return. The data later told their diet E All right, so here seculars, maybe air the comment for over You are so that we have copied here and here. What we can do is we can aired Return this dot s TTP don't get. And this time we want to get single coat. And here we can make you self over based your once again because up until this point, the Ural seem and then we can add courts, and then we can make you soft decide here so we can add Heidi. All right, so, no, we can actually air the type here so we can add over the river off type court. Okay, so now we can save it. So we're getting another here. Duplicate function implementation. Yeah. So we're getting the same function name here, so maybe let's change it to get goat. Okay, so no, the editor is gone. And now we can go toe over home page and home component, or TS here and here. We can inject our service so we can all private court service, and then we can ever course service, and we need to import it from this court service. And now we can actually define a property called Court here and here we can add this north coat equal to this door Court service and dot Get goat. Okay. And here we have to air the i d that we can get from here so we can actually cope it. All right, So we can actually add the type here also, so we can add court. Make sure to add the import from the interface ALS. All right. And if you see here, were getting the other type of the rebel courted missing. So actually, this is a nodal court, so this should be off the level of type coat. Okay, because of ah, shutup matter. Inside off. Angler, dunce Observable as we have discussed in the previous videos. And now we can go to our home component dot html here so we can check four. And if and then we can see court, a sink has caught. Okay. And here we can use court door name. Actually, this should be a title. So now we can actually save it, and then we can go back to over browser. So we're getting love is a more stages thing in the world. We can alter the type operator for the console statement, if you like. So maybe actually said it. So here, inside off course service tortillas so we can add Bip and then with their depth data consoled or clog. And here we will get the single core so we can add court and then we can add data. So no, we can save it. And then we can go back to the editor, actually the browser. So we're getting a single court here and then the court heroes so you can see I'm passing some random i d. And then I am getting the court back. But in the real world application, you might want to create Ah, separate and point that will give you the late test coat that you may want to use on your homepage. But for demo purposes, this is fine. 50. Adding Create Quote Component: in this section, we will finish working on the card operations, namely, create, read, update and delete. So let's start working on creating a court. So inside off register, we can open the terminal window here, and then we can create a new component, as I want to create lazy Lord components so we can add or user generate command. Like Angie, You can read more deal, and I will name it Edit coat. And then we have to specify the route for that. And Ivan name it edit. And after 30 we can pass more deal and that the EP So, no, we can press enter here, so this will go ahead and I generate are lazy loading model for us. And if you go toe over air prodding, modeled or ts so you can see we have this part called at it here, and this is loading our added court more deal. And now if we go back to the brother here and here, If I hit slash no, he'd it. So this should he slash Add it. So here you can see we're getting added court works, so we will be using the same component for creating and editing a court. So there's why have named it added so no, inside off our editor we can go toe home component and RTs So it will note here So we can go toe over courts component dot html here and actually disclosed the other types. And here I will create a new button. So whenever weakly conducts Britain, we can goto our cobh slash added page. So I will add Button and I will name it create court and here we can hear the directive for Matt, but okay, and now we can actually save it. And here in the browser, we can go toe courts and here we can see of a create court button here. So I will press f 12 here, and so I will actually make some modifications here. So what we can do is so let's change the color too. Uh, primary. And then I also want toe heard the I connect the front here's like a noose met. He can and I can. We want to use here is note and and now if I save it and I go back to the brother here so you can see we're getting this plus, Aiken, I was actually expecting different Aiken. So maybe Let's see. Okay, so this is actually not north, so this should be note. So now I can save it and then inside off the browser. So yes, this is I can I want to use. And now we can add some styles here. So it really hurts, inspected and add it here. So inside off the bottom here we can add North animation. We can have display flex, and I won't percent territories on telly so I can heard justify content tow center. And after that, we connect with it 100%. Okay. And then we can add a margin dog off one naughty engine it. So now this looks much better. And so no, we can actually copy this CSS And here inside of the button lifts at a class, create court, and now we can save it. And here inside, off course component daughter assesses. We connect li air this northern here we correctly had matter here, create court. And here we canary diverse styles. And if you go back to the browser now, we can see output reflected here. So if I close it, you can see, this is looking much better here. No, we can go back to over the editor. So here we can define the link to our core space. So weaken ad router link here. Okay? And we can add Eddie here and then inside off course, we can add at it. Okay, So if you remember, if we go toe applauding more, dear door ts We have this path defined for edit, and then it will open our at it more do and then inside off our at it model, we can see we have this Adit routing motive. And here we have defined part four of, ah, fruit and component. And then this will open over at it called Component. So now we can actually close these steps. And now inside the browser, if we click on create court, you can see we are erector toe that add to court page 51. Working on Create Quote UI: So now let's start working on the U A off our added co two page. So what we can do is we can go toe material dot i a website. And here you can click on components. And if I click on input, then we can make use off this component. And so first we need to import the a p a. So we will first import it and then we can make use off these input components, right? Also, if I click on examples, you can see the various examples that we can use another application. So let's get started. So first we can go ahead and let us closer terminal here. And let's close this course component also so we can go toe over added goat Morgan. And here first, we need to import the material mortal and they know we can go toe material more dealer ts. And here we can import our Met and put more do and we have to import it from angular prettier slash input. Okay, so we will edit here, met import more, Do you and no, we have to edit toe imports and exports, Eddie. So we let it here. Matt input. More do. So now we can save it. And now we can make use off that. So we connect, we close it. And now we can go toe over agit court component daughter html here and here. We can start by creating a form, and I want to give it a class called court phone. Okay. And, uh, let's act really move the action here. We don't want that. And after that, we can start by creating Ah, mad phone field. Okay. And inside off that we can create a new input with the Met input directive. And then let's close it for now. And now we Kaneda, plea solder dext here so we can add. And goat. Okay. And now we can actually create the mad phone field for our daughter. I think we can use this in port for all to and let's use text syria for over court so we can do text area. And here we're gonna have bad input, and then we can have placeholder and court. Okay, so now we can save it. And now if we go back to the browser, so here you can see we're getting into court and enter photo. So there is some styling missing, so we lead in the second, so let's likely close it. So what we can do is there start fading the styling So inside off of, ah, goat component orders. Djimon, we can cope with this class and here inside the excesses we can paste it and then we want to use display flex and uh ah, let's make flex direction to the column. Okay? And if I save it and go back to the brothers once again you can see we're getting the court here. Let's also increased the Berto for reforms. So inside off our court form glass, let's make it of it off 90. Prove it. So now here you can see this looks very big on the desktop. But if you go to ever more screen, so this looks much better here. So we want to use the media Graddy for our destructive eyes. So let's do it. So what we can do is we can add media screen and and we can define the minimum weird or for 768 picks is so whenever we reached that and about, we want to target our court form and then we want to say that we're worth to our 60 v w. So now we can actually save it. And then inside of the brother, we can see this looks slightly small. Actually, it's make it 50. So now we can save it, and this looks much better. So now if I open the moral screen, so this will look something like this. And on the stump device, this will look like this. So now we can go toe over eight coat page component or TS. And let's define our court here so our court will have a title, so which is currently empty. And then we'll have water and we can make it empty. So, no, we can make use off these properties inside off our form. So here, inside off the HTML. So let's close. SCS is also and we can make use off our property. So let's work on the form so we can adhere. Form it, Goto Andy fall. All right. And then we can have a submit event and we can add own safe and we want to pass it form. All right, so here we're getting others. There is no directive with exporters said to Wendy form. So what we need to do is we have to import from small jewell from angler forms so we can go toe overlap model 40 s, and here we can import other forms. More do. And we have to wear this import statement at the top. So no, we can save it. And then we have to goto over and it caught model tortillas. And here we again have to import forms. More do. So now we can save it and they're sectary close our adult court page. And now if I open it, you can see we're no longer getting this Saturday. And now what we have to do is we have to create this method on safe. All right, so we can go to our added component and here we can add on safe and maybe let's out, put it to the council and now inside off of ah, at it, Gord component or HTML, We confine to our court property here. So what we can do is we canete n g mortal. And then we combined it toe court dot title And then here we can hurt n g mortal and that we confined to court dot Oh, too. All right. So now we can save it, and then it and we can add the submit button so we can add Burton, and let's make it a type submit. And I also want wear mad Britain here. We actually want to wear Matri's working here. And let's make it a color primary. Not this. Um this should be somebody. And here, inside with a button text weaken their C so, no, we can save it. So here we're getting an error regarding setting up name attribute. So we forgot where there soldier said it. No. So here, inside, off the text area, we can add name ical, toe title. And then here, Rick Unaired name equal to outer. So now this area should go away. No, you conceive, you know, long getting the other here So we can also start by typing maybe. Ah, test court. And he had Birkenhead random or two. So now we can hit save you. And if I goto and the form and inside off the value we can see ever output here water and then tighter 52. Sending Post Request: So now let's see how we can send a post request for creating a new court. So if you go to reverse figure you're here, we can see we can click on this post to our course and this expecting title and author and the request. And when we send it, then this will create a new post for us, actually the court. So now we can go to our editor here. And then if you see here, when we output the message to the council here that form here. So maybe let's try adding a court here. So let's say test and author, and if I save it, you can see we're getting the entire form response back. But the one that we're most interested in is formed or value this one. So this will contain the value four over title and daughter. So what we can do is we will create a new constant called data, and we can assign it a value for God value. So no, we can save it. And let's inject of a service so we can add a court said was here and here we can add courts service, so make sure to wear this import statement at the top and know what we can do is began use court service method. So we're yet to create a matter for creating a court. But we can add it here so we can add goard service dot Create court. Okay. And here we can pass our data here. All right. And then we can subscribe to it so that we will get the response back. And here we can output over response. Okay, so we haven't created that matter Jet. So what we can do is we can actually copy this matter name, and then we can go to our courts service dot es. And in here we can create our new matter gold create court. And he had a big head data here. Okay, so we're passing our perimeter here, and then we're assessing it. Here. We connect, you name it, anything. Solar's. Name, it coat. And so this will be off type coat. So that is over interface and no inside off response. We can do return this start as TTP dot forced and we can add a type here cold court, and then we can make their quest to weaken airbase Yura. So if you see, we have to make the request toe this, Ural. So if you want to wait up court, we can make the request to this urine. So here we can add base your then we can add slash course. Okay. And here inside, off court, we can pass a second perimeter where we can send our data, so that will be caught. Okay, so we have this additional brackets, so we can actually move that, and now we can actually save it. So now, inside off our browser, we can start by adding a court. So we can say, if you can't do great things, no small things in a great way. And this is a court by Napoleon Hill. Okay, so now we can save it. And here we can see the response inside off, overcome, born in. So we can see online number 23 that council that we have added here. So this is a one. And here we can see we have created a new court. All right. And now if you take a look at inside off the swagger, you why? And weekly can get courts, and we try it out and execute so you can see we're getting this new court here that we have created from the front end. So let's finish by adding that Diab inside off service. So with the create goat, So this is turning us a court, so that will be off off the river off type court. Okay, so now this is looking nice. And also, as we're on it, we conceive year note, adding a type here for the get coat. So maybe let's say that I appear so that will be off type string. 53. Angular Form Validation: So now let's see how we can handle form relegation and side off. Angular. If you remember on the server side Organist application, we have added evaluation ful. We cannot send the empty title and we cannot send them the auto. So maybe that's traded the empty Ultra first. So if air test here and I send the author empty and then I save it, you can see we're getting an UN process. Civil entity. And if I collectors drop down and I hit this error, you can see we're getting the message. Gold validation failed Author, please enter. Go daughter! And if it does seem with the author so fared best here. And I move the court and you receive we're again getting unprocessed civil entity. And this time we will be getting this God tradition failed title Please enter court title. And if I remove both off these fears and I send empty requests you can see we will get this error. Good. Well addition Field title, please enter court title Author, please enter core tight. So that is working Fine. But as we're nor showing any other inside off of replication so they use it Won't know there. The users cannot send them pre title or the outer. So if I actually close it and I hit the request now so the user is not getting any feedback . So what we can do is we can handle the others on the client side. So what we can do is inside off our editor. We can go to adult court page. So now inside off our added cord component daughter html. We can make you soft met at a component so we can add it inside off met phone field so we can add mad edit actually bad? No, this one met edit. So no, here we can add. Please enter. Good. So now we can save it. And we want to conditionally show this error message when our failed is not valid. So what we can do is for over text area. We can area validation, solar cell required. All right. And now we can give it a local reference valuable solar's name, it title, and we will add it or a sign it and immortal. So now we can access this title. That means we can access this text area, which is a good input and then we conjecture for the inside off the title. So what we can do ways we can check for weaken their n g a fear. And here we can check for if for both Dieter is invalid. Okay. So, no, we can save it. And we also want to check if our input has been touched or if the value is changed. So what we can do is we can add, and we can check for title. Don't touch. Okay. And then we could check for title door dirty. Okay, So now if we save it and then we go back to the browser and here we conceive you're getting this star here. And that means this is a quiet and no if I breast something here, so let's see, maybe s here. So now we fair move it, and I leave this field. You can see if you're getting this Adah and court. But now here you can see if I hit save, we can still submit the form. That means we also have to disable a button here. And then we have to again add this required to our daughter also. So let's do that also. So what we can do is we can add maybe it acquired here first. And here we can add, author, and we can set it to end immortal. Okay? And then we can add matter here so we can have met Adas. And here we can erred, please. And that altar. And here we can also check four the same properties so we can add or third daughter in village, not to the Syrian village. And then we can take for all third door touched or or third door dirty. Okay. And he African disabled our button for that save until the form is invalid. So what we can check for? We can have disabled here and then we can check four our form. So that is this form so we can add form Dort in village. Okay? Or we can check Food form is not valued. All right, so there. So we can check. So now we can save it, and then we can go back to the browser. So now you can see our field is great out. And if I heard some text here and similarly here, So this is now active, so if I remove it, you can see this is disabled. No. And if I jane my focus toe the different input with the empty oughta you can see we're getting the other here. And if we had some text here and I remove it from court so you can again see were getting the other here. Okay, so let's try adding the right court so we can add if you find someone you love in your life , then hang on to that. Okay? So this is a court by Princess Diana, and no, you can see our button is active, and if it save, you can see the court is creative, all right? And we're getting the response back. And now if you go to ever figure you, why here we can get courts and he hit execute here so you can see we're getting the court here. And also, if I click on courts and I scroll down a bit, you can see we were getting the court heroes 54. Editing a Quote: So now let's start working on editing a court. So we conclude Concordes here and then we click on this, added a button inside off any court. So we want to edit that course specifically. So let's see how we can do there so we can go toe over the editor here and we can start by going to AARP, routing more your dhoti years. And here we can define our route here so we can actually copy this spot. And here we can add addict than Slash, and then we want to pass any dynamic I d. So that will be the court idea that we want to pass and which one we want to add it. So we again want we use this added court model or the edge court page for that. And now, if I save it and here in the browser is now we can do add it slash one. So here you can see you're getting this great good or that it got paid once again. So if they had to hear so we will get the same baby once again. And now this is there. We want to pass the dynamic I d four over court. So maybe let's see how we can first get this idea and then we will move on from that. So what we can do is inside off added Gord Cambone and RTs We first have to get this dynamic I d so this one. And to get that what we can do is we can first inject this activity route so we can do activated out and then we have to make it activity road and make sure where the import statement at the top here. So know what we can do is we can add the idea property here which can be of type string and inside off nd only in it. We can do this, not I d equal toe this start Activate route. Don't snap short. Dort put a map and then we can heard get and then we want to get I d. So now this I d go response to this I d all right. And they know what we can do is we can look, start failed putting it to the council. So they're gonna distort I d so that we can check a feel getting variety back and now inside off of her brother. You can see we're getting already to here. So if I had to for five and press enter, you can see here. We're getting do for five. But we actually want to get the i d off a court here. So something like deciding. Maybe so if I add it here and i percent and now you can see we're getting decided here. So what we want is we can go to courts. And when we edit it, we want to goto this edit page. So let's add it now so we can go toe over courts component order html here. So here we are, showing all over course, and here when we go to our edit page. So here we want where that outer link So we can add route link, and then we can add And Eddie here and here inside off the single course we can add slash edit and then for the second perimeter weaken possible court I d. So, if you remember, So our ideas specified in don't I d for the court. So if I save it here and in this figure, you a you can see we have this I d that we want toe use. And so that's a very tired here. So here we can see we're getting identified. Ideas? No. Define. So what we can do is we can go to our interface for the court here and here. We can heard that optional perimeter like this so we can have Goshen lock, and then we can make it a string so that we should go, you know? And I know this error should go away. We may have to maybe open the file once again. All right, so now you can see that it is gone here. So let's close the other tiles. So maybe this one also, and we no longer need that apple outing. So now if you go back to ever browser and we're going to the course So if I click on any court and then added burden, we conceive, you're getting its I d. Here. Okay. So now the next step is we need to get the court corresponding to decide so we can make use off the get data matter for the single court. So let's see how we can do that. So inside off, Editor, if you could over court serviced RTs We can make use off this matter here. So inside off added court. So here we inject full If this start i d. So if they i d defined, we can make the request to over court service off their stored Gore service Note Get coat. So if you see this is a method and then we can pass on what I d and then we can subscribe to the mattered here. All right. And here we will get the data back. And now let's first out put it to the council. So now if I save it and I go back to the browser and so here you can see we're getting a variety back. So this phone and these responses are same. We're getting these because I think we have added the tape operator here inside off court service. So maybe we can actually move it here. All right, so if I go back here ah, and now we can see we're getting one response. So this fun. And now the next step is we need to populate our form with this I d or the state, actually. So what we can do is So here we can do this dot court he called to data, so now we can save it. And here we conceive year populating our court here. And also if you go to courts and then click on any other court so this will be populated as well. Okay, So similar like this. And now we have to work on this save button. So currently, if I save it so I won't leak on it it this select recreate the new court. But we don't want this thing. So what we want is we want to check for if we are awaiting a court. So if we can check for maybe this string here, So if we have the dynamic i d. And in that case, we want to make a Porta Crist. So let's see how we can do that. So inside off our own save method, okay, so we can check for here You can take for if this start i d. All right. And here we want to make a particular ist, and else we can go with the same request that save one. So know what we can do is so we will create a new matter for the service for the port request or update one so we can go core service dot update good. And here we will pass that data. And then we held serve to pause ideas so we can actually make it first. This start, I d. Okay, and then we can actually subscribe to that, and then we will get the data back. So maybe that's a quote here, Okay? And then maybe we can output it. Look also Okay, so we don't have this method. That's why we're getting the out of here. And also here, I can see we're using the same maybe property years. Maybe they're standing toe court also. Okay, So that everything you consistent. And now we have to create this gold data matter or update court matters. So we can go to our courts service, daughter ts. And here we can add our update court matter, and we can actually tended to the court. And then this will be ever idea so we can make it a string, and then the court will be off type court. Okay? And this will also actually, it turned of survival off type. Good. And now we can go here and then we can go to turn this dot as TTP dot put So here we can air wrl so we can do base. You are okay. And then we want to pass courts. And the next step is we have to wear the i d. So we can add I d here. All right. And then the next step is we can pass over data. So, like this, so no, we can actually save it. We actually have to add the type here also, So we could have caught here. So now we can say with this directly north, we date out. So this is actually a court. So now they should work. Fine. So now if you go back to the browser and here we conceive, you're already own over that it court based. So maybe let's go to court once again and maybe let's select the first coat. And here we're getting my life is my message by Mahatma Gandhi. So we let stray with update here and I hit save. And then on the right hand side, we can see we're getting little spots back. So we have this title. My life is my message. And if you go to a swagger, you I and I hit execute. Forget courts. We can t v Are you getting this operator title here? All right, so here, you can see what we want is whenever we've update at the court, we want toe redirect to our goats page once again. So what we can do is inside off our agitator. We can go to adult courts component or test email, and here we can first inject the lotto, and here we can add that out. We have to import it from the angler after, Okay? And now we connect scroll down here. And whenever we create or update a court, what we want is we want to goto court speed or we wanted to take to the court space so we can do this dot photo dot navigate by. You are in. Okay. And here we can add slash courts. Okay, so now we can actually got paid to over create goat functional. So And if we save it and go back to the browser. So we're currently owned this added code page, and then if I maybe I did it and I had to save And now you can see the area director toe this speech, and then we can see the updated court here. 55. Deleting a Quote: in this video we will see how we can relate the existing court so we can go toe over editor and hair technically closed thes steps. And then we can go toe courts come born in dot html here and we re let's add a click listener here so we can have click. So whenever we click on this to lead Britain of even to fire on delete method inside off our typescript file and here we can also pass the goat idea. So this electorally court I d. Okay, so, no, we can actually save it. And then if I copy it, we can create this matter inside off course component daughter ts. All right, so we can actually change it to the i d. There is some merit. Okay, so now what? We can really cannot put this I d to the consul first Solar, save it. And now inside off the browser, we conflict going this delete. And then we can get the idea off the maybe court that we want Ridley direct. So that's safe. We want toe contest a late. We wanted lead this court. So how we can go boat it So first we have to create a method in the service. And then we can call this matter from here. So every let's try this so we can at this door court service dot And then we want to use lead court. And here we will pass the idea, and then we can subscribe to this method, and then we will get the data back, and then we can create consoled art. Log court deleted. Okay. And now what we have to do is we have do create this method inside off the court service. So here we can add the method. Okay, so this will be off type string, okay? And what we can do is begin. Do they turn this start as TTP dot delete and then we can do base urine slash courts, and then we have to pass a variety here, and then this should do the work and no head in the course. Weaken CV already passing this court deleted. All right, so now if you go to our brother once again and if I click on delete, you can see we're getting cold littered, but we're still seeing the court here. And if you go toe over get courts and they try to out execute. You can see we no longer have this court. And then if I actually fresh this speech, you can see again. We no longer have this court. So what we can do is so we can't remove this statement and we complete get data matter here . All right. And then first we can call this method from over Andy owning it. And then what we want to do is we're never would lead an item. So we can again call this method, so this will actually fix this issue. So now, if I save it and inside off the browser So let's see, if you want to delete Impossible is foran billing. So I hit. Delete. You can see here again getting the operator data and then here in the console, we're getting cold deleted 56. Adding Material Snackbar: Now let's see how we can show our confirmation alert when we create, edit or delete a court. So if you go toe the material I oversight and inside off the components and if you scroll down a bit and here we can see slack what? And if I click on show snack were so we can add this component to our application. So first we need to import this a p a and then we can use it. So let's see how we can do that. So let's close everything here and let's start by opening material model dot Es. And here we can import the mad snake were more do from angular DDO slash snack bar look. And here we can add the more deal so they can add snack bar more you here and then we have to add the imports and exports a radiator so we could have met snake. One more do. So now we can save it and close it and next weaken Goto a word added gold component in daughter Ds and here we first have to inject it inside off the constructor so we can do private snake, but and then this should be mad Snake. What? Okay, so make sure to wear the import statement here and now. What we can do is we can scroll down toe this on same method here and here whenever we created operating in court so we can create the snake over here so we can add this dot snack bar note open. So here we can see court updated. Okay. And here for the create matter, we can say this start snack, but don't open. And here we can see court could you get So now we can actually save it. And then if you go back to the browser and let's try creating new court so we can add, I don't raise to your youth growing up. And then this is alter, uh, Pablo Picasso. And now we can actually click, save and at the bottom, you can see we're getting court created 57. Connecting to Cloud MongoDB Atlas: in this section, we will talk about deployment, and in this video we will see how we can deploy our Mongol diminutive is or how we can use a production it of its another application. So currently, if you see inside off the nest application and inside off daughter E and we file, you can see here we have defined are very evil called Mongo your eye and here, you could see were using the local data vis and that we're using courts set of this. And also we're using this application called manga TV Compass Too many ever date of it. So here we have course straight of its and in here we have the collections and then you can see the records or the documents inside off this collection. And now let's see how we can use the cloud database and start of using this local IT office so that we can deploy of replication toe the clothes. So we will be using a service called Mongo DB Claudette lists So you can search for Glowed Mangala Devi Etlis. And then you can click on the first link that you see here, Mangala Devi Etlis and in here you can click on this sign in Britain and if you don't have account already, you can sign up. Also, you quickly calmed a city striker so I already have accounts so I can just sign in here and next They have to wear the past food. And then I hit logging. So inside off the clo reckless dashboard, you have to first create our cluster So we can click on this Bela cluster here and then we can use any region here. So they all a little Afridi. So I will use actually this aws and then you can choose the region there take closest to you so I can use Mumbai. And here the next you can keep the defaults here. And maybe here you can see the question name. If you want. You can click here and then rename it so I won't do that. I will keep that and then you can click create cluster and then this will go ahead and then create a new cluster for you. Now, this might take some time, So in the meantime, we can go toe database access and then we can create a new user. So here we can add a user name, so I will name it test. And then for the password, I can a test. 1234 I will actually move this user after recording the course. So after that you can click a user and now we can click on clusters. So here you can see over cluster is appreciated. So what we can do is we can click on disconnect and here weaken Jews, connect your application, and then we can cope with this string. So here you can see So we have to air the user name and password here and after that, whatever we put here, so that will be ever database. So now what we can do is we can actually copy this, and then we can go to our nest application and now instead, off this, you know, we can paste it here, and also we can change it to best. And then that will be just 1234 And then maybe let's change the database to courts. And now we can save it. And here in the browser, we can see if you're not getting any court back here. So what? We have to do is as we're using the production date of eso, we again have to create the courts. Solar said create here and then we can add a couple. Of course here. So let's add this one and hit save and let's add one more. So I've had a couple of more course and then I will be back in a second. So now I have gone ahead and created some courts here. So they're the same course that we had on over local machine. And now to confirm it, weaken goto the clusters here and maybe let's close it. And then we can click on the collections, but in here, So this feel opened explore for us and here we can see the database courts. And then here we have the schema cold course here and in here we can see what coats. And now maybe let's try editing it here. And if we aired maybe a plate, okay, and I hit update here and then I can go to the client here and a hit re fresh here and here . You can see the up pretty so let's may be rewarded back. Okay, Now I hate upped it, and here you can see this update. All right, so this is what you fine 58. Deploying NestJS to Heroku: in this video, we will take a look at how African deploy of ah, nastiest application toe Hiroko. So first we have to make up love genius trouble application so we can go toe over court servers. And here first we have to goto main DOrtiz file and then inside off Abdul Wordless. And we're very hard coating the port 3000. We have to change it to blow says dot n v dot port. So, Hiroko, make shoes off this variable, so we have to first edit. And now we can go toe the cool off site, and here we can sign up or logging. So I already have account here. So I have hit log, and then you can air your credential send hit log in here, and then you will really detector toe the dash world for the Hiroko. So here you can create a new application so we can hit this creating where button and then we can at the application names. I will neighbored courts server. Okay. And then you have to choose the region. So here you can see coursera is not available, so we have to change the name solar said course server next year's okay and then we have to select the region. So every keep returning to states and then we can hit, create app. So when we had creator very directly to this page and here inside off the deployment matter , we can see we have a couple of options. So we can either use hero cook it all we can use get her or it or we can use the container registry or use a Hiroko cli here. So let's keep it to the first option here. So what we have to do is first, we have to download and install the hero Cassie ally, so we could click this and here we can see. And then we could click on this downward and install. And then we can know in order installer for the respective platform. So I have already don't order this and then installed it for windows as I'm using windows so you could use it for your special platform. So no one they sit down, ordered, and its stall we have to run. Hero could log in. And now inside, off over terminal, we can write Hiroko locking. So if you press any keys, this will open the browser for us to log in. So let's hit. Enter here. No. First we have to make sure our project is using git. So if it is, nor using it to you could run. Get in it inside of her project as my project was already using it. So we can actually skip this command. And after that, we have to run their demort forever. Hiroko git repository. So we can run Hiroko, get remote daesh a and then our depository names. That will be courts server nest. Yes. So after that, we can press enter here. So this feel connect our local repository toe the Hiroko one. So now we can actually clear the criminal here. And then we have toe run. Couple off more commands as of a nest application. The using type skipped. So we have to make sure our Deb penalties are also bearing on the server. So what we have to do is we have to set the and fame conflict production to false and node envy to production. So we can do hit a coup gone fink set and B m gone fig production. He could do false okay. And after this is done, We can do hero coup Conficker set node e n v equal to production. So, no, we can run this and last type is very likely Closer terminal here. We have to create the Prock file and inside off the broke file we can define the script that the Haruko will run to start of a server so we can run a web and family. Ron, start broad. So if I save it and inside off Beckett or Jason, you can see we have this start your script. So this molecular run dist slash main door gs file and we will get this very well of a project. So inside off broke file, we have to find this and him Run, start road. And after that, we can actually commit double court so we can open our terminal here. And let's clear everything okay and Nova Kinnaird get and then we can get commit Dash m before he'd Oh, cool! And after that, we can run. Get Bush! Hiroko, master. All right, so now this will push other product to get and then this will build it. And this might take some time. So after this is finished, we will get the Ural and we can click on this Ural. And then we will see over a PD. So now you can see the deployment of finish. So now we can click on this u R l and then inside off over Broza, we can see our a p a. And now if I hit slash ap a here. So sure you can see the struggle You here And now if I hit, get courts and I try it out. And maybe I had execute here. So you conceive you're getting this type editor failed to fetch This is because of us are really running on a stick GPS And then we're requesting the Ural, which is as TTP. So what we can do is if you see here inside of schemes. Currently, we have a studio p so we can actually add as to DPS hair also. So if I goto the Aditya here, so maybe let's close the terminal and inside off May indoor PS, we can actually add new function so it can hurt set schemes. And here we can define Http and https. Okay. So now we can save it, and maybe Let's start our local server for so we're gonna npm run, start deaf. So this will start over local server and after this is done, we can go toe local host 3000 then slash ap a and then inside of schemes, we can see a CDP and then Stu TPS So now we can actually push this code Solar's maybe stop the silver and then we cannot get at get commit Dash m maybe update skins, Sir Vega. Okay. And after that we can do get push Hiroko master once again. So now in this field, deploy of what changes and Mantis is finished, we will again get that same you are so let's wait for it to finish. So now this is deployed once again So we can go to the browser and let's hit our productions over here and here. Yes, we're seeing over a p a. So we connect. We select https here. And let's try this court's route and I hit execute here. So sure, we can see our course here. So this is working fine. And then inside off the Hiroko tab here. And if I hit overview, then you can see the activities here And then maybe we can hit open up here and then we can start. Or so I never server from here. 59. Deploying Angular App to Netlify: in this video, we will see how we can deploy our angry replication. So then it'll if I platform. So first, let's start way opening over every application. So inside of our terminal weaken type and yes, stash. Oh, so this will go ahead and then my lover project, and then this will open it inside off the browser. So here we can see of replication. And if we go to the courts, so we're not getting anything here, So if you're perceptive well, you can see if you're getting better here. Because currently were no training over there, maybe local server here. So what have we have to do is we have to change the u N for of a server. So if I goto maybe this staff and then go to environment So currently we have this environment dot ts file and then we have this environment dark, broader ts for so what we can do is reconnect. Lee, copy this base. You are all here and maybe pasted here and here for the base. You are all we have toe add overproduction, sever your So if we see here of your l a. This one for the Hiroko's over so we can actually close it. And here we can paste it here and now Let's start over, locus over also. So we can when pm, run, start death. And now, if I go back to the application and you will be able to see all the courts here and in the network tab, you can see we're making Agresto this local horse 3000 slash courts. And now we can actually keep this running. And let's build our project so we can run n g build their trash brought. So this will build our project, and then this will create Ah, for the coldest and inside off that we can see our application. And as we're using, there's Josh brought flags, so this will actually used these environment variables. All right, so we don't have quickly change anything. Here. We connect cleared the variables that we want to use for production here. So when we actually push or applaud of replication to the net prepared home, you can see this will actually use this base your from the production fight. So now that ever barely finished where we can actually scroll up a bit. And here we can see we have this court's client folders. This afford that We need to push toe nettle if I so we can actually prevail. This an exploder. So this is a folder. So we have likely uploaded to the net. Vilify. So if I open it, you can see all of fires here and now we figure to Netley free platform and maybe, let's closest. So we can ACLU log in and now to deploy over website or application. We have couple of matters, so we can actually dragon drop this folder that we're talking about. Or we can use this new site from get so we've directly used this Prior mattered. So we will actually applaud the folder here, so inside off the explorer so we can actually drag this folder here. All right. And here we're getting site has not been deployed. And in the second, we have got this. So now if I click this your l, you can see of replication is running here, and if I hit course here, you will be able to see all the courts here and I've hit after well here. And maybe let's go to a word home pitch all right. And let's maybe click on course again So you can see here. We're making a request, and here you can see we're making request. Ouda Hiroko server ap a north that local one so over applications were confined on the production of item adults. 60. Course Roundup: So this is the end. I hope you have enjoyed discourse. And now you know how we can use next year's to create any A p a with Mondo TV and then how we can connect the next years back in tow. The angler application. I've issue luck for the future. I also encourage you to ask oceans and help others in the Q and A section signing off and thank you.