Build awesome web apps using Angular 7

1. Welcome to this course: angular is an open source Web application framework have lived by Google and a community off individuals and corporations. If you're familiar with our heart of angular Jay's rework, the new Anglo DreamWorks is a complete related from the same team that build angle urges. Originally, this really it was called angular, too. But this led to confusion among developers to gratify the team announced that separate done should be used for each frame work with angular jails, refering toe, the wonder explosions and angular suffering toe worsen store nable. As of this recording, angular Russian seven is the latest. An angular application is down abusing typescript, which, you can say is the most sophisticated video of Charles Strict. That's good off us. Some of the language regions that are currently not in JavaScript specification on it must slipped. But since the protests only understand Java skirt, the angular Famer comes with a compiler that transforms your types could called into an equal in JavaScript core. For this angular users, right back angular applications are amazingly farce. Major lead you to the concept of single paid applications on SPE. This is achieved by using a router model powered by angular which cancel or components lazily. This is primarily a hands on to, of course, which means I'll be showing you the application development process step by step from the scratch. While I'm using a couple of basic examples to make you feel comfortable with the concept, I will also be developing a full list for good pipe application toe. Demonstrate the major concepts off angular. Seven. All of the good I have developed in this course is available for you to don't wrote, Install and execute that step for doing so are shown in the subsequent lectures. However, if you want to call yourself which I strongly recommend, you may do so by typing along with me and pausing the video wherever necessary. My name is you know, I'm a softer trainer, developer consultant with an industry experience off over 20 years. I welcome you to this exciting course. There are lots of things to learn, so let's get started 2. What you are expected to know?: Since angular is used for creating Web applications, HTML becomes the number one prerequisite to do this course. You don't need to be a master in the topic, but you should be aware off some of the basic It's team attacks for creating headings. Dusan Spans ordered another lists, inserting images and hyperlinks. I haven't used much of CSS in this course, but having a good idea off CSS helps you develop nice Web applications for styling. Our Web applications generally reuse some good CSS frameworks, and in this course I have used Twitter bootstrap CIA system work. If you have an idea about the same, it's fantastic. But I'm not expecting you to know about it. Wherever I am using bootstrap, I'm going to explain what those CSS classes to. While HTML and CSS make up the presentation layer of whole Web applications, the engine part of the application is return using typescript. For all practical purposes, we can consider typescript to be an extension of Charles Bridge, so if you have a basic knowledge of javascript, you're good to go. The key features, like Adam functions and decorators will be explained as we go 3. Required software setup: in this video, I'm going to show you the basic set of required for getting started with an angular application. First, we require Norges that's head towards North Chester org and we see a couple of options here . There is a ideas. Long term support end out for dinner or two on the current Levin Dirt fight or zero Onda. During installation, you might find something on your washing here, so click on this to download. Let me see. We don't mind this stock and open that which begins the installation process. This installation is produce straight forward. It's good to the default options, okay? And thats done. No very far I can go toe terminal are Windows Command Brunt, Andi, look for Northern Test Affliction and that's his 11.5 point zero. By insulting Norges, we would have also got NPM using which we can install the necessary the angular framework and its dependencies on NPM destined wash and also make sure you something like this. 6.4 point one. You can update the NPM toe new Russian by typing NPM update that g n, p m and on Mac computers. You may want toe use Sudo which might ask the administrator password on Windows in B m of the desk. G indium is good enough. This will actually don't let the latest Russian off npm from Internet Onda makes that as your cook global installation. This may take a few seconds, and once it is done, once again, we can check El Bien de stash Russian. Andi should see 6.550 now. India Minutes North Package Manager used for installation off global packages, frameworks and project dependencies to the second aspect off for projects that would be to install angular. Now when is the angular angular is actually a bunch of flight release, But in order to get started with an angular project, we have few options. Number one, if a good resources here I have few ID's that can be used for creating an angular project on, and the ideas will take care of all those things. We will be using Visual studio court, but which is more like an extra litter, But it's a very good tool for working with angular. But there is a doing to put for angular ceiling is the command line interface, which allows us to create angular products quickly. Andi also has lots and lots off options for US toe generate few JavaScript or texted core plus build and deploy applications as well. So we'll be using this. And for this purpose, we need to go back to the command front and install the angular see light. And to do that, I'll die every being deaf. G you can say installed. Jack. Tachy are Daddy G. Instant doesn't matter. And then I did at Angulo. It's last year. Life. Andi. If you want to specify a particular Washington, you can say at by default, it is pointing toe at latest and again, I'm a required to use. So because of the Dash G installation for a regular installation, you don't need the pseudo option. And this time it doesn't not the buster, because it just ask previously. And this angular Seelye eyes a very useful tool, like a mention that it perverts lots and lots of option. To start with, it has an option to create a new project. It has an option to start a development Web server and so on. So very fine. If things are done, we can type n g death stash Washington in GE is the command that got installed when we did the angular CLI installation. And here it is angular CIA, like Washington, 7.1 point four, nor Jay's Question, 11 point by 11.0.0 and few other basic washing is listed over here, which is what we would be using. While there are many ideas available, one off the moster, probably powerful ideas are the Web stone, which is a commercial one. There is if there is also intelligent idea, which is primarily men for job, but it is also used for developing JavaScript applications. There is one angular idly by. Babic lives, so people were familiar with the eclipse that this is on i d build on top of a clips. So which is also very nice one. But the most commonly used one is visual studio Core, which different tastic XT editor for kidding for working with the job script Industrial applications on that this is the one that we would be using. It is from Microsoft based Off Atom, so you can visit court dot visual studio dot com. Onda decided before is your lawyers and list out download beings, so I already have this. It's a straightforward installation. Just download this. It's a ZIP file, unzipped it and start using that. So as simple as that. 4. How to use examples?: in this video. I'm going to show you how to use this zip find that you have done about it. So I have to off them here, counter actors it and phonebook abducts it. The first thing you have to do is tow unzip. In my case, I can just double click that and it is extracted right here itself. So I open a command front on this particular folder. So I'm opening it. Tell me none. See the best talk and then come down up. If you see the contents of this, you will see that there is a very core packaged or Jason, which has many dependent, is listed, installed the differences in the packaged or Jason you have to take in the command and b m in stop. Once the installation is completed, you can bend a command. Ng's served dash full. This will run the developments. There were and opens the application in your default frozen. The application is running. I can click the increment are determined buttons to test the application. Maybe close the browser. That's control. See on the Civil War to stop this to run the phone book application Once again, I'm gonna go under the same and open a new 10 minutes. So the city into the application folder and under command NPM feel stop to install all the differences. I know that the installation is really let's see how to run this. Unlike the previous application, this one depends on a rest endpoint, which, if you check the package torches on there is a command. Corn Jason, Sir, were added, which starts a Jason's. There were at 43 double zero Port Number, which reads the data from DB slash later Jason. So the way you can done this is by any PM run Jason Server, and this will run the restaurant point at this particular Yuanan. And now I can open another command front or I can open in your town by prison community. And then I can say in geezer Dash full, No, the application is running. I can be the contact list. I can click on any particular contact person, and it are. I can goto our new contact and try adding in your contact person as well 5. What is angular?: angular is one of the most popular framework for building client applications. Unlike the original angular days, the new angular uses typescript for developing applications along with HTML and CSS. The basic building blocks of an angular application consists off components directives, pipes on injectables, which are also known as services competence. Defined views, which are sets off screen elements along with your program. Logic and data directives are lovers to control the appearance and behavior off HTML elements. Pipes, on the other hand, are used for transforming components data into different formats, for example, and where the string value into uppercase injectables are reusable typescript classes that defined the business logic off your applications Services are Singleton's and generally injected tau component triangular. In order for us to use any of this in our application, we must group them into an N G model. Every angler has a rude module, conventionally named as at Marty. This provides the bootstrap mechanism that launches the application. Typically, this model imports other functional models, organizing your core into distinct from still models, help in managing development of complex applications and in designing for usability. In addition, this technique lets you take a one digital lazy loading that is loading models on demand to minimize the amount of court that needs to be loaded at start up. 6. Creating our first app using Angular CLI: Now that we have got all these basic set up required, let's get started by creating a new angular application. Now this is where you have to decide. We want to create our applications. I would like to create my application on my desktop and let's say I want to create a new project. Angular projects are created is in N. G. So let's have a look it energy desk trash, health toe. Identify one of the various options we have. And it is that list available commands on their sharp descriptions, and you can take N G help, followed by options Now in G nu is option so I can say engine you help and then that's gonna give me help on the new option. As you can see there, is there plenty of options that we have. But the only thing that we have to do is the 1st 1 is the name that we had to give, which is the name of the new workspace. Basically, it's gonna create a folder, which is your product. Folder also makes that as your project by name as well, and there are few other options. I don't think so. Any of these options are recorded. Despondent time. Let's just go ahead and explore that. So take your Benji new on Let's say for a jumper first we can change the name it then you want in the future. So this is gonna do ask you few questions. Just couple of them. Number one, it asked. What do you want? A rounding eso? No. Now routing is the one that wrote in basically the routing model that enables angular applications to be single braid applications and the whole purpose off. Angular Web applications are to create single place applications. Single bit applications basically means that you have one single HTML finds on the lots and lots off partial files that will be there on the browser lords. Only one html file on everything else is loaded. A synchronously making application look very rich in experience. The user experience will be very nice on. There are lots and lots of examples today in the world that you can have a look It, including Gmail, Facebook and couple of others. We would be doing this in our project, so a despite in time, we don't want angular toe interfere, but we would be manually configuring on this routing information. So I'm gonna simply say no, I don't want this floating to be added. The second question is about it's time sheet on. I'm going to be using bootstrap for this particular project, which is a which is one of the most popular you can say the in CSS framework. It's created by Twitter. Andi on It's really cool. So we're gonna use that on just going to leave it at CSS Chris Ender, and then it's gonna create the project. Scaffolding also all sorts of finds its creating. Sometimes this might look a little intimidating, but we're going to look in tow. Most off this as what they're in our project on. It also runs what the NPM install. What it does is it would have created a file called Package Dodgers. And as you can see, the package doctors and is here, the package start. Jason is the place where you have all that dependence is listed, and it's insulting. All the dependent is currently now this dependence is include something like a transfer election from job typescript to JavaScript are building off. CS is there is a There's an Rx jays which is used for asynchronous Http calls, and there are plenty of them that are in stock now. Additional dependence is like bootstrap. For example, we might have to install ourselves if you want to include our combined J query along with the angular. You can do that as well here and now that it has done, we can open off a Civil war that I'm still in my desktop. I have to get into the folder called as first on the Theory. First, I feel using visuals to the accord. You should be able to say Poor taught toe open this particular folder in your editor. If not, you can always open visual Studio Court and and then you can say I want to open that particular file. So I have had open folder option here. Click on that. I go to my desktop on desktop. I had this first time say Open now. Here we can have a look at all other finds that are generated. Since our angular application is created using typescript, which is a super set off JavaScript, it has few options here. Elect es lint touches, and this is basically about the rules on and regulations to be followed. When you're working with the typescript on you can enable visible few options from this particular Jason. Find some some of the basic rules, the obvious conflict. Jason basically has some information such as Where do you think the output file should be created? But that's so smart Should be used. What is the What is the target to be use? That means if you're compiling your typescript finds into JavaScript. What is the washing off? A transcript standards that you want to follow so that older roses get support from here and so on. Unless very quiet, We don't need to come back here at all so we can close this off course. They read me dot MD which actually get if you're publishing this in tow, get tub. You would be able to read all the North's about this particular project. You can totally ignore that. They're the package start, Jason, which is one of the most important finds that you might want to be, uh, looking in tow. And that has got some dependencies on the development. Dependencies and development dependencies in person. Something like framework like Jasmine's are carmine and typescript. and stuff like that. So which is only required during development. But these are gonna be bundled into your build fires as well. These are required on their a few shortcut commands here. So when I n g, this is the command that's gonna be used. The N G command is part of the North Modules. Andi there little dark bin directory. And as you can see that inside that you'll have an N g on Windows, you'll have injury. Doubts. CMD So that's what it's gonna execute. Even though we have installed globally, it will pick the one that is available locally whenever we're under command. And that's what is ng's here. So this is where you can come back and rename your project. If you feel like if you're publishing this project into some public repositories, this is where you might want to change the name on abortions if you want. So this is the thing is the angular Jason. This is an important file. We would be coming here in a bed toe, understand what's going on are what are the basic set up that we might want to change. So here, for example, it says that what other build options, you know. So something like which is your initial HTML which is that? SRC slash index HTM unzip goto SRC You'll see that there is an index html I insert off this HTML if you want to so say, for example Holmdel html you can you can come back and change that you were here Then there is also the main which says that which is the main file that your angular seal I should start looking into now. What happens is that behind the thin, angular CLI USA's back which is a model bundler So which means the only find that it's going to look into is this main doctor Yes, which is right here under SRC we have a main dirty s and then it starts looking into this file on. Then it goes into this particular angler core. I think I can do a control click. No. So if you look at this, if you look at this note modules at angular, there is a core on that has an indexed or did RTs essentially that's gonna be indexed R J s . Now it's gonna go into this file and then it's going toe open this one. So, like this. It starts from the main 30 years on, then goes into the entire tree structure and loads all the friends that are that are they in your application and then then wonders that into one single file or a bunch of files. Actually, it has. So there's a main find that the pollen feels five upon. If it's are basically our files that are required for supporting the older brother, especially the Internet Explorer you have won five here called Hollifield start two years. You can see that that's here, and lots of things have been committed over here, and you can see that very clearly. I 9 10 11 and Crume less than 55 request all these politics. All we have to do abuse toe. Select this and then breast gun control. Slash on Windows and command Slash on Mac and that sketch un commended. And now, if you save it and when you're on your application, you will see that even your application runs in our Internet Explorer or 1911 as well as the older wash in less than 55. And then there are a few instructions there all self explanatory, so we don't have to worry about this. I'm gonna just say, undo and exit from this particular fight. So So, basically, you have all these files that are that can be managed in your application. A few other things. For example, assets that means anything in your sex. Generally the Assets folder. Convince imagers on generally images. Icons are You may have some videos and so on so they would be kept over here. So in right now, in a sex, you can see that there is nothing at this point in time. But in Calif your files. If your project requests and cannot bear static images, it's a good idea to keep that in that sense fuller. And refer to that your HD emails wherever that is required. It also has a reference off strikes. This is where we will come back and add another entry for or bootstrap. And in case if you have 1/3 party scripts, you can specify that you're as well. It's an area off all the scripts that you require, and they will be bundled into your application dining. It also has other options to, for example, toe internationalisation which is another topic which we will cover in Dept. Later. Let's close this and if you go to the SRC main dot es It says here some basic stuff but don't worry about this. Will come back and look into this main doctor. Yes, indeed. A. But as far as our application extension, the files that matters is the index storage TML again regionally. Don't come in it that you're but you can come back and add some CSS which are not accessible. Why are the north are NPM? You can add it directly over here, which is generally not a good idea. But we will do that in case if required thistles. The only part of the is the only content in HTML. You don't have to add anything else now, surprisingly are strangely. You can see that there is something called a fruit slash fruit, which is which is not an HTM of that, but it looks like HTML now, basically, this is, uh ideally, this is supposed to be something like a door dash up dash route. But then browsers don't complain about the times that are not known. Now what actually happens is that when you run. Why, when Iran, Your angular project, there'll be additional script files injected over here. You will see that in a minute. Those include angular framework. Then, when the angular framework is loaded into the Charleston opium, it will scan once again for all these tags and look for this particular type on, then starts injecting components here now where the components the components that are created are generally kept in the Abdullah tree. It's a convention. We can always say, No, it's not gonna be nap. It's going to be somewhere else, but that is considered us your project folder. So everything that we're gonna cord is inside this app. And, as you can see that there are few fights already created for us. The 1st 1 is the at model TS. Now angular is all about modular ization. It says that you call a lot of things so, but you group them in modules. There's one model that is created on, but this model is car engine model it It's certain as engine module on its called at that model. At this point, we can always rename this if you want, but that has a bunch of references here. For example, this declaration block consists off on the components that we create here on Google. Spend a lot of time on this one, and then there is other model that my models may depend on, which is, like, in this case, it is browser market. So the present model basically is about about providing the browser are down manipulation, You can say, because we don't do any single done manipulation unless you want to indicate g query and stuff like that. But otherwise we won't be using any in Don manipulation. So that's about here. So imports were gonna refer toa some external models. It could be our own additional models, also for white us. Uh, this is a place where you're gonna be start all the services that we're gonna have. We will come back and look into this Indeed. A on bootstrap. It says that Hey, this is a component that will be looked in the index strategy TML. Now, if you just happen to look at the index dot html for a minute, it is your app. Rude slash Uproot. So this is where it's gonna say when angular starts bootstrapping it says, Hey, I have to look for this app component in the index. Html on AB component is identified using this stack. The question is, how so If I go to the app component So this is a This is basically a something that is imported from this abduct component, which is this Abdur component RTs for open thereafter component tortillas. You can see that it's exporting a classical at component, but it's decorated with that component. And one other thing that you will see here is that it is ab dash route and this is a selector. So since there is no special symbol associated with this like dot our hash, it assumes that it's going to be used as attack at routes slash uproot. And that's what actually we see here at would stash uproot. So if I had said here, don't, for example, then it looks for a tag any time with a CSS class off uproot. So this will not work in this incident. This I might have to say deal last equals toe after ash root slash do. This is how it should be given on in get. If I had used the hash instead, affair dot then I must have to give your I V equals two equals toe uproot. So basically those selector off a component determines how that component is identified in your HTML, so I'm gonna leave it as it is. We will come back and look into that later. Change those things on explore, experiment on those things. But for now, I'm gonna leave it as it is. I'm gonna save this file on save this file to Andi. You can see that this is a straightforward plans with a member variable called Title. The title of this First up here on day. This title is a variable that can be used in the HTML corresponding to this component. So every component will have an HTML associate ID. Right now you can see it says Template. You are on that template. Ural corresponds to the same folder consisting off Abdullah Component knowledge demon, which is right here. If I open that, you can see it's a HTML file consisting off some do with an image, then the welcome to and you see this variable. That variable is coming from this particular part in this special symbol here, curly brackets, double curly brackets called interpolation O R. Handlebars. Handlebars is the A B I that provides support for this template, Parsi. But anyway, the value off the title will be injected over here. We have some edge to than we have some links here. So we will not touch any off this stuff. And we will run our application and then look into how this is gonna go. So I've been open a new terminal. All right? I'm gonna open a new terminal right now. I'm already in that city. First. I've already done for Stan. I'm gonna say n g solve this is actually going toe start a development Web server. When it starts, it's going to use that back on. Dwight back is gonna bundle all the fight that we have. The html that DS files everything. CS says everything into one single jobless. Good. Fine. Andi in. It'll also start our applications. If you want. You can also say dash for toe open the default browser on DSO the extremophiles, the index, it's team it. So if I do this, it might take a while because it the first time it's opening on. But it's going to look into all the friends that we have combines starting from the main door 30 years and then gets into the entire restructure and build the resident fight. One thing it also does is it's gonna keep that server up and running here. As you can see, it's still running. But as every time I make some changes, you will see that the changes will be immediately affected over here. For example, if I go back to the visuals to the court, let me reduce the height off this. So instead of this welcome toe Titan, I can say hello. This'll is lying. And then I just used the title, and as soon a they save it, you will see that there is a compilation going on, and that compilation will. Once the compilation is done, it's going to trigger very fresh in the browser. All I have to do is to press command as our controllers and windows, and you'll see that it's a re compiling, and in a in a while you can see that it starts on restarts by browser, and it is Hello, this is my first, and instead of this first up, I can go home. I go back to my source scored off this year, and I can say that this is my forced angular seven on A and save it on. The same thing happens on you can see that the variable is now printed over here. My first Angula seven app. And if you want to remove those links and stuff like that, what we see here so I can get it up there entirely. You l slash Julia, Save it on. You can see that it's gone, right? Of course, this on. So I don't need so get it off that Syria. It's done. As you can see, it's cream fast. Andi, this is where you can go on changed a lot of things. So, for example, I can go back and add a new component and the components again. A bunch off ds html CSS files. That's the whole thing that we want to do here in the subsequent application. In case if you want our bootstrap, for example, let's say for type your airport on, I can say partner. Now this has an image abbreviation so that visual Studio court supports Emmett Abbreviation , which means I can clear something like PT and button dot bt and dark 50 and primary. And then I can hear the curly brackets say This is butter and I can first ender and you'll see that the complete HTML Court is generated out of that on This is a really, really super cool option we will be using this tour are angular application on Do you? By the end of this, you should be very comfortable with this and save this. Go back to a browser. I see a button that's pretty ordinary, but But if I goto get good stop dot com on, you'll see that there is a This is from Tudor, which, which is a very popular CSS swimmer on If I goto documentation here on there is a button. As you can see under components, I should see buttons on. There are these buttons Primary secondary success, Danger. So I'll have to use use the appropriate CSS class names. Yes, obedience is required on Bt and secondary primary success, Danger, warning and so on. Andi, this is very well documented, so you can always come back and have a look it as how to work with a button or anything for that matter. but in order to work with this for so I need to install. So what? I'll do them, you know, control, See here first. So the developments are already stopped on then I really do nt m i for install on this time . No dash G because it's not a framework. Carrots telling. It's just a set of library fights, your installer, and this is how you do pull struck, and this installs locally. For example, once I pressed Enter, you'll see that it's gonna go to the Net and download the necessary likely fights on Also Objects Packaged or Jason. So that's going to have a look at that in our editor. So I have your package. Start to some and you'll see that Packaged or Jason has now been updated with bootstrap for doctor, wrote one. I got a note models. You'll see that there is bootstrap somewhere. It'll sequentially alphabetically listed. I go to okay, Sometimes it doesn't refresh your there the refresh option. Click on that on Now I should be able to see under North models. I see you see boots stop here The gist and there is a CSS and Js. I will select see assis you against like this bootstrap mean doxy. Sso is the file that we have to update in angular dot Jason, I'm gonna go in tow the angular you can command be our control, be on windows and you take your angular. You can see that I get angular than Jason. I see that over here this is the location. Very can add some CSS, for example. I can go here and say Lord underscored models. That's the location where we have under that we have what's called Boonstra. So we have booster dissed CSS and then good strap dar lin dot CSS And with a comma on Syria , it on any changes to the angular Georgeson site that you have done In order for that to take effect, you must stop the development that server which I will be done and then restarted. You can do either Engy so all you can say npm start one in the same this time I don't need the browser pash fortune because it's already open on. And when they do this, if I go back to the browser Andi, check my application. I should see a button changing with CSS applied on that s it. Says combined successfully. Didn't refresh here. So let's do that manually. So when I do a refresh, you can see that now the button is a blue collar button on. Of course, if I go back to my rear score, change this from primary toe save danger, for example. Save it on. You can see that's gonna be under it, but in in a way, right. So 20 of options in bootstrap. Let's explore that as we go forward. 7. Creating an angular app from scratch: In the previous video, we saw the software center required for working with an angular project be built, an angular project using the N. G or angular CLN. We made some changes in our applications. So how the whole thing works on this particular model, I want to show you as what is an angular component. What is a module? And how do you boot stop that component? Everything from the scratch. So for this and you use the same project that we used in the previous video. But I'm gonna delete all things that are 100 It, especially the up part of it. So I'm gonna select a lot these fines here. And if I select on delete, you should see that there will be editors project. So if I say view developer on developer tools are Charles kept concern, which is, Ah, command ship J Control Shivji. So this is where you're going to see others liken talk this on the right side so we can see the page as well as this. So if I go here and delete these files, you would see that it's gonna cause a and a bunch of adults in a minute because the final story exists it street compiling, and it's coming back with thing that hey failed the Lord. We don't even have an at module on. And that's kind of that's That's an other coming because our main Doherty s which is the entry point now, where is that mentioned as an entry point in angular Jason? We saw that the main five is nothing but SRC dot Main doctor. Yes. If ago domaine dot ds, you'll see that it refers toe app module which just know be deleted. So what I'm gonna do is I'm gonna get it off all these things at an import. So let's say import our dog slash ab slash Let's hear, for example, my example, uh, as a samadi, as you know, that it doesn't exist. That's created one here, So I'm gonna go go to the app andan I'll say new fine car mind example APD RTs And if I sell it? If it simply taken so long, Andi then I take your say so from my example Savage. Let's go see what happens when really fresh. Let me restart the several Angie So? So there is no address we could go back to the browser. You'll see that hello from my example app. The output comes, but at this point in time, it's no longer an angular application because there's no angular inward. So the only thing that is in order is that your backpack looks at the main door, tears on imports this file, and in that file, all I have got to the console dot log. There's no angular inward here. So this is where we wanted to get an angular application. So I'm gonna go and clear that class. So it's a class. Let's say it's called Hello, world component. Andi, nothing there. I'm gonna give you a message for further timing. Anything. I'm just gonna have a class. But this class becomes a component by adding at component to your plus. I know that because this is an angular project. Lot off angular support is provided by via score, and it's also automatically give me auto import from angular core on. When I do that, it comes up at decorator in typescript is always given with curly bracket and a bunch of options on. The only option that I'm looking at right now is going to be a selector. And since our selector waas already and uproot in index edged human probably can see that in index HTM and we have this approach slash uproot. I'm gonna just use the same selector off course. If I make some changes over here, I may have to do the same thing in index start. It's human as well. And one more thing that I want to give here is a template. I can either give a template, which is a hard border html content here or I can't refer to an externally steam and file. So for the time being, I'm gonna give template and I'm going to use this template string, which is called Ptolemy Type multiple lines. So I'm gonna stay pure. It's one and then they would slash edge one on oppressed ender. That staple paragraph on a PR a message from you know, slash B on. That's my output for the components. Wherever this component uproot stash approaches there, I want this particular message to appear so at this time we have created a class on the class is a component, but we have to give this toe angular on Say that Hey, inject this in this particular location. And to do that, you have to make a component part off a model. And a model is nothing but plants. Let's call it us after what you are. Any name off our choice. My model, for example. But it's just that plants just like how this is a regular class converted into confident. Using this decorator, we have to use that engine module once again. Auto import from that angular slash court. Andi, this is where you say that. Hey, we have to bootstrap this particular component, sometimes a booster on Don't say that Hello were component. But right now, the whole oral component is not part of this model. And in order to say that this is going to be part of the model we say here declarations. Andi, in the declarations were going to say a list off all components that you're gonna have here . Part of this model will be listed over here, but bootstrap is only the one that are going to be used in the index. It's human. So this is where I say hello. World component is one of my component now, one minimum requirement here is that the browser support because ultimately we want angular toe modify that dome so they don't. Manipulations are done by using a module which is called as a browser module. Okay, so it doesn't appear able to sit in automatically come. No problem. We can always imported import off from you can say at angular slash browser off from closer on the day you can see that there is one called a frozen module. That is what we want to you know, including our application that is come now that we have got a component, a component this part of the angular module called at Marty. You see, they're still there is no all put its refreshed, but there is no awkward. That's mainly because we never told so vacated angular models. We can clear a number off angular models, but we never said that. Use this model and bootstrap that, and this is where we need a function. Call on. This is the last part of the puzzle. So I say, import from at angular slash platform browser dynamic. This provides a function. It's use that that from grows a dynamic that's a function. So we're gonna use this function. Andi call this and then returns on object. And we said that Hey, boost up the model for at market. So if I go here and then say, which is the models? It's called at module. And now if I save this, you should see that we get our component. They can see that big our hello world message from we know Black form Brother Dynamic is the one that's doing the job. So this one basically dynamically scans your index edged demons. Why is that Index html looked in? If you look at the angular door Jason, we said that, Hey, this is a file that that's supposed to be bootstrapped. So when you say platform browser dynamic dot bootstrap model, it's going to take this model and finds out the bootstrap component. And it is a hello world company. The hollow earth component is identified as a tag called Uproot, and it's gonna look in the index html for this particular aboot. If it is found, then this is where it's going. Toe inject at this particular content is gonna be placed in the location where Absolute Slash approved instead. And that's what is happening right now it's It's even the recorded that component first and then it on, then maybe does a part of a module. But Angulo starts the work once this is given, so it's going to look for a model. And that model has a bootstrap component, and that component is status. So the question is, Can I have multiple components? In an HTML? For example, can I save your Let's go toe index html? Let me hear a welcome slash at welcome withered to produce any all put as such. There is no errors, and there's no nothing is happening at this point in time. But can I clear another component here and make it part of the same model on it is possible . For example, I can say your class welcome component, Andi. I just say here, complainant a component and I have to give minimum selector in a template. I'll give your a selector is ab welcome. That's what we used just now in the index html here and then I would say the template for that is a simple H one or H three. Welcome to angular. So in training slash extreme, I save it. I have created a component. It's not gonna appear mainly because it's not part of this particular model. So in order to make it part of the model, I have to say that it's a welcome component. Now you see that I have made it as part of this, but in index html, it is there. It doesn't appear here mainly because we have so say that it has to be one of the bootstrap company on. Now, If I were welcome, component stated, hopefully I should see a welcome message. Also So bootstrap component is the one that is gonna be looking index. It's German. So if I don't do that over here on, let me get it off that from the index, it's demon on. So now I can still make this component presented to the user by making this component part of the hello world components as have no, you can see that it is not included in my foot. But I can go to my hello component on in the helo component. I can always provide. Here we are. I don't know. Maybe also because anyway, it's gonna print extreme. So I'll say here, ak tash, Welcome slash. So as you can see that now. I don't need that to be a part of the bootstrap list here because it's not going to be looked in the index HTM. But instead, it's going to be part off another component. Hello, er, components. So as a matter saved right now, it is not there. If I save it and if I come back over here, you should see that. Welcome. Triangular seven training comes up on. So So this is how you can create a component, make it part of a N G module. In our case, it's the APP model and then bootstrap, that s o that Apple is actually going to be injected. The components are going to be injected. Tau our index html. Of course, a lot of things can be reflected over here. For example, it's not a good idea to keep all these classes in one place. It's a good idea to keep this in one job aspect or typescript. Module exported. Export This one on here. All right. Another model where you import everything and then start using that. So that's what we would be doing essentially. But just toe make you understand in an actual the basically on engine module is the one that is bootstrapped by angular engine model has on the bunch of components that it refers to Andi. Then it picks up one of the component to be looping in the index. It's team, that's what it's actually doing. 8. Overview of an Angular compnent: congruent is the fundamental building block, often angular application. It proves the user interface, corresponding data and even handling functions. Also, an angular application can be considered to be a tree of component, with the root component having one more child components and each of these components having child components off its own on so on and so forth. A competent generally consist off. Three Aspects number one, a typescript are year six class with member variables representing the model data and methods representing the behavior off the component. Number two, an HTML template representing the user interface that can capture user inputs into the model. Later, our present, the model data to the user and finally number three, an optional state sheet toe enhance the appearance off the user interface. Let's try to understand the same with an example. Consider the class at counter component is just an ordinary year. Six class having a member, variable car count and two functions increment and equipment. As the name suggests. When you call these functions, the increments are detriment. The value off the member gator Together, this class comprises off the company's state and behavior in order to present the same to the user. We need an HTML core. Take a look at this HTML snippet. As you can see, we're including the valuable count and the method calls toe agreement and increment. This hedge demon has access to the competent state and behavior. The devil Curly brackets, also known as handlebars, binds the model data on the U. N. Changes to the modern data is reflected immediately. The confidence functions are bone to the you're using their own. Brackett's. For example. The clicking went off. The buttons here are associated with agreement and increment functions defined in the competence class, so clicking on a button triggers the assigned method. Call changing the Morgan data, which will be reflected instantaneously on the you are in order to combine the plus on HTML to make a component, we use types groups, decorator. This is similar to Joe's annotations and darkness attributes here. The plus at counter is decorated with that component. Decorators in Desperate are passed an object as perimeter for the component decorator. Here we're specifying two important properties. First, the selector defines the way component is used. For example, at counter without any prefix to symbol implies that the component should be used like an HTML element. If you use dark at counter for the selector property, then the component is used as a CSS class. If you use square record around at counter for the selector property, then the component is used as an attribute, often html element and one last. If you use hash up counter for the selector property and the competent is used as an idea. Often it's Gmail element. General practice and angular recommendation is that the components are used like HTML elements. The second property template correspond toe the html part of the component. As you can see, we have used year six templates. String for embedding multilane html core. Ultimately, the class definition on HTML can be kept in separate files. This all those modularity and separation of consents. For this use the template Ural instead off template property and assigned the related parts often external. Html five 9. Using Angular CLI to generate new components: let's take examples off creating new components using the angular CLI or the Engy Command onto the monster. The working of components I have already created a brand new angular project called Counter at a Zoo Conceit Salary run in years, so welcome to contract and has got the basic links here already opened the same thing in visual studio core. This is a brand new application. Nothing has changed except that I've added bootstrap CS is to this one. Other than that, there is nothing that so we do have here at SERC app and we have your app component of tears which has got this title. We can change that any time we have the html corresponding to the same thing which has gone on this stuff. We will get it all these things and our own header footer on another component for counter application. And then there, the CIA says, I'll show you how this year says can affect our view as well. No, of course, we do not want toe change anything at this time, but we want to add a new components toe our application now, remember, every time we added a new component, it has to be registered with our engine modules, which is there in at modern ideas. Right now, there's the only component, as you can see that component. Now, I'm gonna create another component here, and this is going to be called Let a app header on at footer on golf course the counter component. Now, to create these new components, I have to goto a command front, which is terminal here. Now. I can stop this. I don't need to stop, but I can. But on Mac, I can open a new tab on by present command t on. Then I have a new command prompt here. So my star is still running here. But I have another tap that is open, which is in the same location. I said you can see that I'm in the counter app here now to create a new company, you can use the command n g generate on, then save component. Now, of course, we have a shorter brilliant out the same thing. You can simply say n g g c g for gender, t for components and then you need to give the name of the component you want to create. Suppose If I wanna create head a component, then you just start to type. Header are if its app header give capita Now I can say for example Rapido But what happens is it's gonna create everything in this location making this a bigger fight. So what? We can organise them as a four that I consider components slash. So it's going to clear the new for liquor components and intact that I can say that it's supposed to create me a dash header component. Now it will also add a perfect off app dash for every selector in this demonstration. I believe that as it is and I pressed Enter Onda later. I'm also going to say I don't want any prefix because anyway, I have given your app Dash other is gonna create ABX dash abduction as the perfect. We'll see that in a minute. Come on a press Enter Italy gendered four different files The files comprises off a CSS and HTML, a Esther Spectacor and then your actual component court. Now, if you don't want respect, for example, you can always say cash respect equals two funds. You don't get this file it up. You can also verify that the file after model tortillas has been updated with you can see that it has added after their component to our applications. That's really need, because otherwise I have to keep track of adding each one up there. Now if I go there if I control click this particular fight on DSI. What is there in that? You can see that it has added a perfect AB dash to our application, which doesn't look nice. I'm gonna remove that. I'm gonna leave it us at header on golf course. That's just a header over here. So there's nothing in this, and it's only a new company announced on your return date here on NGC on this time, it's a component slash footer. Angular has a few recommendations as how the naming convention should be followed. So they say use a perfect so it is not going toe collide with any of the building. HTML tags are some other frameworks stack, so it's always better to specify your free mood specific Perfect. Over here on this time out, so say that's just spec equals two falls that's just prefix equals to an empty string. If you don't give an empty string. Then, of course, it's going to take up cash. So this time you'll see that there are only three felt that get generated. Andi, there is update, of course, in the model DS on. Also, just to make sure that we have got the generator, you can see the app footer the component. If you look at the component to ts you see that it is now need. It's not ab Dash and Dash would just abduct shooter. So let's have one more component. And this time I'm gonna just you than a paddle on. Then I'm gonna say, uh, counter. And then, of course, we have a counter component as well. So in already used them. This is the selector that has to be used. So I have your a counter header at footer. So I go to the at Don't component html, get it off everything here and then I can say here I headed You can see it's gonna help me with this. I heard it and then I can say act ash counter slash counter off course a footer slash footer as another service and go back to the browser. I should see that the three components placed there, but all it does it, it is apt. Header works at counter works up foot or works. Of course, we This is an auto generated court for every component. Look at that components slash up header. There is the HTML part of it, and it Simples is up. Heather words. You know, we can get it off this and then put it it on. Probably inside that I can say h one. Welcome to the colander, Andi. I can add a CSS class name here by saying something like Alert honor, Dash in four separate Onda. We should see a beautiful header off course in the Footer works. Let's have a basic copyright kind of information. So let's go with a footer for the HTML. I'm going to get it off this app for their works. Of course, we can say be extra center. That's like the extra center line. And then, of course I can see here that all rights why, that's a https. We know that on this ender that's gonna be the food are supposed to be a sender lined. Andi begin sits there now, of course, the counter at counter works. And that's what I believe you want to create 10. Demo - Click counter app: in this money. Let's go and create this at counter component. So where we want toe provide a number initial value on provide a couple of buttons to implement as elastic limit the same thing This way we understand the concept off data binding. So let's go and have a look at that. Let me close all these fines on my right leg on. We have a collapse on abundance. That's really need now. So I have my source code visible properly. I go to my AB and then I can look for components at counter and there is a T s file. So this is a T s file, which is the backbone off a component. So this is you can say engine part of a component. And this is the presentation part of the company, which simply says APP works right now, the what I can do is I can declare a variable inside this class which becomes a member variable of the class. I can market us private if I want other ways. It's still fine. For example, I can say count on day because we re within typescript. We can define the variable Toby off a particular type, I can say number like this. Now, this is really nice, because that way combined time will give another. In case. If I'm trying to ascend something non numeric value to the count, he can also assign a default value in getting for assigning a value. Over here, there is no need to mention that this is a number, but you can always go and say equals 20 as the initial value if you want. Now the other place to initialize. As you can see that there is a constructor for a particular class, there's also an NGO on it. Now, Constructor is typical JavaScript class constructor. So at this point in time, classes being instance created it is not it a component that means angular is not going to be monitoring this. So if you want angular toe initially something not JavaScript, then NGO on it is the function for the job. So that comes because of an implement on in it into fists. The ah knitted interface makes sure that you have this function. For example, if I don't have it, you can see your typescript is giving another saying that at our counter component it says incorrectly implements that interface on in it on. You must provide that. So if you see that there is a light bulb here, we escort gives me an option again. Basic Commander don't are controlled out on windows and that's going to show you implement interface on in it. Of course I can select this on the court comes over here. Of course, you need to probably pull this down because we want that to be in that place. It has thrown new editor. We don't want to throw another. Instead, we can say they start count equals 20 Now, very important that you have to say this. Start here because if you're coming from other languages like Java WASI Shop R C plus plus , you can just do this where it looked for a local variable. It is not fun. It will take a member. Really. But But unlike that, JavaScript on typescript say that no, if you specified without the disk a work, it will be looking for a local variable between own house. Andi. It says that we have to mandatorily use the this keyword again. You can see that there is delightful. I can press control dark and then enter our can You there second option here. So be careful when you're selecting options. Does that count equals 20 And now I have a value over here. Zero. I can present this in the HTML in whatever the way I want. So let's go to the HTML on. Probably get it off that on any type your age, three on and say the count Currently he's on. Then I can use a curly bracket and then I can, like, coughed like this. This is an interpolation off the values, basically that whatever the value in your model plants is there that actually will be printed over here. So if I go back to the browser, it is count currently zero. But we would like to provide a couple of buttons s so that we can implement our equipment. So to provide the buttons, I'm gonna provide a Parton, Bt and Bt and primary. That's the class names that we're gonna use. Dick Clement and I'm gonna copy paste the same thing and change this toe implement Save it pardons to colonize the year increment and Dick Clement whatever I want to provide a functionally. So when I click on this increment each time, I should see this particular value be incremental. So which means we need to trigger a function called from these buttons on the functions must take this to work here. So what we do, we will provide two functions. I can say you're inclement, Andi. A regular job listed function. I consider this a your disturbed phone plus plus and then, of course, disagreement. Which is supposed to say this? Start count minus minus. I'm red using the value off that Now Harder Call this right. So it's very, very simple in angular, because now they have provided a a simple syntax toe call that function directly over here . What I can do that can simply say, use around bracket on, Then use the event that you want to find and you can see that this rear scored is helping me with what are the different options that we have? We want to use the clicking mint and the clicking when I can say Dick Clement. I know that we're school helped me by looking at the class and then use me the function that is available on here I can say once again, a click event equals toe inclement. Andi, save this. It's also put everything in a something called Container, so armed shift F will form at your court savage. And if I go back over to my application on the browser churches, if sometimes it doesn't refresh, just refresh on your room. If I implement this, you see that it's implementing automatically on Deke, lamenting also right. You can see that when I click on this particular button, the actual function is being in work. So that's a binding. What were binding your is a button to have function on. The function changes the value off the model data. And every time the model that has changed this particular value is reflected automatically , and this is called data mining. So we have a method binding, and we have a data binding. While this date of ending what you're seeing is a one reddit about it, which means that if I have a text box here on, I want the value to be changed when the user changes the value. If I want that toe, affect this particular variable that's supposed to be a two way binding So right now what we're doing is a one were binding were from the model. Later we're updating the view. White salsa is not done yet, so we're going to see that in future radios. Anyways, however, we are doing a method binding on one way data binding over here so I can implement as well as agreement. 11. Overview of Directives: directors are perhaps the most important bit of an angular application on, If you think about it, the most used angular unit, the component is actually a directive, and angular component is nothing more than a director with the template. When we say that components of the building blood seven angular applications, we're actually saying that directors are the building blocks of an angular application. At the core Directive is a function that executes whenever angular compiler finds it in the dark, Angular directors are used to to extend the power off its TML by giving news in tax. Angular directors can be divided into three types components at tribute directives and structural directors. As we saw earlier components are just directors with templates under the hood. They use the victim AP and give us a cleaner way to define them. The other two director types do not have templates. Instead, they're specifically tailored for down manipulations. Attribute directives manipulate the down by changing its behavior and appearance. We use attribute directives toe apply conditional state elements show all hide elements are dynamically change the behavior off a component according to a changing property. Some of the building attribute directors are in the style. NJ class disabled, hidden in just switch and so on. Let's take a look at some usage examples off building. Attribute Directors here disabled on Hidden. Having assigned a Boolean expression well, faughnder, invalid and formed are valid. Represent the state of the form. So based on the forms validity, the button is either disabled or enabled, and the other message is shown our Children. In this example, we are assigning a style property toe do based on an object be once failed color property. Here is an example off N G Class Act. A good director. The expression is an object representing some of the CSS classes, but whether the class should be used or not is decided based on the value off that which is a bullion. For example, if the ones age is less than 18 an extra danger CSS class is applied. If the ones gauge is greater than or equal to 80 extradites success will be applied. Structural directives are specifically tailored for creating and destroying Tom elements. Some of the building structure directors are NGF Engy, far off India's which case in this which different structural directors are used in html template with an ass trick instead off a square bracket around them. For example, the NGO. If direct, you is assigned a Boolean expression here. So if the products don't lend is equals to zero, then Engy. If real ensured that hit three is added to the long. But if the condition products Shortland equals 20 is fade, then Engy if will remove the extra from the top. 12. Demo ngForOf, ngIf, ngStyle and ngClass: to understand directors. Let's take a new project so you know, open a new terminal, getting do desktop and take command N g nu to refuse temple and say no for the voting. CSS is good. So once this is done, I would like to install Boots star as a Syrian through the directives. Timo folder 10 p.m. I put Strapped and also opened the same folder in Visual Studio Court by typing coughed art. We want to add bootstrapped or angular Chaisson ceviches. Here I have to go to the stain section at an entry here for board stuff which is north. Underscored margins slash Would stuff slash this to splash bootstrap CS is no. We will also run our project by typing energy. Self crash hope We will open the application in a new browser as well. So the other is because I gave a wrong part to the party's distance slash CSS slash bootstrapped Our window C s is go back control. See Onda run the same command once again. So now our obligation is ready and let's go and add a new component to test the direct use . So I opened a new death then they in g g c for generate, competent before the four components slash and component of we want to create Here for testing Engy for off Did it do? That's a n g for off Devil. Let's go to the app component html. Where this country is being presented and edit that that's that we see the new component go to the AB component html Here, get off everything. I made dinner as a CSS class in Judy and then I take your ad dash Engy for him as a bag. Andi Now, if I go back the frozen, I should see that our new component is placed. Now, let's understand the N g four off directing using a core sample. So let's go to the D s. First the Taliban even called people, which is an a day off any kind of object. And in the n g on it, that's initialize that with some dummy values. So I would like to add here, people, which is this start people equal stoop on me on inside the AM will create some values like , for example, leave is revealed H C 45 city, and it's also add a picture which is going to be in the Assets folder. That's probably kid under folder called Images on. I'm gonna copy a few images over here on the part of that would be slashed A sits slash images on Let's assume that it is not our chippy on the same thing. I'm gonna copy paste few times, make some changes. So we have four objects in the Ari, and now we want to look through this and then present the same details in the HTML. So the way we can do is we can go to the HTML corresponding to this Onda. Let's get off this on. Let's put a H three on. We'll say you're N g for off his jump. Now assume that we want to display the list off all the people in a Uriel like combination . So generally this is how it's gonna be. And this is a data. If you go back to the closer, you see that I have one bullet that says this is a person data, but I want this good to repeat for every person here. So to do that, we use the special syntax here n g four off the structural director and the structural directors have a thin, dark starting their ass trick on evidence. A gastric. You can see that you get the list of all the structural details here N g For even though we say Here it is Engy for off the syntax for using the same is N G four Onda. We assigned it an expression. Now this expression consist off a declaration of available, like let eat off a way that we have it discard people. So it takes one person from the people agree on, then ascended to a local variable Korpi on. Then we can access the be inside this particular and let slash Alexei first, save this now and go back. We should see the same data is repeated four times because we have 4% data over there. So instead of having this dummy data, we can actually pull the data from the person object p on, then print its details, for example, I can say here in college brackets p dot name is from the door city. Save this. And if I go back, I should see now it says we know this from Bangla and so on. Now if you want? Oh, the image off the person. So you can also put I am Jean. The source is goingto be Peter. Picture what? Peter picture is not an actual image. So we want the value off Peter picture Toby, associate it with this SSC which can be done by putting this either in a calibrated like this are we can use the square record for the SRC saying that this is a expression and the expression needs to be evaluated. Eso I'm going toe save this. And then when I opened this, I did not have any pictures. So if I refresh here, you see that because we don't have any pictures, it's not showing up the world with at this copy and paste some of the images over here. So I have copied the images into you mean this folder. And as you can see now, if I go back to the closer Onda refresh, you should see that the images appear. The images are very big in size. We want to have a common size for the same thing. So this can be easily attitude by adding a style over here. But we can also do that with the help off another directive so called Engy style. So the indie style can be assigned a weapon objects so I can define here Engy style equals toe a style expression or that here again, we're using a square brackets to indicate that this is an expression and the expression here as an object. And this is the sty property that we want to give, which could be, for example, quite on. Then I can say here 100 as the safe, but we may have to give 100 PX for pixel then, in which case this is going to be a string, something like this are ultimately we can also assign something like hide. Dr. P X is 100. So the units can be specified over here in this fashion because start cannot be used as a part of the key. It has to be given in strings like this and save it. And if I go back to the closer, you can see all the images are off 100 pixels. Right now, we can also control this from within our component to PS. For example, imagine I'm here a variable called I n g. Stine's Save it. I go back over here, I declare a variable. Of course, I m j Stiles equals toe an object consisting off height. Dark PX is 100. Of course, this has to be in the form of a a string. I can also specify border radius. Oh, five pixels. Again. Barda Radius Either has to be with a hyphen. R Oregon. Use that capital on hyphen. R means you may have to give it in courts again. And five p exit the string. So I have to give it like this All I can also say here, border radius our P X, which represents the unit. And then I can say you're five, save it and you should know, See that the radius is applied. I might want to give a little bit off margin. I can against specify here, margin dark PX is also fine. So there'll be a gap between each of do so. These styles can be now applied on multiple elements if you feel like, but we just have used to don I am the styles. Of course, this is because it's not refreshed yet and never see the Arab is gone. Since we're using bootstrap. We can also make use off the CSS classes that are available. For example, for the l. A. I can add a CSS class from Bootstrap by using n g class on Engy class season again An attribute against the we have to supply here an object where the key is the name of the class you want to give on. This is a Boolean expression that determines whether the class has to be applied are not, for example, I can see here Text dash success is true since the peace cannot contain minus, we have to put that in a string format and against you know that class extra success will be applied. If this expression values to drew, which is true, always I save it. And if I go back to the browser, you should see them in green color. Right? But I can have your aerial expression that made it untrue sometimes and that Merican fall some other time. So, for example, I can say three dot age which is the age of the person in here on. I can now check your Peter age is greater than or equals 2 18 So then you are text to success. So if I save this and go back, you should see that John Doe is not in the green color here. We can always have another one, and I can say fixed danger in case Peter HD is less than 18. So save this. I have now to separate classes, one for adults and one for minors. Of course, this also can be a function, for example, based on the age of the person. I want to get a CSS class here so I can say get CSS class on Peter, feature Vida perimeter for that. Of course, I don't have a function called get CSS class. So I have to go here, clear a function called get CIA's his class which takes age of a person that I can check your if gauge is less than 18 then return extra danger yells I can say return. Thanks Dash services Save it. Go back to the browser and you can see we get the exact same result as well. Now let's go to our html on our here heading to display that you have four contacts, so I'm gonna add you're a hit, for there are people don't lend corn Index save this began a heading that says there are four contacts. Let's forward a deal. Adoption over here such that when I click on the delete button each off, this one by 1 may be deleted. So we're gonna provide a button VT end or begin water on. Then we put a X mark so that it represents some kind of ability Action. When the user clicks on this, I want this to be deleted so on Click off the button. We want God delete person off. I won't supply the index off this particular person. Now that we have an expression that says, Give me one person object, I can supply the person object itself here. But what if I want to supply the index off the element, be in the air a people So what? We can do it. We can put a cynical in here and say index as I So the loop variable will now be given to me as I and I can supply that valuable I hear the other here is because we don't have a function called complete person located one in my t s. So I go down on, then say here, delete person, which receives an index and then I can remove the current element. So, for example, if indexes one then I would like to delete this particular car. So the way you can do is you can say this start people don't supplies, which takes the index and the number of elements to believe in that index. So I want to delete one element from the index. So now we have this function. So if I go back to the browser and click on one of the record, you can see that it's gone and it's gone on. It's gone. Every time I'm billeting, you can see that it's actually coming back with alder, the number because I'm using people that lend on. Then I click on the last one and you can see it says there are zero contacts now. Incident this message. I would like to display another message saying that there are no contacts so I can go back over here and I can say hedge for there are no contacts in your I've just pooped. I see it, but we want to display anyone off them at a given point in time, depending on the length so I can use another structural directive or n G. Is which adds this into it down all it removes from the top, depending on the condition that we have given here. So I want to check. If people are land is greater than zero. Then we have to specify this. If people don't lend is equals to zero, then we want to display that there are no contacts in your address book so I can save this . Go back. It says here there are four contacts now it is 3 to 1 on details here that are no contacts in your address book. We may also provide a real or button here which actually can trigger the call off N g on it , which is initializing this notice that this is just another function. Angular happens to call this in. The component is initialized in the beginning. But if you want o re initialize this, you can always call this yourself. For example. I can go here and add another button for a link here, or turn your 50 and or three t and dash link. And then I say your Lord on and on Click off this. I can call N G on in it like this. So there is no problem in calling like this. But remember, NJ on it is meant for angular toe initialize in the beginning, when the component is created. So I saved this. I go back here, I have four contacts delayed one by one each one of them are deleted. And then it says, Lord, date of unlikely conduct. I learned all the data once again. And then there are four contacts once more. 13. Demo ngSwitch: Let's work on another example to understand Engy, Switch and Ng's which case. So first I go toe the line front gender, a new component called N g Storage. And since we want to see this on or quote screen, will goto SRC up at component HTML and we want to include the newly generated Engy switch them also, I will commit this on behavior after sh n g switched him as a dyer. Save it. Let's go back to the problems er on dsi that it says Engy switch demo works. So which means our newly red component is available here. Let's go to the HTML off the new component. Get it off this That's at a history will say Engy switch. Don't that are four buttons, porton dot feet, Ian Thorpe et and Primary. We want four off them and then we want to have a caption button dollar that you that's put in one button toe. It's a draft, so we have four buttons. We'll also are four deals corresponding toe each one of them. So I'm gonna have here. That's it. This is Dave number dollar, and I'm gonna get four days just like that. Let's assume that each of these deals correspond to each of the buttons. When I click on the button one I want this to to be with visible on when I kick on the button to only you two should appear on when I click on the tree. Only did three should appear and so on. Now for this to work, let's go to the years corresponding. Today's declare a variable called choice on Let's give a default value off 12 the same. We read a function called SEC Choice, which receives a choice and then assigns toe distort charge. Save it. Let's go back over here, Andi, we'll call that function through this one. Some will say here on flick it wants toe set choice off one on the same thing. I'm gonna copy and paste for the others by changing the value off this. So by clicking on any off, these buttons were actually calling dysfunction, which changes the value off this choice. Na Mikel control the appearance of each of the deal because the Chinese is changing based on the click that you have done. So the first thing that we're gonna do is tow type deal on that day is gonna convince on these four days. I would like your NGO switch equals two choice on Don't make that. This is an expression. We will add a square bracket. So the Ng's, which now checks the value off Childs with an expression that I'm gonna be here in each of the deal. Now, this is the structural directive that controls the appearance off each off this deal. So that structural do here would be star NJ switch kids equals toe. I can see you that if it's one, then this is the one to be displayed. If this is too, then this is the one. So I'm gonna copy this being stupid and make the necessary changes. Save the file. If I go back to the Rosell, I see four buttons. But it says this is due number one. I changed 04 And it is This is to number four, but I do. I click. It says this is the number two and number treats each one of them work just like that. Now, just to make sure that this looks better. So what we can do is we can add some content. Let's say I want our here. I had a row with two calls. Andi in each one of them in our own image. Let the first burden corresponds to Tiger. Andi, I want to get some information about Tiger from the key. Piteous. I'll goto Wiki. Very good. On opened the first ling, That is this image I'm gonna copy the plant on and based here. And then I copied the first paragraph on then paste here as well. So we have the 1st 1 And likewise, I'm gonna do the same thing for the other views as well. So copy for four of them, Four different types of images and content. So the 2nd 1 is lion. 3rd 1 is cheetah. And for this eagle, save it. Go back to the browser on and check without Tiger Lion, Cheetah Eagle Clicking on that I get the respective details Now. Sometimes this might look like a cab, so that's what we want to achieve. So instead of but in primary I can change is too important Link on now. Of course, it will look nicer. So take a lion, cheetah and eagle. We can also have a default option in case if I have one more right now. Let's say copy this whole thing and then paste it on. Let's it. This is the child's timber. Fine. And I type your something called five, which I don't have. So when I click on bite on, nothing appears over here. So we can also add another deal and say that this particular deal is a default. So the NGO switch default. Andi, you don't have to give anything for that. And then you can type your no content our level for this election. Sorry, insurance. Save it. Go back. So now I take on eagle, I get the output and I click on this. It is no content available for selection. Sorry for the inconvenience. So off course I can go back now. One problem is that if I select cheetah here and then if I refresh the page, you'll see that it resets toe the 1st 1 Because in the component you can see the choice equals to one Is the tea for value. So every time you refresh, the component is reloaded and the choices reset to one. What we would like to do here is that we want toe a sign that previously made choice to this variable. But we have to store it somewhere else because when the browser is refreshed, we lost that data, so we have to store it somewhere else. And where we can stories is something called session storage. I can add a key here called as for example, they use a child's equals. Two. I can say choice, Andi, When you say NGO on, it'd check if the value is present. If their values present Ussing, toe this choice so I can see here. Give this value is available. Then you can say you're destruct. Choice equals toe. Get the value from session stories to save this. Go back to the browser. Now I goto cheetah and I refresh the browser on. You can see that it should still come back to Cheetah Goto Eagle. And then I reflect this page. It should still come back toe the eagle. If a good developer tools look at the application, there is a local storage and station storage and in the station storage for this particular domain. We have a value called user choice for so each time I click on an option, you can see that the value is changing and this will be kept in decision storage as long as the brother is open. For example, right now I clicked on Cheetah, so the value is three. I exit the bro's along on, then again come back. You can see that when I come back, it comes to Tiger, mainly because the data was dead in the session storage. There is no more data because it was lost when the brother was closed. So ultimately, we can also keep it in the local storage. Right now we don't have, but we can keep it in the local storage so that it will be persistent if I go back to this and change from section storage, toe local storage and then refresh the browser once it's close. This time I select lion and then close the browser, exit the closer, and then I check once more local host for two double zero. You can see that it shows the lion by select eagle. I exit the closer and then open chrome once more and then I go toe locals for two double zero. You can see it remembers the previous child, even if the browser has been close to 14. Demo - custom directive: We can also create our own custom directors to understand the same That's create a component on a direct you. So we go back to the blind drunk will take here n g genetic component. But this time it's gonna be a custom do demo, and we'll also create a new directive. N g g d. For directive. Oregon activated Generated Directive and I can say at this time a new folder called If Pills Slash Let's call it US box when I pressed Enter is gonna gender it only a es file because this is not going to contain any HTML or CSS, and it has updated. The majority is in the declaration section on. So let's go back to our APP component h Demon and Change. This Engy switched the Moto customs. Did it do Devil slash up custom directive demo and it opened the browser and I say local was for Cordoba zero. You should see it is custom directive Demo works on. What we'll do is we'll go to that new component and are they a bunch off dues that's at your do? And I said, this is a do a lot of paragraph on, say, This is a paragraph and lots of our end image. SRC equals toe assess slash images slash Goldberg jpg We'll also take their Engy style equals toe height 30 p x 150 Now we have these three elements We go back, we see this content. Let's go to our directive Plus which is boxed are directed RTs on I call this as a box director because when it is used I want this toe Surround the elements like a box? No, not the selector here has a square Brakhage at box You can give any name you want here like box itself. But Angular suggested you should use some kind of a perfect here so that it doesn't conflict with any of the building directives our HTML attributes So the square bracket here indicates that reviewed So I didn't leave. We've been given a dark at boats, in which case I could've used it as a CSS class. Let's leave that as an attribute so I can go to the HTML here on what I want is I want to see here that this is a box like this. The idea of giving it director was an active you'd hear is toe have an access to the actual element where it is being used on de control the appearance of the same. So to do so. First thing is you have tow ask for a dependency called as an element left. So we dive your fire, it element off type called element breath, which is a member off angular course. So we got that on. All I have to do is tow get the needed element, meaning that element on which this particular director has been applied on a place and styles to that to do so we use an interface after view in it. And we are this missing function which is called GI after viewing it. Now, here we can access the element inside this on. Then add some CIA sister that so I'm going to do this. I can say this. Start a limit dot native element dot style and which style we want to actually access. For example, if I want to provide of border equals two one pixel solid, let's sit back on, save this. And if you go back to the browser, you can see that the deal is now having a box. I can apply this on any of these other elements. For example, I can have your B at Fox on now. I should be able to see that the paragraph also has the box. Andi, I can go on adding more and more stuff. For example, like an idea. The same thing. A couple of times I can say bar death radius. I can just a pure fight. Except I can say here Patties off, maybe five picks up and maybe a margin also five except save this and go back and we should see that the boxes are different now. I can also add it to the AMG for want I can say here have parks on it just does the same thing for the image Also. Now I can also control certain other things. For example, if I want to supply the color for this box different than this one. So this can be done by going to our class Prickly a variable called size which is equals toe one pixel by default. So I want to replace this one and I have a style here, which is a solid someone type year type equals two solid on. But then I can say your color is equals to black, which is the default values on. Now I can change this to an expression by removing this using a back court, I can use dollars this dot size, space dollar this stock type space dollars this start color off course, you know, changes. If I go back to the browser, I still see the same thing. But if a changing political right here, I am going to get a red border. What we want to do is to supply these values from the elements here. And the way I can do is buy idea decorator for activated input on what this does is now. I can supply a property called size from the attribute here so I can add your an expression . Size equals to what is the expression? So maybe I can see here three pigs self you can see for the 1st 1 It's a play that Streep excel. But for the 2nd 1 it is not. I can also add add great input for type on after it input for color. Now I can use any off this in the element. For example, I can see your equals two company. I can say your size equals to five fixem. I can also say here color equals toe. See right, Save it, go back and you can see that it's a red color. It's a double border as well s. It's a fight, big self. I can have this to any of this. You can see here. Color includes two blow sighs. People's too three picks up equal stool death. So this way director can be used for modifying the appearance off element, which is totally customizable. 15. Creating the basic structure of our phonebook app: know that we have understood the basics of components. Andi even binding on a bit off data binding. Let's build an application on understand more about the same. So the application is gonna be a phone book application, which is going to have the absolute component comprising off other components so you can consider a proved to be a parent component. Header sidebar on home to be child components off aboot. We're also gonna have ah, routing enabled after a while where the cyber will display a few many options and taking on which you should be able to see a different component in place of home component, for example, to display the details of the contact so I may have incompetent are probably toe edit or add a new component. I may have a contact form. If you want to have a list off all the contacts you have, you may have one more company. Are if the user is typing something on the address bar and the pages not phone. We may even want to display an other bitch, which is generally called it a fortnight four page. Now, in order to save some time, I have already created a basic angular project on and I have already started to serval at local host for two double zero. I have already added bootstrap Ford, Artur at one. Andi. I also added that in our angular Chaisson to start with that, create the components that is necessary for our application. So I'm going to go into a mind front and make sure that I'm there in the working directly. That's my phone, but APP directory and I'm gonna take this command NGC engine generate component and I want the component to be in sub border card components. This is for organising our files in proper style. Then I want to create something called Header that's going to be the head of component. Andi, I can say I don't want this test cases. I can say that respect equals two farms as well as I can hear it custom to fix something like BB for phone book. So otherwise, by default, it's gonna take at. So this is gonna create three fights a CSS file. A hedge trimmer file on a text file also has updated the app model. Dirty s fine. So let's have one more. So this time I mean, it was an up arrow toe. Go back to the previous command and I'm gonna call this as sidebar one more competent at this time for home and it's gonna have a look at what is being generated. Notes that may get it up. All these fights. So under SRC, we have AB. Now you'll see that there is a components border with header home and cyber folders. Each one of them comes with the three fights. As we have seen eso there is a CSS html DS. If you look at the HTML, it says your header works. Similarly, it's his homework on then Sidebar works, right? So that's a very basic output that it's gonna produce. So we're gonna go to the APP component edged Yemen, get it off all these things and then I head outside birth as well as the home company. But while doing so, let's also make sure that we're gonna structure is just like the babys are in this light. So first I'm gonna add a deal with a role as a class me on that consists off and so you can just control space and then you can get that are auto generated, its team all poor. And this is where we're gonna have something like PB dash header onda slash Phoebe, not Heather. Not even though I'm not gonna have any child component our child content here. It is important that we give the ending tag specifically like this, not by terminating with an empty tax time. Then I'm gonna have another do our role. So I'll say here typically do roll on. This time I'm gonna have to columns so you can stay here until the call Times two. And when you press enter, you can see that we're gonna get two columns. Now, these two columns will be off equal size. And if you don't want them to be equal size, then you have toe come up with what is the device that you're gonna target on? So that's Emily used small devices that includes something like tablets. Then you have to specify what is the number off groups that you want out of 12. So the entire world is considered us too well. For example, if you see this visual studio core side but is approximately occupying, you can say three our four great. So I can give three. Then the next one would be sn remaining nine out of 12. So this would would be nine. And that's how it's gonna look like. So if you give this as for then this exceeds 12. So I think it's not gonna come properly, so you have to give it as eight. So this is fine on inside this. We're gonna provide a PB dash sale, but on inside this really color BB stash. So it is also important that you may want to specify this inside a column, So I'm gonna go provide that answer. Understate dark fun on that. Put this to after this. You can rest aren't shift F two former years html cool. Save it. And when you save it and go back to the browser, we should see Heather works CyberWorks on homeworks. It's the components have been laid out in that particular fashion. So let's go at some CSS toe, each one of them the header cyber and home. And just to show you how this would look like so it's gonna add some collapse over here. So I'm not gonna do forbid on alert alert in four is gonna be a light blue background and there are going to say you're each one s o the 100 would be like a phone book application. Onda. Let's have a paragraph to say that it's polar fine angry Lord seven. Save it and he should be not seeing it. In a minute you'll see that there is a header and of course I can provide a sidebar and home with different colors. It's going a cyber. So we have the sidebar html right here on. I don't have any options right now. We are so I can to stay pure alert. Others Onda Let's just give warning and that's gonna be a yellowish color That's out. I hit three and we'll Xavier made me. And probably that said So that's going to check it out, how it's gonna look like. So this is how the main minute off, cause you can see that there is a cat Onda. Uh, this is also not growing because we don't have much options on Anyway, we're gonna get it up. This color will be changed the color, so it will not make much of a difference. But if you really want to provide this to be a full height. Then you can add it s time to this manually on you can create, for example, at custom CSS class or as they're full height. Obviously, that doesn't exist, right? So full height doesn't exist. So I cannot define my own CSS car full height in the theaters corresponding to this So I can start with dark people. It's in CSS class on. I'm gonna provide your height. Or rather, I can say, min height 400 pixels are 600 whatever that makes sense. So we know how their menu that's gonna go into almost full light. Well, that's not really important. So I just wanted to show you how to use a CSS in a component. So we have that right here. Of course, we're gonna just remove this and add some many or items over there as we go forward. One last thing I want to show you here is the home component. Html. The whole component is just supposed to mention that this is an angular application developed by your name, for example, on a few details about that. So if you have some image, for example, you can copy some image and then place that right thing. But how do we do that? Let's go and try. So users do once again on the inside. This do we're gonna Let's a hedge. Probably three or two on there, are they? Well, you can say on and awesome Angular seven application, I say here, paragraph. So that left by its a B note tomorrow. And then, of course I wanted he made here, so I can take her. I am g SRC equals to when you say SRC equals toe. Where do you want to get the images? Phone? So I can start by saying slash a sex if you know thought the G Andi, Let's assume I want to do some CSS class names. Class equals toe high energy. Andi, this should give me an image. No, but I don't have this image, so it's not gonna come up. It's just going to give me a broken image option here. Now toe act this image. So what I do is I have to basically come back to my SRC assets. Probably. That's give a images as one sub folder here. So we want to create a folder called Assets slash Images we already have assets you're gonna have on images for the on. I'm gonna copy of Fine from my local file system to this folder. So I'll copy that file here. Corvino Tart, J p. G. So I have to change the extension from p and G toe jpg and save this. And when I come back, toe my application an urgency that the image is that, of course, it's, ah, a bit bigger image. So if you want out style directly, it is possible, For example, I can say height off. Probably. I can say 100 pixel and not more than that. And you should see No, it's gonna be a smaller picture, which makes it better. All right, so this is the initial part of our application. Then everyone provided different components toe work with our phone book application. 16. Creating the ContactDetailsComponent: Let's have a new component to our application toe. Display the details of the contact person. Andi. To do that, let's go back to the command, prompt and clear a new component called contact details that also add a model class to our application so we can work with on a day off contacts or an unusual contact and so on. To do so. Someone say n g generate class And then I wouldn't get a fuller car model slash and then give contact. That's the name that I'm gonna give so it will clear a class. There's no update required in after modeler ts onda we know go back to our leader and it's goto A source e at folder will see that there is a new component God, contact details on apart from the components. Now, you also have a model which has got a class car contact tortillas on, which is basically a simple class car contact. There's nothing daily that we're gonna outfield stuff. So what? You're for example, if I want an I d for this particular person, so I can say I d and then I can say that this is going to be offer Number five on and also we're gonna say forced me. Uh, you can say string. Last name. You can also say string And then you can born doing few things like, for example, the gender a string. And you can also assigned a D for value off. Let's save me. Then we're gonna add a data book that's are a reliable card d will be on. Let's give that a string you one, though that age type would make much sense. But let's make it s d will be We would like to use this for some transformation. So converting a data port into age, So escape string there, then you can have a few other things. For example, I want to have the picture off this person. So which is going to be a You are in a link to a your answer. Let's keep that other string on. Then you're gonna have a lettuce city so that we can service the context by city on then probably state country. Now some off. These are probably optional. For example, I may not know the date of put off a person or I may not have a picture, so I can leave that blank on. All these are probably optional eso. If you want a property to be optional, then you have to just put a question mark Attar, End of the variable, for example. I can say he will be question mark and then say they will be becomes optional. So let's also keep this picture optional. City optional state on country option Now, since we're dealing with the contact details of the person, that's also added two more thieves. Probably after this, I can say email a strictly on a four, which is also a strength. And these are the option foods. Let's keep that. So let's go for my this by pressing arm shift f save the fight. So this is gonna be our model data. That means every contact that we're gonna work with. We'll have this particular information now that we have created the modern. That's going to create the component that can display one contact person students. So let's go to the contact details. Tears file on Dhere. We want toe create a variable that says contact. It is a very blame off day called contact and you can see we get the auto import. If you don't get, you might have to manually import the same thing. So I select this auto import or it is going to take on absolute part, right? So we can also say that it has to come from a related part because we're already in the APP folder, so we can as well say here, daughter slash Then you can specify another doctor slash and then you can say modern on. Of course, Wanted it already did. So let's give this as dot, dot, slash model slash convent. So this is a file that contains our conduct class on. We are important that now it's not that we have important this so we can initialize this. Technically, this is supposed to come from some remote web service endpoint, which we're going to do it a bit later. But right now I'm on initialize that are quoted value, and the question is, should I do it over here? Are should do it over here now, as a general rule of time. So we keep this constructor only for dependency injection, but as this one for all initialization. So, to that end, let's go and create a distort contact equals toe. I can say new contract on. You have to supply some values for this. I can say here this start contact aren't on. Of course, the minimum feels that we have. So let's give ID equals to one on this dark contact. First name, right? So that's your first name. I'm gonna give my name. So I'm gonna give be not this'd or contact. Our last name equals toe marks the mandatory fields. I'll be this dark contact, wrote email. We know that we don't birth call on one last contract. Art country equals to engage, but I forgot. Start contact or you will be equal. So let's give it in a year. So format. So this is gonna be like this. So now that we have initialized this value like I said, this is gonna come from a back and saris, So we'll do that later. We do have this data. Now we have to display this on the HTML. So let's go to the HTML part of it, which currently simply says that contact details work. What we would like to display them in a nice format. Maybe labels followed by details of that. So I'm gonna use that. Do not roll. Consisting off deal dot Call into two or Rho. I needed two columns on, but this, of course, will be one. But this is for first name, last name, for example. But I won't like this so many of them. So I need a approximately around 11 off them. If I don't want to display idea eating around a doctor. Let's keep it around eight so I can go back and save your multiplied by aid. So I'm gonna give now eight of those with two columns each. So if I press controlled space at the end and entered and you can see we got completely all the details, so remembers their first name. Right? So that's the first mean on this is gonna be lost. Me? Let's give your, uh, date of books. It doesn't have to be any sequence I amounts are gonna take your email. I just This is gonna be fun number on, and we have a city stage, so we also have a gender, but will come back on that in a few minutes. So now, ofcourse, to fill the values, I can use the interpolation, so I can say a contact about first names. Now, contact here is the variable that we have created over here. So the variables were off the component are accessible to our view. So this is the view, and we can access them and bring them in this particular fashion. So I'm gonna copy this on paste it. This is gonna be the last name. The sprint. Here they will be one last. That's the country here. So we have saved this. But if you go back to your application, it doesn't show up that because currently this is phone component. So we need to change that. And that's done in app component HTML. Currently, we're using PB home where, as I have no safe TV, the ash contact dash digits. That's the new component that were created. So if I go back to your now, you can see that before first name last name That's attractive again. Again. See that it's occupying the 50% off the rule. And if you don't want that, you may want to divide that by giving an appropriate size. And so how do we do that? We can go to the contact details H demon on for each of these columns that we have got over here. We have to define a sizer. It's up to you to define what's the size you want. Now be sure Studio Court has a day off selecting a patent takes, for example, I can select like this. I can best commander B or controlled be on Windows. You can see this electing the next occurrence as they go forward. And for each one of them, I can no come back. Your I can say Call STM Dash, that's a four. And then I can come down again and they can opt in each of these columns to be called S them eight and I saved this. Now, if I go back over here, you can see that it's gonna occupy four. And then this is a campaign eight. Of course, it's a good idea if I type your contact details so that's going on one and it's no head. Oh, so I'd say history, I think Contact. Dig. It's probably a HR horizontal do right? So that's how it's gonna look like now. Now, while this is all good, we would like to display this as name of the person as we know come are also Mr our mess depending on the gender. So that's going Try that by doing this, combining these two rows into one. So just stay pure name off the person on. Then this is gonna be contact. But first name. I don't need any of this stuff now on then a space, Another interpellation. So this is what we can do now here so you can see that is going to say name is we know coma . But what if I want to display Mr our mess? I can do that on. So let me make some room over here and then I'm going to use an interpolation and say here that contract or gender people equals toe. Let's a male caution, Maher said, Mr is the value, otherwise it's missed is the better. So now we have added a logic to our view, which is technically wrong. But it does the job you can see. Now we have got Mr we not come on being the name of the person. So let's say, for example, I go back to the DS corresponding to that on. Let's change this tool for examples, Jane Doe. Of course, this is supposed to be. Does that example? Come on, let's changes to female on a senator. Save this. And if I come back here, you can see Miss Gender and it's working. But combining a business logic in view is not a good idea. So this is a logic. No matter, even if it's a very small logic, it's still a logic on what we would like to do is tow convert this into something that is reusable. So we'll see that in a minute as what is that? Similarly, here I have a day off, but right, so But what if I want to display the age of the person where I don't have the age of the person? But I do have the people be and I should be able to calculate that each of the person so all these things can be done by using what a scar pipes on. We will see that in the next video 17. Introduction to pipes and creating a custom pipe: in angular. So we have something called pipe, which can transform a value in tow. Another value. For example, If you want to convert this into an upper case, then we do have a building pipe called upper case, so I can go to my HTML here. Onda. We do have the city so I can use a literally a pipe symbol. And then I can say your upper case, and you will see that the outcome off this would be city in upper case right? It's as simple as that. So you just have to feed in this value Onda. Then the transformation will be done by this uppercase pipe behind the scene. This a per case is an alias for a typescript, plants that has a function and that function called transform. It's this particular input as an argument and then returns as substitution value for this entire expression. And that's what it's gonna happen. So angler has few building pipes. For example, if I goto angular Io and then goto dogs and you have this aviator French on, did you can look for Let's say, I'm looking only for pipes, and these are some of the commonly used pipes, and I can see that there is an uppercase pipe. That's the actual typescript class. Now let's say we can use the same concept. Onda convert this, enter contact object into a fulling. So, for example, it would be much easier for us to write this whole expression. So let me get it off this in their expression, and then type here something like contact. Let's feel that in tow. A pipe car that's a full name. So if I save this now, it's already giving me another here because typescript is ableto recognize that this is not an angular building like as well as you don't have a pipe off this time. So if you go back to the browser, you'll see that there is no or put. But if I goto view, then definable JavaScript console, you should see an editor. Let's talk this under right and you can see that it gives an error. The pipe full name could not be found on its giving another right here, so the contact bite full name, and this is where we can create our own right? So let's do that by going toe the client prompt just like how we generated components this time a military n G generate fight soapy for pipe here. And then you can specify fives. That's gonna be my folder name. And what is the name of the bite you want? So I'm gonna call this ass for me. It's gonna clear a couple of files Number one would be a pipe itself. A second would be a speck. So I don't want to create any test cases at this time. So let's try down spectacles to forms onder. If a press enter, it's gonna create one single file on updates the module file as well. So that's because just like how you have a component to be part of a module, even pipes also are supposed to be part of MRT. So now that we have done that, let's go back and check. Is there any change? You can see that there's no editor, but we don't have an output. Also here on the reason for that is very simple. So let's go check it out. Let me close on the fines on de minimis goto SRC ab, and you see that there is spite and full name dark type tortillas is a new friend that got generated and that is a class with a function called as a transform. It receives value as some arguments and doesn't return anything at this point in time because it is not returning anything. It's actually on empty string that we get. You can also see that the class is decorated with pipe on that has a name and the name is fully This is the name that we defined in the command prompt Andi. It comes with a class called full name pipe Implement type transform. Now, this is the function that we would like to use so that maybe have been using this somewhere is like we said that in biblical record with it contact life, full me So which means that I'm expecting the left turns it off this pipe to be an object. So what we're receiving here is that object here. So I can it literally say you're that this is gonna take an argument off type. Let's call it us contact off type of contact. That means you must to supply an object itself if its supply anything else that's going to be an error during usage and it is going to return a string. So between the ricin type off this dress string on, Of course, we have to return something. Now we can rate, um, conditions over here, saying that if there is nothing being supplied that's return an empty string. So I can say here, if not contact on, then I can say your return. I can supply an empty string. For if contact is an actual object, it will be off this type that people and Children. It is an object of class contact. And now I can see here something like Contact Door forced me. Plus a space one space plus contact or last name Good. A closer again, you can see that I get the first name and last name here. But what if I also want to include the tighter like Mr and Mrs and so on? So let's define available card Title equals toe contact our gender two particles to men and then I say fashion mark. Then I call it as Mr Otherwise, it's gonna be missed on. Now we can combine that with debts of title plus. So if I save it and go back to the browser, it should not see that it is Mr. We know. Come on, 18. Creating a custom pipe to display the age from birth date: Let's get another pipe this time. Interrupt displaying a data port. So let's display the age of the person. Now the age of the person can be in terms. Off. Years are years and months or years and months and days. So to do that, let's add a new pipe. Let's go back to the same command changes toe age. All right, it is clear today. Age dark pipe tortillas updated the module file as well. Let's go back to our rear school. It's getting off this one on. I'm gonna go into the age piped up ts Let's assume the usage off. This happens to be something like this. You're gonna supply conduct, Doctor. You will be free to that string. Andi, that's gonna be supplied toe the age so supposed that. This should display something like, let's say, 45 years on. And then if I specifying something like this with age cooler one on de So if this one is one, it should display the same thing. Let's assume that's the seafront Andi. In case if I have option as to then let's aged 45 years on day, four months and if I have another one That's a for example. Three. It's supposed to be like 45 years, four months on seventies, an RV Trevelyan taking so this. No, we can see that in this particular case, I'm not having any additional information in here. I have one additional information, which is like one on here. It is to an inherited street. Now. The way this works is that the left time said off the pipe use age that's here will be considered at the first argument. And after that you can say colon and any additional perimeters if only supply multiple parameters than you can say colon ex school and white full and said and so on. So this will be the first argument This will be The second argument is the third argument, fourth and Fear tour. So in our case, we just want one single flag here. So if the flag is present, it is either 12 or three if it is one on anything else than to one tree, so it's gonna be this one. So this is what we want to define here now. So obviously, now the value here is, of course, the name of the variable Aiken define it to be anything else. I can even call it as you will be. And I'm sure it has to be a string. So because we know what we're supplying. So this is gonna be a string onda, followed by Let's say, for example, I call it us flat an optional. But if that is supplied, it has to be a number like this one, right? But it's optional. Why's that option? Because I don't need to supply that. So here, finance apply. I'm gonna get 45 years. Now that is done. You know, if since I'm Britain in another right out, So if you're gonna use this, it will not show you any values. Of course, I'm not used it anyways, but it's a day off, but this is followed by I want to give what is the actual age of the person. So that's going at this hour, it's tm it. So I go to the components contact details component html on. Then here is where I've displayed the d will be now along with the will be. If I want to specify how many years somewhere you that br for break on, then I'm gonna use and pipe symbol and I'll say yes, contact evil be life age. So now there is no better. But this is not producing any awkward assets. As you can see, there's no output here. Probably I won't provide that in a round wreckage. That's fine. It's gonna add some meaningful value over here. Now, how do I calculate the key will be I distorted, subtracted from the current to date. It's a simple logic, but we will see how this is gonna be done. I'm gonna say, If not, he will be just picked on an empty string. So we don't really display anything Adult. If the deal will be, is available, we know will appear an object. Let's create a left DT one equals two new date from developing. So we created object. Now I have to tell it What is the number off days are years between them. So I will say you're let if equals to date out now minus DT Wonder Get time Now get time Gives the time in milliseconds they don't know this is a current milliseconds. So we get a big difference. And now I can create a ditch object. That's quality it two equals Toe knew that off. New it off this now the only problem here is that it's gonna officer by 19 seventies. I have to subtract. It's Let's try this. That's type year equals toe 80 to get full year minus 1970. Doesn't upset let month because toe dd two dark get month on. Then, of course, that days equals toe. Beat it to not get date, and that's going to give the big off the month. Now. I need to return a value based on this flag so I can use your switch case. It's also clear that stream that's a let out put it quotes to or I can say age equals to an empty string. For now, it's a switch flag on. Now I can say here that if the flag is to our get the flag history, the flag is one are if the flag is default, that if there is something else, So for these two, we're gonna get the same thing. But as like, for example, I can say here all foot equals toe. I can use a back take that. It's for em pledged thing I can have variables included here. Now, this is where I'm gonna say the owner here. Yes. So that's like 45 years on the then. Of course, I don't need to say break. In fact, this is gonna be in the default section here because if it is case 100 people, it's gonna be desk. But if it is a case to, for example, I would say that it is already quotes toe years on a dollar a month. Waas on, Of course, very parent. I should say break here because if kids to be one, only this value. Likewise, I'm gonna say case three or put equals toe. We can say your dollar years, years. Let's put a dollar a month, months, dollar This'll is this So we have now given appropriately. So that's going to save it and see. Of course, one thing is I never returned. These values I have to say off would save this. Let's go back to the Rosa on you see that it is 44 years now. Let's go back to our HTML on a flag here. So if I say called in to now, if I stay with go back to the browser, it should say 44 years and 11 months. And if I take your flag is three savage go back on It says You're I believe I missed a break statement here. So that's going out of break. Savage. Go back on now. We should see that it says 44 years, 11 months and six days on if I give here in the old port. So if I say anything other than three that fine as soon of the Syrian, you go back and see it defaults to one and it's implicit 44 years, and that is how you would be able to create a pipes, which is views of one piece of logic. 19. Assignment - Create custom pipes for padding a string with some characters: So here is that I meant I have open local hose for two, double zero and the page looks something like this. And that's because the html here. So it says that the hitch one under the age of nothing else. I have created two pipes here l pad dark pipe tortillas and are bad about 5 30 years. So, really, use that in our HTML. Here. I'm gonna take a paragraph and then I'll take a name like we not Andi as another same this . You'll see that there is a left side Partridge string here and by default it allotted five as tricks. It is another example in the abduct component. 30 years have defined a variable multi, which has been a cento. The texture we know so I can come down here and I can use the same thing. I can tell me by anybody and then I can specify 25. That means they're totally written off. The whole put string is gonna be 25 out of which whatever the name occupies, stats could be on the right side, but the left tail of which will be battered using a character off my choice for example, if you put a dollar here, so that's the second perimeter for the help. So which means after parting dollars total, it would be 25 characters or average name, which is Currently we know that price fight characters on the right side. The left child will be partnered with the dollar symbol for the remaining number of characters signed. Save this. You should see $20 symbols followed by the world. You know, Nike ways. You can also use our fire. Some unclear and other examples aren't say name are 25 probably a hash on close the brackets. Save it, and I should see the fighting happens on the right side. This time, we can also combine both. Any parent are back together. Stay Here is another example. Let's give the name I did on the left side for 10 characters with as tricks. And if you don't mention anything, it's gonna be a strict by default for one day. I colon 15 save it, and I should see the total where it would be 15 on the name we know exactly lies in between . So this is the assignment I think you would be requiring around 30 minute for this on the best 20. Creating the ContactsService injectable class: the leader for this particular page here is hardcore Did in the component itself injured on the date of what this should be fetched from a remote server are from kind of a web service . This can be done right here itself. So it's not a good practice. It would be good to create a reusable class card as a service class on, then put all your business logic our data access logic in the service plants and use them in multiple places are multiple components. Now, to do this, we have to create a service class. Let's go back to the command prompt on. Let me clear this. And then I'm gonna use N g g. And then I can say s for service. Or you can say in degenerate surveys. And then I give your folder where I want to create my services. I can give service our services and then I will give what in the name of the service I can call it as a phone book. Now it's gonna clear the phone book surveys dot ts plus it also going to give me test cases , which I don't want on spectacles to farts. It's gonna cleared one single typescript plants, no update toe the at model ts. Now let's go back and open the same thing. So we're gonna go here. Uh, look at the a slash service slash phone books in his 30 s that has created a classical phonebook service. But for now, we want to have a function here that can give you contact details I'm gonna give here. Get contact Details are something like that, which takes an i d. Off number type. So it's supposed to take an idee. And according to the idea to postulate undervalued. So what is it supposed to return? It's supposed to return a single contact object. Of course. Your import that on then here is where you create the object and returned the same thing. Now, I really This is supposed to make a request toe. Http Web salaries. What? We will do that a bit later. So I'm extract this court from here on. Then put that in this particular service now. So in love, contact our i d equals toe one I would like to say I need that is suffered by the user. Now it says here that distort contacted secretaries in other because we don't have any member available. Call contact here. So what I do that this kid up on these things start somebody who's commanding on Mac control the on windows and select all of them. And then believe that, of course, one last thing is I'm going to find a local variable called Contact. So let contact. It goes to a new contract object, and then I'm sending all these values. On day one, they ascend all these values. I may have to return that. So let's do a return contact as well. So now we have a function that's gonna written an object of contact type with all these values. Now, here, we need to receive that. The question is, how do I get that function here? So one way you can do is you can always create an object off this clans phone book series, for example. You can say left service people's toe, new phone book, Soviet like this. And then you can see here they start contact equals tow service. Start, get contact details, right. And of course, I need to supply an idea. Let's apply ideas One. Now, if you go back to a brother, you should see the output without any problem. So we get that Hollywood. This is not the way you should be doing, mainly because the phone book service class itself may have some dependencies on another, literally or another service subject. For example, if we want to make a request to and it's TDP Webster reason point, we would be using something called Hits TTP Client, which is from angular. So now we don't know how to create an object off that. So we want angular to give me that object as well. So obviously doing this has lots and lots off drawbacks. In this particular case, it worked. I showed that. But it's not the right way to do the right way to do that would be toe Ask angular to create an object off this phone book service and inject that to me so that when you do is you define on. Your dependence is in the constructor. Now you should know that we never created an object off this contact details component. It is angular, which is creating an object off this class. Now, obviously angular, is supposed to call this particular constructor on at that is when. If we define a variable here, let's call it a service Onda. We defined their data type of this called as phonebook saris. Now angular knows that it has to create an object off this phone book service. Now, at this time, where angular does this angular is going to look into the positive way. Do we already have an object off phone book surveys? If the answer is yes, it's gonna inject that here. But if the object has not been created yet, it's gonna be creating one object and then passing that to me here, right, so that's called as a singleton. That means that at any point in time, you will have a single instance off phone books or risk class so on when angular created that class. So if there is any dependencies mentioned over here, angular would also inject. Those dependence is because it's now angular responsibility to create the object. So now that we have received that object overhears, this variable becomes local to this particular curly bracket pair, which means I have to create a member variable here on. Then I have to assign that local variable to the member variable and so on. But typescript has a fantastic feature here. I can declare this constructor argument to be high rate our public are protected and they automatically make this as a member. Variable now, right? So obviously in our taxes that over here I now have to say this starts that we start get contacted off one. And if you go back to the browser and you can see that the output also is coming here, we'll also add one more small details here. So let's add a contact art picture equals two. I'm gonna add a You are today's. This is an external link, so I'll save this. We're not used to this picture anywhere. So let's go to the contact details component html Probably right below the HR. So it's island. I am G on. Now we have to take SRC equals two. Now the question is how do I mean With the picture now, very simple. I can always use your contact our picture like this which is an expression that expression will be resolved. The value of the picture will be ascent to the SRC. Let me also add a bit off styling so that's not a strain equals two height off that there won 50 picks up on that. Save this. I go back to the browser and I should see a picture along with this. Now, this is not any special, but if you're designing an attribute, an expression this can be awarded in another. Wait. So, for example, if I remove this here, then it will assume that this is the actual value. That means it's looking for a picture whose name is contact our picture, which is wrong. So obviously you're gonna get an error, are you? Make it a broken picture plus an error saying that it's looking for local host for two double zero stretch. Contact that picture. Now we want to tell angular that this is not a string value. It is an expression onda. One way of doing being seen already by using a calibrated. The other way of doing is by surrounding this SNC with a square bracket. So we say now that this brandy, what we're assigning is an expression, not actual hard core values. So when I say this the issue see the same picture coming back again 21. Setting up the /contacts REST endpoint: So we have built on angular service, which is injectable, and currently it is giving me one single contact object. Now, in order for us to work with money, people contact objects and understand how to fetch the data from a remote Web service endpoint. Let's first build a Web service endpoint itself. So to this end, let's go back to a command count and I want to install something called Jason Server on. It is a very simple and sophisticated rest a service provider. Let's try installing that. So npm I for install on a life You're Jason Server. So the decent Suroor depends on age is on file, which you can keep it anywhere within your project. A tree on asylum can be anything. In fact, the later can also be served from a Jobs could file. But for now, we're gonna create a folder in our application to victory. Let's go toe thistles my application directory. So I'm gonna create a new folder here on a file inside that, Let's call it us baby slash data Jason. And this is a fight that we're gonna create Onda that fine is going to be an object. It's gonna at the Jason is going to represent an object, Onda. Each end point is represented using a key value. For example, I can pay pure contacts, which is a key, and the value would be an ari. And this would be one single contact object, for example. I can say I d is one on that. I can say first name. Of course, on this being j fun, it has to be a very strict syntax. I have to say in court one on double course, First name on. Let's have you my name. Likewise, I'm gonna give the rest of the D days. So we have got first name, last name gender. He made phone City, state, country. I believe those are the values. Did I miss anything? Yeah, date off. But so that's kind of a date of birth. So which is the will be on 1974 01 to 0. That is my first object. I can have another object just to make sure that it worked. Finds a copy of this section for the comma and taste it. So we have to conduct objects right now. Of course, as we give an i d Let's give it us, say John Doe are Let's make it as gentle on that's gonna be a female. Let's say this is an example so I can have Jane Doe at Hexham without phone. Let's put some of the phone number for every five by 897 some number. So that said, I last Texas and let's make it s U S. A. On. Let's make it us our C 85. Some other dude. Okay? And we need some image. And if I don't want to get any image, I can leave this blank, or I can even specify that this is no, because we don't have this value so we can just erase everything and then make it s no, because right now I don't have any made for that. Now let's go and check if we can work with this right now, you can see that the Jasons are what has Bean installed. I'll also go toe packaged or Jason for making an entry to start the server. So we'll go here and cleared an entry so the entry would be that's colored eyes, Jason their server. Or you can call it the rest of server anything you want, what the value for this is Jason, their server. And then you can specify the port if you want Test export by default rate starts with, I believe, 3000. So let's not give that 4200 is where my angular is running. Let's give it at 4300 on. We cannot just specify that it has to watch for any changes done directly to the fine. So that is OK. And then finally with their db slash ater Jason. And that's the fight that it has supposed to start now that we have created an option here , let's go on and run day. So in order on this you say npm Iran followed by whatever that be given here, this could be anything. I'm gonna die pure Jason Dash said, Left on If everything is ok, you should see that It says resources http locals Food three double zero slash contact. So if opened this in a browser are in a two leg postman, I should be able to see that there are two contacts. What it also allows me to do is to search my i d. For example, if It's a slash one. I should see one contact object. If I said slash two, which is the i. D. It is actually going to search automatically in idea and use you this. This also has not seen lots of features like a pagination and so on, so we can get the data from here. Now we have to contacts here, so let's go and check that DB slash data are Jason. We have to conduct. Now. If I want more contacts like this, we can get more data from a backside called mockery dot com on. And what we have to do is to specify what other fields we want. What other data types we want Onda. Then we can get it in the form off CS three, Jason and so on. Now, what I will do is I'm gonna go specify that my field ideas find Terra number. This is gonna be a first name on the type first name last me email. Fine. Gender is also fine. I don't need an i p address, but I need for And if I click on the little, give me one of the feet. The types you want a concert for? For I add phone that's going at this type. We need a d will be which is a dead off. But let's go on a date. So the dates between what? I'm gonna go give something like 01 2019 74 to, let's say some random date. 03 23 I left in 98. I don't want in this form that I wanted in my eso format. So which is what we have used in our age pipe. We want our one more feel that city off type city. We want a state off state. One more country. Of course I want the country. Andi, I also want the picture. So picture is basically right. Now let me give it as black. But I am going to add an expression here. The expression is gonna gender the value based on the I d on the gender. So let me based it over here. So basically I'm building a string concatenation which is actually going to get from one of my website in majors. Andi, if the gender is male, then men slash women on, then a slash and in the id slash store chip it So when I say apply, we do get basically an expression there. So we have first name last name, email, gender, phone. If you want to change the sequence, you can change the sequence like this dragon Drop on. I think it should. People think we have the date of World City State country picture. So we want only 100 records. We don't want too many of them. And we want toe. Get them in Jason format. Now you can download this or you can preview this. It's going to show you something like this. So we do how we can actually copy everything from here so I can press control. OK, copy and then come back Toe my data that Jason removed this Ari Andi pieced the other that I just don't luggage, I guess. Our shift after format court Now I have 100 contact details with random data. I can go on very for the same thing by looking at local host for three double zero slash contacts, slash say, for example, 88 that the person on it is a valid picture as well. So if I copy this and opened this in and you Dad, you can see that the value picture which we can use. So now if I go back on, make some changes to my salary is such that it is going toe frets the reader from the remote endpoint that we just know created. We should be able to see somebody answers data over here. 22. Consuming the REST endpoint in our service: so no overheads. Two TB Web service Back in this up and running it's time for us toe. Consume the theme in our service. Let's goto our application. The first thing that you have to do is to include a model called It's TTP Claimed model and that is to be done by going toe at at my duty. Yes, and we have to act that imports here. But of course, before that, we have to import the model itself. So we're gonna say import from at angular slash common slash STD on what is coming from that is a module part as http client modern on Once we have added that here, that has to be included in our imports section. Now, other application depends on another module and this model has a salaries called http client, if you remember, we can inject a service in tow. Another service are component. So what we want to do is we goto our phone book surveys and we say that we want to consume that http client service and the way we do it is by typing five it from American. Call it'll Http on off time, it's TTP client and thats going toe to import the 2nd 1 I should be using from at angular common its GDP. So we got that. Now that we have Http, we cannot consume the same thing. So how do we do that? So we're going to say here is start, http dot Get and we have to supply a u r and the urine for is very simple. So it's gonna be scdp local host 43 double zero slash contact slash Plus this ivy that we're looking for So I can see here plus t now, this function when you call, it's gonna redone what's called as an observable and the observable has to be consumed rather than say, the observable must be subscript So I can simply say return here on that gives me an error because here you can see that we have told that the written data type is contact. But as this is going to return an observable on, what we do here is now we're going to say that this is going to return on observable, which is from Rx Js and we say that it could be anything Now we know that it's a contact object But right now we will say any year So which means when this function is called, it is actually going to the done on observable. And if you remember where we have called were called in our component contact details and in the contact cardinals component es. So we said here this start contact equals toe an observable again. That is wrong, because contact is a variable off type contact. But as this is an observable, you know, the way we can assign is so we say first, these stocks that we start get contact details, which is an observable on observable, has to be subscribed by using a dark subscribe, and the substrate gives three callbacks. The first callback is basically about when you get the actually, don't. What do you want to go when you get an edit? What do you want to do? That a second perimeter. And when the actual subscription is complete, what you want to do now? In our case, we just want to receive the data. So when the data is available, give it to me. I would like to assign toe distort contact equals toe data, and this is what we're trying to do here If I format this so we now call the function and when the object is returned, the observable is return. We subscribe to that on whenever data is available, the data is given to me and I'm assigning that. Oh, they start contact. So I'm gonna save this go back toe browser. If you see now, we get data off a different person Now also, you can see that there is an error here initially, So it's just cannot find picture off undefined. Let's do one thing that's clear the screen and then reload once more. Onda, uh, see that we get an editor here and the reason why this is another now Andi not earlier is because when the component is loaded, the contact object is empty. It's undefined right now, Rachel, because we just declared the data type. But you're not assigned anything. We have not ascend anything in the constructor. We're not ascend anything in the NGO on in it. Also on better be assigning. We're actually has any a later point in time when the actually dies available. So But before that, the component is loaded on the U I onda the component HTML If you look it is trying to do some kind of a picture here and this is undefined at this point in time, on and undefined. The dark picture is an editor and that's what actually you're getting interrupt Cannot read property picture off undefined. Now, one easy fix for this would be just initialized this in either In the image are here itself equals toe new contact without any perimeters. Onda. Now that should solve the problem on you can see that the interest, Of course. Initially, it's still going to go to a picture on Not only they're not valued picture, so that's why it is giving. But that is fine. We can still awarded by adding a dummy picture. But this is okay, just in case if I go here and then instead of one. If I say 45 save it now, should see different person, right? This is exactly how to consume a rest endpoint using http client, we're gonna do some re factoring now, so if I go back to the service, you can see that this urine would be now used in multiple places. Obviously, it's not a good idea to keep it over here. So I'm gonna just type this as based urine, which I don't have Someone create a variable. Your call, CONST. Based urine equals toe this and that string. So now I have a simple mechanism over here. And of course, we're gonna write more and more functions, like get all contacts on, add a new contract and so on and so forth. 23. Writing CRUD operations in the ContactsService injectable: in this model. Let's add more functionalities to our phone book salaries to begin with. First, let us change the return type from observable off any toe observable off contact. And this is because in our component, contact details contacted its component DS were actually designing the return value off the subscription to our contact object. So whereas here we said that it is any we know that when we make a request to this particular Ural, it returns a single contact object. So let's change this to observable off contact. Now. When we saved this, you can see that it's giving me another because by default the get function returns and observable off object, we have to transform the response object into a contact object. This is done by calling a function called map whose job is to map on object of one type to another day. So to this end, you may have to call the function car map on, as you can see that it's not listing out the map function, so our tuxes has radius operators that you can use. For example, if I goto nor models Onda look for audits Js You can see that there is a sub module operator, and there is a plenty of operators that we can see here like, for example, conquered or catch. There is count, and many of them. One of them happens to be a map also, So if you want, you can import our exterior slash r slash operative slash man. No. Again, access this map function from this get functions. Return belly. We continue north Talk man, and then Matt has access to the response object. Let's call if estate up and we need to written a converted or map the value from the leader . I can simply sit. Data has contact, so the casting off that will take place automatically. Now you see that there is no other now for this to work, you have to add one more package to your application. So by running this command, NPM install optics JIA's dash compact. That's a this and go back to the closer to see that the result is intact. DNA. It's at a second function. At this time. We want to be ableto add a new contract, so that's color function called as our new content, and the argument would be object off contact. After adding a new contact through the http dot post, we get an observable off the contact object with the 90 as well. So we're gonna say you're observable off on that and then I can see your return. This start gets to depict are caused now The Post Rick Waas, The Ural Very one post which is this base. Ural, execute that base yard and there is no idea. Associative, unlike the previous one on the second perimeter, would be the data that you want to our which is this and not that we are receiving a JavaScript object, but that will be converted into a Jason payload and will be sent so we don't have to do any conversion from object to string here. It'll also hard, and it's to DP request Header Caldas content ID equals toe applications left Jason So everything is implicit. But if you want to our additional headers, you can always add it as 1/3 perimeter. So I don't have any such requirement right now, But when we do attend occassion, then we might have to send some authorization at us. So at this time, this returns an observable off objects So, just like in the previous case, we may have to match the response, whatever that is. Once we get into contact, object and that's going to be done. As you can see, that are pretty much one Venice. Likewise, we might want to do an update. So to do that, it's called it is off the contact. We received a contact as a perimeter, and the return value is just like the previous one. We have an observable off conduct, so we're gonna copy face the same thing on this time they return. They start Http, tar put which actually, since then it's city people request this time. Don't we need the base urine? Must the idea of the person who stated that we want to modify, which is contact our i d. And then I can say the contact often itself with the paler. So as in the previous case, we may still have to map the response to a contact object which we're gonna do now and the function is done. Another function that we want Robert here Is that delete which is identical. So the get so I copy bears the same change. The name toe delete contact. It seems the ideas a perimeter on because the http dot delete function. Andi, Unlike the previous ones, there is no contact update coming at the restaurant. So this is gonna be observable off any, and then I don't have a requirement off mapping this. Let's have one more function to this service class, which gives me a list of conduct by page. So, well, addio get all contacts, which takes a page number, which is a number on if the number was not so Let's take it to the first page, which returns and observable. But this time, instead of a single contact, we will be having an array off contact. And in order to make a request, we can simply say, returned this stuff extensively. Don't get base Yoran on. But then we say your dot map, we get the response and we convert the response in tow on array, off contact. Now, this will give me all the contacts in our resting point on. We want to make use of this page number. To do that we can read available for parents Andi, which is an object consisting off key values. The key is a string car Underscore Page and the value must always be a string, which is the page number that we're supplying. So we're gonna just convert that into a string. But concatenation and this pattern can be our second argument. Now the second argument to that get is a bunch of options, like headers and perimeters and so on. And since we want to supply only the pattern meters, so we'll save your career bracket parents. Now this is as good as saying parents is the key. Colon bottoms is the value now in Year six. If you have the key and value with same variable names, you can just type parents. So let's save this on that sour get all contact by page function. 24. Displaying the list of all contacts using NgForOf directive: Now that we have all the functions needed for application, let's are more components on this time around. We'll add a component that can get on the contacts and display. So that's going to create a new component by typing N g G C for gender components. And we want that in component. Older, Let's say it's called Contact that list on We don't want Spec. So with the doctor spectacles to fuss and that's just perfect equals two PB for phone book that's going to create three classes. Html CSS is a typescript class and also updates our APP. Modernity is with respect to the declaration section, so let's go back to our core and open the theme. So let's open contact list component of TS, which is here and will declare a variable off contacts at it. So let's calm it. Ask contacts, prudent off an array off contacted. I know that it's giving me another because we have toe import the same cypress commanders are controlled out on windows and that imported we haven't initialized this, adding, so if you want to get initial, is this true and empty array like this? But that's really not it worked because we're gonna just initialize that in the n G on in it, using our service function. So the service is an injectable, so obviously we have to inject it into our constructors. It's a private That's criticism. Respectable, off taped phone book salaries, this talk surgeries don't we can say get on contacts and we got the function, the threatens and observable, which we need to subscribe. Let's call it a start. Subscribe. The first argument is the combat that receives the response object, which is another of context that we know. So we cannot stay here. Whatever the response that comes, we want to assign toe the start context equals tow it, and they should actually take it off, retrieving the first page data in order to test the same thing. Let's go to the HTML on tried to retrieve the details off the conduct. So let's go to that and it says contact list works. But instead I'm gonna take your we're of curly brackets. And then I said contacts that's available that we have That's just to display that in the form off Jason Jason in the building pipe that one works. Whatever the object is there into Jason string. So if you go back to the browser, you would still see the previous details. That's because our at component HTML currently displays PBY contact tweeted. So let me commend the same. And then he pulled our new component, which is PB cash contact list, as a new tack. So that's include that at the time. Save it. And then I go back to the browser. I should see a list of contacts, and you can see that the context waiting some i d one toe i d 10 until if I want the second page details. I can go back over here to my competent TS and then supply the page number as that's a three. Save it. When I go back here, I should see a new set of contacts from 21 to Turkey, which is supposed to be a page number three. So let's use this now on display the view context. So let's go back to, Of course, we want police that this two page number one RB Tony would have to supply that because that great we get the first phase details any of it. Let's go to the html on you can now display at least off contacts that they had three first and say that list off all contacts. That's what I had, Charlie in order to look through and get all the contacts one by one so we can print the details of the same angular provide something called directors. So let's visit angular documentation for the same. So let's goto angular that Are you Andi? Go to the docks. There is an A p a section on in the list off types we can select directive. As you can see that there are a lot of common directives, form related activities and so on. So the one that we're looking at is what's called N G. Far off the engine. Four of directive are losers. Toe looked through a collection that we have on observable off collections, and then we can access the unusual elements of the collection. This is pretty useful. Let's go and check how this can be used. Now let's use a deal that is supposed to be repeated for every context that we have to do that will take your star. N G four equals two, and we have to given expression Expression will be like let see off contacts. Now, contacts is the member variable in our TS Here. This is a member reliable and we want toe Get one single contact on Name it as see. So now, if you can think off, see is one contact I can display the details of that See here, for example, see quite fully. So if you go back to the closer, you should see all of them displayed in the form of full names. All right, so this is how we can actually group over. And Ari, in case if this Eric grows automatically, this is also gonna grow. For example, let's put apartment here saying that, say, important for Bt and our treaty and family on. Then we'll say your Lord more the talent click event handler for the same called Lord board . And of course, we don't have this function that's gonna give another. That's save it. Go back over here. That's at a function for normal, which is supposed to incriminate the page number. And we don't have the page number it solitary variable called Asian Off number five, initially to one onda, we have to implement that page number will say this start occasional plus plus. Now we need to supply this page. Numb toe the service Don't get all contact function. So we said this start service Don't get all contact on this start page number is the variable that we want to supply to the subscript function. We will supply callback, which receives the data which is ah, corresponding a day off contents. We have toe contact innate toe this existing addict and this can be done in different base . One of the way to do is start contents equals toe annuity that consists off all the values from distort contacts, as with us, the values from data. So this is called spread operator in year six. So it's actually going to spread on the values from contact and then spread all the value from data becomes a new away. And that is a Centobie start contact you if I save this core now. And if you go back to the browser, So let's have a look at that. We get the first to turn off and when I click on Lord More, you can see that 10 more is loaded. And every time I click on this, you're going to get 10 more each time. So in order to beautify the same thing now let's go back over here. Instead of just displaying this, I can probably display the image of the person name of the person on Probably City from where the person is coming from. So let's have some CSS so concern. The end up with what's called list group on that list group is going to contain this group items, so that's out of your class equals toe list Group item. I'm probably I want to have a role with two columns that states rule with a called SM four that for the image plus called S them age for the remaining piece of data the 1st 1 is supposed to contain and give each That's our image, death and the image. Doug is going to consist off the SRC coming from Cedar Picture. But if you remember, the cedar picture is supposed to be an expression so we can see that it's an expression by adding a squared back into the SRC. Attribute. So that's a picture. No, you can also give us size. Let's give a strain of hide for example, off, let's say 100 pixel of 1 50 picture and that should be good enough. And this is a place where I want to display the names of the persons. Let's have a head for which consists off see but full me on. And we're also aware the paragraph which consists off Cedar City and see that state save it . Let's go back to the Rosa on DSI that the data is despaired nicely. 25. Route configuration and changing views: Now that we have multiple components in our applications that has contact list component and contact details component, we should be able tow switch between them by clicking a particular contact person, probably on the image or on the name. If I click on that, it should display the details off that specific person. Obviously, we have to identify where that information should come. So we would like to probably remove this contact list. And in that place, we want to display the contact details of the person. And this is done by using some concept called routing concepts. First thing you have to do is tow identify the location where the component has to be destroyed dynamically. Now, to this end, we will go to our ab AB component HTML. And this is where we displayed components by changing it manually. What I'm gonna do is I'm gonna remove that and then place a component called rotor outwit. It's a building component from angular, but this is gonna come only if you are using something called Wrote of modern. Since we're not done that. So it's not helping me out here, but nonetheless, let's add that little chocolate as attack. So obviously, if you go back to the browser, you make it better here saying that row total. It is not a valid component. If you go back to the console, you can see it. Zero To rotate is not unknown. Element now that can be fixed very quickly by going to our application are at modernity is , and we have to adhere a model called a rotor model. So let's go on ad about our model. So that's a import. Andi from on your slash road and this is gonna give me a model. It's at a model called Rotor Modern. Unlike the previous ones which we used over here, you may not be able to use this sort of model directly, and that's because you have to give something called road configuration. So which is another that's create that right here? We can shift this elsewhere later, so we're gonna declare a variable. That's if Const. Roads, which is off time called, wrote it quotes toe and and for the timing, let's leave it blank and then come down to our import section and then I hear Rotor module thought for Route on. Then we supply that roads. So you saved this. Now, if I go back to the Rosa, I should not be getting an error. But I do not have any component because we had to dynamically specify that component. Now the part of the Ural here can identify what this particular component is supposed to be . For example, if I say slash, I want the home component to come here. But if I say yes, slash contact list as an example, So this part must identify the list of component and that component should be placed over here. We may also say your slash details are contact details. This should identify a contact intense over here that this is where the road configuration comes into. Picture you to specify what part of the pot should identify work, component it fairly simple benefit. Go here and then create a road configuration object which has basically part on We say that home is the part and then that should rest Oneto a component called home component on. Now if your service it will be a blank here at this time. But once it is very loaded, we can check here by typing slash hold press enter I should see the home component. Likewise, I can also specify that another part called contact list, should identify a component called as a contact list component. Onda se pot contact details should identify a component called contact details component. Right? So now you can see that I have three different road spots, so each part identifies the specific company. Now the part that text can be anything that you want, but I didn't really keep the same thing as the suggestion off the component itself. So let's go back here on that's whole. If I say you're contact dash list and press tender, you can see that it's giving me the contact list. And of course, if I said Contract de taste, it's gonna come back and show me contact natives off a single person. So obviously, we also would like to have a root off your application pointing toe some before component, and that can be done by specifying that the root off your application should redirect toe one of this like home. Our contact lists it's up to you generally redoing in the beginning. It's not necessary, but began, Seyfarth equals toe an empty string and then we specify either component are you can say it directly to home in this case, redirected homeworks because form is a part that corresponds to text. You can also directly take your component is home confident. But only one problem is that I'm district is part of every part we want to say the empty string should be the only thing in the parts, not just part of the park. So that is done by typing for match on the same food this way. Only if the entire part is an industry, then it is redirected the home. So if I go back to the browser, you should see now that the hole is gonna display by the front. So even if I do not visit this, I remove this and press enter, you'll see that it gets redirected. Toe slash home on that comes up automatically. Now that we have got basic routing set up Now, we also like to provide many options. So if I click on the menu option, it should go toe a particular company that this is done by using something called a router legs which are simply put hyperlinks. So let's go and see how that can be done without a couple of menus over here. One is whole. One is contact list on off course. I should be able to switch between them using the hyper means, not by manually typing it on that spot. So let's go back toe the cyber component. Html. Get it up this H three and on a few buttons here. So that's forward. A weapon with Bt and on. I can save Bt and dash Primary on the button. Caption will be home. Let's say this. Go back on. You would see that there is a bottom and if you want a wider button, you can specify year Bt and Dash long that's going to occupy the full ripped off the side. But which would be nice? And then, of course, I can copy and paste this a couple of times. A 2nd 1 would be contact list so that that's a list of all contacts. And if you don't want family, you can call it that Second Billy. That's how we look at that, and this is okay. So now you see, I have two buttons, but of course kidding on which nothing happens so to this end, what we have to do is to provide what's called as a router link directive. So they're out telling Directive is given like this I'm endure so that I can have some room here so I can say Router League equals. Do now Remember, the screen record means whatever that we have given here is an expression. So this is a regular attribute, but were given a straightjacket to indicate that this is an expression. The expression is an Ari consisting off the road. What So, for example, I contest lunch ar slash home on that should correspond toe the home. Similarly, I can give you a totally on, then equals to an expression that consists off contact list. Here, save it. And if I go back to the browser, I should see two buttons on. When I click on the contact list, you can see that this rotor Oakland now shows a contact list. Similarly, when I take on this, you can see I'm able to go back to the home now. Likewise, I can also provide a route early for each of these two. Do that. Let's go back to the contact list. Html Andi. If you see, this is where I have the image. This is where I have a full name so I can add a route only either. With this are today that's added toe edge for So when I go to the edge for our a row turning equal stoop and Ari. But this time we want to supply slash contact days on save it. So when we go back here, we have the contact list. You see that I don't get a hyperlink are I don't get a culture icon, but on clicking on this, you should see that I'm able to put their different person. Of course, what we wanted to do is click on a particular person to see the details of that person. Right now, we're not supplying any details of the person that we have here. That is the reason why we're not getting that. So the next thing that we may have to do is tow wants on the information, such as an idea off this person to the contact details. So, like, for example, along with this contract, it is I might want to supply the seed or idee, and that's what we can give you. Come on, seed on ivy. So that's the reason why this is an expression. You see, this is an a day off. Two values now one is a stream. That is the part. And the second is the idea of the person that I am sending. But unfortunately practical on this, you can see that I'm getting an editor. That's because it's looking at content. Details slash three on. I don't have any mapping for this part. Like we have the mapping for contact. It is, but not for contact details slash three. So if I clear this and take on this person now, you can see it's giving me another thing. That context it is slashed. Five is an invalid one. So how do we address this? It's very simple. We go to the app model TS and say that what? Along with the contact evidence, we also would like to supply an I D. And if I this type here, I ve Then it'll assume that ivy must also be hard put it. But we know that this idea must be like one toe. Three are so on. So in order to mention that this is a valuable part of the part we give your colon, Heidi, and this variable now can identify whatever the numbers that were supplying. So if you go back again, you see that there is no other says off? No. When I click on this, it is going to the critical person. But we supply the only five, but we're not using it over here. And if you just step back and go to the contract, it is component DS. You'll see that we are always supplying 45 as the number. So even though we're standing here fine, are one, for example, were always sending for a fight. Now what we have to do is to capture this value we're sending, which is part of the part for I d Andi. Then get that I d. And then work with that. So instead of sending, 45 were toe send That idea supplied by the user 26. Accessing the route parameters in ContactListComponent: So in this morning, let's say how to receive the round parameters and then get the details off that particular contact person. And for this, we have to make itself a service. Brought it by angular rotor module called as activated wrote so we can declare a variable Say, for example, private after a rated about off type activated round. So the variable names can be anything but general tendency is that you keep the same name of the class name with a lower gets cost later. This now has access toe on the road parameters. We can make use of that in the image. So now we can say here that this start activated outdoor firms, which is an observable to which you can subscribe. And now you have access to all the unusual para meters. Let's say forums data on now using that term state are we would like to probably make a request to this one. So I'm gonna cut this from here and paged over here instead of 45 where we want supply is off. I'd so that we get the idea and nowhere is this idea coming from. If you look at this ABT modeled ears. We defined the variable called Idee here. So this is the variable that we're trying to access from the barometer state. So if I save this number here and then go back to the browser on, we have access to contact details slash one. So if I go to the contact list and I click on the second contact, you see that we're supplying to here and we're also getting the details of that person. So if I goto someone else and then get the evidence, I'm able to access that particular details Also, a couple off changes we will make your because we see that there are a lot of errors that is coming up. And that's mainly because off the slash non here. Now, if I have some deformed picture, that would be fantastic, so we can assign a different picture. You are like this so we can go to over Martin on. We have this conduct tortillas. There is a picture which is optional, and I can also assign a string here which is supposed to be slashed, a sex slash in majors, and then I can say you're off flight dot PNG Andi that should give us a default profile picture. Now if you go back to the closer, we see that we don't have an editor. And that's because I do have a picture called assets Images profile that PNG. So if you go back toe SRC and sits images, you can see I have this provider, the engine which can be used in the future. One last thing that we will fix is the size off. This is probably too big, so I want O district US 200 pixel installed on an effective excel. So we go the contact list html on. We have you in here something like 1 50 pixel. Let's reduce the tow 100 pixel and that should be fine. One last thing is that this one doesn't look like a clickable icon, but it is explicable one because of all rotor linker. We can add a bit of style here so you can say style equals toe concert colon pointer, and that makes it look like a clickable icon. You can see that I get a fingertip so I can take on that person when I get the details of the same thing 27. Deleting a contact: No, the bill seen how the routing works on How can we switch between different components by using a route hurling? Let's have a look at one more feature were programmatically we can navigate to a different view as well. For example, if I take on this person and I get the D days, that's what we want to provide. A delete put in here. Onda. When I click on the village, I want to be asked. Are you sure you want to believe this? And if the answer is yes, I should delete this. But since the data gets deleted, I do not want to be here. But instead I would like to go back to the contact list where I can view are delete more people. I can also provide a deal adoption here itself so I can kick on this. And the same thing should happen off course, in which case I don't have any for the redirection toe happen. But first, let's go and see that we can provide a delete button from here to do that. Let's go to the contact details Component Command V or control, be contact details. Yes, we're gonna provide a delete functionality here. So that's holidays. Delete contact Onda. Whatever the contact that is currently being displayed, people take to do the same thing. Now forties. We want to make it off this salaries with the distorts our restart delete contact. And that takes an idea. The perimeter so will supply this contacts. I'll be so if they start contact our i. D. Onda. This Retton's an observable on when the subscription is complete. We would like to do something such that the current view is taken off on another view is placed in the route or out late. This can be done by using another service, probably better after Madi and this is called as a router. So we're gonna provide here a variable five it around her off type throughout. And that's important here and now this variable has access to your function called navigate within distort router Don't navigate. We have to supply a day off all the part parts in our get it very simple with a contact list. That's where we would like to go on giving this takes any road para middle. We could have supplied that as some variables here, as well the only thing that we have to do now is to provide a part in for place. Let's go to the extreme and corresponding to this probably off towards somewhere here I can see for $10 median BT in danger. So because it's a delete button, I can also provide hear a click event handler equals toe delete contact function. One last thing that we want to provide here is toe. Ask the user. Are you sure you want to delete? And we say here by using, if not conform? Confirmed by the way, is a window function so we can see your Are you shoud on? If the user says no, we're going to just return from this particular place. If they use their says Yes, this is gonna go. If they use this, there's no it's just returning of it from here itself. So it saved this. Go back to the browser. Now we have a A button to village. So if I click on this, it's gonna ask me Are you sure? I say cancel. I'm gonna stay back. If I say village and I say OK, now you can see that it's deleted on. I'm also navigated toe contact list 28. Template-driven vs Model-driven (Reactive) forms: in the applications. User inputs are handled by Alphonse. A farm is a logical grouping off input elements such as text boxes, radio buttons, check boxes dropped on sup, importance and so on. Angular perverts, two different approaches to handle user inputs through forms, reactive and templates. Both of these can capture you their input from the view, validate the user input heretofore model on data model, topped it and provide every toe track changes. However, both these a protest process and manage the form data differently and offer different advantages. In general, reactive forms are more robust. They're more scalable, reusable and testable. If forms are a keeper of your application or you are already using reactive patterns for building your applications, then use reactive forms. Individual forms, on the other hand, are useful for adding a simple form to an app such as a user sign up form that easy toe to another, but they don't scale like really two forms. If you have a basic form, requirements and logic that can be completely managed in the template. The News Templar two informs 29. Working with a template-driven form for adding new contacts: So our application Now this place a list off contacts or I can click on a particular contact person toe you. The details are If I want to delete, I can click on the delete. I get a pop up. I can say Okay to be cancelled. Toe. Stay back. Suppose if you want to add a new conduct, then we have to work with forms. An annular began work with forms in two ways. One is called template driven forms. Another is called reactive forms. In this particular video, we will be working with template to inform. First, let's have a new component and poured a teacher so that I can get ahead html form to add a new contact. So I go to the command prompt. Make sure that I'm in the working directory. Are that n g generated component computers slash contact. If you don't want toe, have the expect. With this technique was Toe Falls Onda. We can get it up the before graphics and other new graphics like That's Perfect equals Toe BB for phone book. Other careers three files a CSS and HTML on a T s fight on so it has updated are more duties. So let's go to the core and open the SRC app components, and we have your honor conduct our conduct component its demon. So if you want our contact form toe appear over here, we'll probably a sidebar button. Let's go to the state of our complement each to Yemen. Copy this link based it that's blowing something leg that's contact with public on the new conduct. So we get the button here. But of course, when I click on that, we get an editor saying that I contact is not a value route. So we have to go to our at modern ideas. We have to define a new route so that when But I that's contact is encounter. A new component called our conduct component is placed on the its demon Paige. If you go here now and it's very fresh, if I click on this our new contact, you see that we get HTML page here. Of course, in order to make this as a valid HTML, let's go and at some rich human form. So goto this. Get it up this history and your contact. Let's put a simple HTML form. I'm going to use their form dot form. That's gonna be our bootstrap CSS class. We don't need action here because we're not submitting. This year s are over 30 source, but we would like to have a label and it takes part for each of the properties. Let's have a deal with form groups and then consisting off label plus on input with form control. As a class, the label will have first name as the caption on the input text box is supposed to be for the first name. The actor good form should correspond to the idea of this particular input box so I can give you first name. I don't have an idea. Let's give it an ID equals two first me. Now, the purpose behind this is when I go back to the its female form. You see, I can click on this label on. The cursor appears over here. So I get if I do not have this for save it. Go back over here and you can see I can click on this, But nothing happened. It doesn't transfer the control over here. So by adding a four equals toe first me, You clicking on this label will bring the focus on this particular textbooks it's given under one. So I'm no, Make some room more. Here, make a copy off this for last name. This is gonna be a label called last name. Andi should match whatever that be a referencing over here. And we have two text boxes. First name and last name. Now, the next one probably would be gender. So I'm gonna copy this on Pieced. But this time I want to have a really wouldn. So this is gonna be good input. Because to video, we have to give a common name for both of them that is given as gender. This is not really require i d. That's not required. I can get it up. This 80 aspirin value equals school made. Andi, I can say here, label type your main slash labour on the same thing. I'm gonna coffee based make a another really? With the same name. The value would be female. And of course, the caption to be displayed also would be female. So if I save this and go back, you should see that there is a really button that says male or female. So I click on this that's selected. I click on this, another really button selected. So let me complete the form by adding one set off do slash deal for each of the contact details. So no, I've added one field for each one of them and it had a submarine Britain, below the picture so good on your at a the median bt and primary. I will call this us soon. So we do have a important toe at as a angular a loose the form elements to be associated with model later. For example, if I have a variable called first name here, I can associate that first name with this particular textbooks. Now this can be done in either one were binding or two were by me. Wonder bending is where we can just go and say value equals toe something. For example, if I say here first name off spring equals toe that you don't And if I want this value to be associated with this text box, I can always come here and say value equals toe first name off course. If this is an expression, this can be given in two ways either with a double curly bracket. Or I can simply say that this is a an expression by adding a square bracket. If you go back to the browser now, you can see that the first name is changed toe. We know because the value is coming from here. But if I want to see what's the value off the model later, when I make the changes to the text box that's going on a paragraph where I use a double curly bracket first name, which is the modern reader on then if you go back here and then check it shows here, we know that that's coming from the actual modern. So also is this one. But it between this to say, Come on, this is unchanged. That's because it's a one reminding meeting. The value of the modern data has been associated with in a one way style. So if you make the changes in the text box, it is not reflected in the actual model. So to do so, we can add one called engine modern. So the way you can specify is you. Can you the squared wreckage because an expression and it is also associated with their on key up event. So we're gonna die pure N G model and then assigned the variable, which is trust me, this causes a problem, as you can see that it's already showing me another. That engine model cannot be used directly like this. It has got some pretty with it. So if you go back to the browser, you can see that on the console. I must be getting a few others. And the reason for this is if you want to use engine model, you have to work with another model. Caldas forms model. So we got our model ts and then first we say import from at angular slash forms and what we want to import is something our forms modern and this forms module has to be added to our import section. Let's go at it over here, and this is the first step. The second step is whenever you're using engine model, this particular field must have a name of property. It can be any value, but regionally view the same name as the modern name. So, given her first name and I go back to the browser, you should see that it's showing the value we know, coming from the modern. The same thing is coming over here. But if I start raising, you should see that it's also changing in this because now the text box is associate it with the modern in a two way binding style. So if changes toe come on, you can see that the model is also getting changed. Now, what we will do is we have to repeat the same thing for each off this. But instead of declaring one variable for each off the members, I can as well cleared, available off contract type and initialized this start contact it goes toe new contract. Let's go back here and say that the model corresponds toe contract dot First name on. That's because the modern data this is a property of that now. So we can now give here name equals toe. Last name N g model equals two conduct dot last year and likewise I may also want to give for this one. Now I know that this is the radio button. We already have given a name property for days. All that we have to do is tow associate an n g murder equals toe gender for both of them. So I'm gonna pace this over here as well. Here on this is gonna be gender and put the places you know, since the default value for contact our gender is male. If I save it and if I go back to the browser, I should see that mail is already selected. Of course, if I select this female than the models, gender results changed to female. Now let me at the same thing for each of these text boxes. And one last thing is that tells you, get it up this first because we don't have any of them. But instead we can display contact. But that's an object you have displayed in a Jason form it. Let's just had a fight with Jason toe. See the content off that they go back to the brother and have a look at that. It's displaying an empty contact object, which has a gender and picture by default. But if I start adding in the other details, you can see that it's adding forced me. Last name gender is already there. So I take here. We know that you know Burke with an email, and that's added and so on and so forth again. Just verify that by adding each of the fields So you can see now that the data object consists off the values from the text box on that we have to do now is toe write a function that can handle the are functionality. To do that, let's go back to the core. We got the ad contact component DS. It's clear a function called at contact Onda. We have this contact object we want toe added over existing repository. To do that, we will inject the service which is foreign books arteries. Once we got the service, we can see here that this start service start our new contact. It needs a contact object, which is nothing but this got contact the return belly off. Our new contact is an observable and will be subscribe were to supply a call back and the callback gets the identity contact object and we can say what we want to do with that. So maybe temporally I can just display the idea off that on the console by piping consular law and you contact with Ivy plus contractor i d. Now, after adding I might be interested toe Go to the page, which displays the details. So for which we might want to use one more service this time rotor service, off type called Shelter. And once you have this rotor, we can now say this starter motor don't navigate. And then we supply the part where we want to go on the party's card. Contact details along with the newly generated idea which is contact that I d. And they should take the control toe. The contact details page displaying the details. Contact person. So I saved this and call this function on the click off this particular partner. So let's go to the button. The click event. He quotes toe the function, add conduct. So I say this to go back to the browser. I hear my feet is and like the Abberton on once we at this we should see that the details have been added successfully to the press 10 point 30. Validating user inputs in a template-driven form: so using the conduct form, we were able to add a new contact details. Andi, let's go back over there. So for thing is, let's get off this part which is given in the HTML. So we have this be with Jason, so we don't need that. Let's go back and see that that just under the nexus. No. But one thing is that without typing any first name, last name, email or phone number, I am still able to add a new contract. And that comes with a new idea. Also, there is no first name last name. None of these details exist. Of course, we don't want such details to be accepted It all. Let's delete this and see how this can be handled. So in the ad conduct form, first thing is, if the minimum mandatory fields are not endured, I don't want this person to be enabled at all, so users cannot accidentally take that. Plus, let's assume that the first name is mandatory on minimum that three letters must be there and maximum 15 letters. Similarly, I want tohave Ah, restriction that email is a mandatory field phone number must be ender, and it has to be a 10 digit numerical well and so on and so forth. So if I want to provide such validations, how did we do that? To understand how the form medication euston First, let's have a look at the documentation. So goto angular dot io that is docks fundamentals forms on. You can see that there is something called form brandish. And they have explained here how the phone validation is done in both Templin driven as a less reactive forms. But if he scrawled on here So basically what they say here is that you have to define a variable, which is the template variable here. Hash name. You can give anything here. For example, in our case, this could be hash first name and equals toe engine More. Now with this, what happens that angular creates an object corresponding toe the field. We can access that using this particular hash name, for example, there. Given here something like if name corresponds toe engine model than you can say named, are invalid or named are dirty etcetera. So we'll have a look into this. That's how this can be done. So the first thing that we want to do is tow Goto, one of the fields hash first mean equals toe energy model that also are a few other basic validations. For example, I can say that this field is a required feet. Mainland equals to treat in excellent equals to 15 for example Steve it on. If you go back to the browser, we see the farm. Let's go and have a look at this particular field. So I select this pattern here and then choose my first name feed on. When I select this, I get the actual generated input element. While we have given few attributes here like type class Islay Editor, you can see that there is an additional attributes also, one of them is the class. Of course, we have given the class but you can see we have given only farm control. But now we have additional Engy untouched Engy pristine N G invalid thes CSS classes are added based on the stage off this particular extracts. Since we said that this textbook swelling is required on we have not entered. It says here it is invalid and that class name has been applied Similarly, the engine pristine CSS last name is a play because we have not made any changes to that. The moment I make some changes to this and even if I bring it back to its original state, it will no longer be considered as pristine. But it will be considered as dirty. For example, if I go and I fear X on, then it is that you can see that now has the CSS class name here saying that form control which is what we have given it, says Engy invalid because there's no value in that. It now says NJ dirty instead off n g pristine Similarly, there waas earlier Engy untouched. Now it is engine touched and this would be useful for mobile devices. So the Engy invalid CSS data but will be removed automatically as soon as a satisfied the field requirements. For example, if I type here, we know as you can see that I have made sure that the values entered so required is taken, get up, also have entered five letters, So mainland property also has been taken. Get off because originally, if you see the CSS class name, it is your Engy valued. Of course, if I bring this back toe, say two letters you can see now it is n g invalid because now it's not satisfying the field requirement. So this is a CSS class that helps us understand what is the state off this particular field Now, along with the CSS class names like here, we also have properties so we can make use off these properties like pristine, valid invalid editor off a particular field to deter mine whether to display an error message. Here are not also notice that the extra bucks here is part of a form. And if you go to the form element over here, you can see that the form also is considered as invalid as soon as they types on meaningful information. Over here, you can see that the form itself is now considers value. Of course, if I refresh, the form is now in the pristine state, so you could go back to the form again. You can see that a form is in the pristine state and it is invalid because one off the text boxes is invalid, right? So we can now leverage this property and say that disabled this Wharton are changed the color toe red eso when the form is invalid. So how do we do this? Let's go and check that out first. So now that I've given your basic requirement here, required mainland and maximum let's go to the button and we will are a disabled property over here. If the form is invalid, The first thing is we had to give hash some form name that's called us F one equals tow N G form. Once we give this now, we can access the entire form on the farms estate using this F one so I can come down to my partner and I can adhere that disabled actually route. Not that the straight record indicates what were we are ascending is an expression. So I can say a form dot Invalid. So ass in a serious. And if you go back to the plaza, you can see that the form is in an invalid state. On I have the button being disabled so I can click this now. Right? So if I come down to the button, you can see that the disabled attribute has been added over here. Of course, if I type here some first name, let's type here we Not. If I come down now, we can see that the pattern is enable I should be able to add a new contact with only the first name. We can also change the color off this by changing this particular property. Not that this is a string here and we can substitute this primary with danger in gated, the farmers invalid. So how do we do this? Let's get off this for a minute and we'll put a double curly bracket toe. Indicate that you're gonna put an expression with the F one dot invalid. Is that true? So I can put a question mark if it's invited with on a danger and otherwise will say here that it's private. So since initially the form is invalid, it will be Bt in cash danger. Once I enter some values in the textbooks, you will see that this becomes BT and Dash Primary. So let's go back to the browser on the form is already split and you can see at the bottom . The button is disabled and it's in red color. As in other types and names like the note, you can see that now we have the blue color button, which is also a neighbor on the same lines. Let's also are a couple of other violations. For example, I also want the email to be mandatory so I can type your hash. Email equals two n g. Modern and then I can see it quiet. So you're a couple of things like hash phone P equals two N g. Modern. This'd is required because we're dealing with contacted. It's at equals. Toe slash de four digit. This is the typical regular expression, but I also want to say a minimum off tender digits and a maximum off 12 digits to this particular phone number. So let's save this. Andi, go back to the Frozen. We'll see that the farmers in the disabled state that's going under first name, I'm you can see there's still disabled. That center email that said at example dot com so but it is still disabled. Phone number I under some numbers. Now we can see it is still disabled, but as soon as they enter the 10 to the judge, you can say it is enable now. But if I enter 11 still okay, 12. It is okay, but 30 letter not Okay, So this is how you will be able to use certain patterns also in your validations. So now that we have enabled or disabled, But based on the validation, we also have to tell the user that why this particular button is disabled in case if you make some mistakes like for example, I removed the first name, it should tell me here that the first name is mandated. So let's go back to our core on add a couple of days to display other messages. Now number one error message would be that the first name field is mandatory, and that should appear only if the user has not entered anything yet. The 2nd 1 would be Milland equals toe three. That means we have to tell the user that a minimum feeler does you must up line and that I don't leave. The user has not yet done so. And of course, the 3rd 1 We don't need to respect, because if you have a Max land property, the browses don't allow you to type more than 15 characters at all. So that's gonna add a couple of deals. So I have a parent deal on day two Children deals forward here. The 1st 1 would probably say that forced mean these require on mandatory on the second error message would be like, um so please enter cased three letters for first name. I see this. Go back to the browser and you'll see that we have no displayed these two other messages. So we can also add some styling to this, such as, for example, it has to be in a little red color. It has to be a bit smaller than the rest of the labels as well. You may say it has to be italicized to do that. We have Odysseus this class. Let's call this as a class for ER of plastic costume. Jara. And we don't have this particular CSS class. So let's add one. So I'm gonna open that CSS fine corresponding toe are contact component. CIA says that they thought ER, which creates a new class, has given color offer it foreign stayed. Let's give italics on. We want to reduce the fun size to around 80% off its original saves forgiving 800.8 p. M. So if I save this and if you go back to the browser I should see that the other messages are as expected. The only thing that we don't want this is we don't want to scare the user by displaying all the pregnancy. Justin Edwards. So what we want to do is we have to ensure that the user has started typing in the first name, and then he has not typed enough. Characters are, if he decides and erases everything, the first name is required. Ademas featured appear. So to do that, that's at an if condition over here. So we're gonna add a directive. Col. N g Give equals toe. We say that first name, which is this particular variable, is dirty as the last first name is invited. So show this only if it's dirty. That means something has been changed in the next ones as well as it's invalid. Now, if I go back over here, you'll see that it's not disturbing at once because it's in the pristine state. And if I type here something like this and you can see now it's coming as soon as a diaper valid value, you'll see that the elements is have gone because we have ensure that it's going to be displayed only if it's invalid. And of course, if I make a mistake, you'll see that both of them appear on the same logic. We can also are. If conditions over here, for example, I can say, star Angie, if if we're still forced leave, don't Errors first named are arrested, an object representing on the others. If they exist, I'm gonna say, if one of the other is called choir, then we want this to be displayed. So we say that sure, this particular message only if the errors collection contains required. So the same thing we're gonna copy and paste for the next one make a bit of changes. So basically, we want to say this should display only if the mainland validation is failing. Copy this and based over here now I saved this. I go back to the browser, you'll see that there's no other message. As soon as I start typing a single letter, you can see that it says please under at least three letters for first name. I ender more than trees. No problem now, So if I start raising, you'll see that the other message appears back less. If it completely it is this you will see that it is. First name is required. So this is how you can add customized error messages on. So So let's go back. Copy this on paste for email. So email has only one valuation, which is it's required some paste over here and say that this is basically email on this is email. Hasn't errors called required will display that email address is required? We don't have the mainland validation for this, so we'll get up this. Let's copy the same thing for four. Number on phone number has two elevations this time, so one is a required. So just like that. So I'm gonna say you're because this for so phone is dirty as a less phone is invalid as a last phone has an editor score required. And, of course, the message should say phone number is required. Andi, I'm gonna copy this. Tasted phone has an editor called Pattern. We can give customers mrs saying that pleasing Bush. Maybe you can say 10 to 12 digits for for save it on. Let's go back to the browser toe Full refresh once. Andi, let's see if we can do some valuation violations. So I'm gonna go type my name and free. But if I started raising there is an editor. If I completely remove this, there is an error similarly going here. I do not actually know about CO, no problem. But if I start raising completely, you will see that it says the militants is required. Similarly, if I got a phone number, if I type even a single digits, it says that place import 10 to 12. It is for four number. So I started taping some random phone numbers. Now fastener that at the 10 digit you'll see that the other messages gone. 11. No problem. 12. No problem. But protect the 13th 1 You get that, Ademas it again. Now, if you it is this completely, you will see that it still says for numbers required. So this is how you should be able to add custom validations for your form, such that invalid data is not entered into your database 31. Editing a contact using reactive form: know that we have seen the template driven forms. Let's have a look into reactive forms. Really. Reforms are based on two angular classes called form, group and form control, to understand how this works. First, let's add a put in here for a meeting the contact details of the selected person clicking on, which takes me to a form which is preloaded with this particular details. So first, let's go on out of water. So we go to the SRC AB component contact details and instead that the HTML currently has a delete button that's had another harden. Before that, that's a button with Bt and Bt and trash Primary as the class names. And then it moved has the gumption. No taking on this should take me to a different screen, and this can be achieved in two ways. One is by using it out early on. The second is programmatically going towards another component. Let's head out. To leave. Rolling is an expression because we give a square bracket here and the expression even adding I didn't consist off various parts of the part. The first part is going to be the slash elite combat, which is a fixed apart, followed by the idea off the users on the idea to use that that we wanted it. Is this Contact our i d. Let's give contact. Don't I save it? But this particular about definition does not exist. Let's goto our APP Model DS and in the APP model DS. We have toe define a route for the thing, but we don't have a competent yet, so let's go on at a component. So we go to a new tab, make sure that they are there in the working directory. We'll have any G generate component. We want to start in the components folder it it contact is the name of the component. We don't want death specs at this point today. And then we also want a prefix car. PB for whom book This gender is the CSS HTML on DS files corresponding to the component. Also up, it's the SRC slash ab slash AP Model DS in the declaration section. So let's go back to the APP majority. Yes, let's add a new route definition for anything. The contact is a part. It contact what for a given. Heidi. So is a colon idea making this as a variable on the component that we want. The Lord. Which is it? Contract component. Save it now. If you go back to the brother, you should see that there is an edit button clicking on which it will take me toe. A new component which is headed Contact works now when this component is loaded, we would like to get the contact details for the corresponding i d. On work with that. So let's go back to the aided component to Yes, and here first we want toe receive a couple of dependence is number one would be toe get the activated route so that we can get that out. Perimeter second is the form book services through which we can lower the corresponding contact details. And it's true that first we said hybrid after redid road off activity throat. What City girl Private studies Oh, for others and in the end, G on it. Let's do the loading part. So if they start activity, develop toward Adams, which is an observable, and we subscribe to that by passing a callback, and the called Reckless is the Baron's Ari. So the firm's Onda we would like to work with the i D. So we say you're concerned about firms off Heidi Just changes that were ableto access the i d from the actress Park. So we go back to the frozen on. When this page is loaded, you should see that it says Got the idea tree. So which is the idea coming from the road perimeter? And now that we have the idea, so we should be able to make a request. So let's copy this part and get off this, that they distort service, start, get contact leaders off the particular I D, which returns another observable, the subscript that by supplying a combat which pursues the contact details that is received on. Then we would like to bring the same thing just a very fine. Let's go back to the Rosa and see that we get the details corresponding to the I'll be So I got the contact list. I select randomly some other detail, and then he contended, and you should see that we get the details of that particular person Now All we have to do is tow lured this details into a form that appears over here. For this, we will use a reactive forms on the first thing that you have to go for working with the active forms is going to the APP model DS and import another model from the angular forms called reactive forms. So they have reactive forms model. This has to be added to the list off imports that we have here because now our model depends on another module. Once this reactive forms model is available, what we can do is we can go here and clear the variable or contact form off life form group and we can initial. Is this in the in it somewhere Here, start contact form equals toe new phone group. The new form group constructor takes some configurations and the configuration is about the form element. For example, imagine this contact form object represent the entire form. The form is made about form elements like text boxes And what are the values for each of these text boxes we would be interested to mention. And now we want toe pre Lord this contact details into this form. So obviously we want tohave one textbooks for each one off them. So we'll have your variables like ivy with a new form control the form. Control can be an empty constructor or you can also give a default value. For example, we leave that as it is, so you'll see that the I d will be none. Because we have a form control without any value supplied onto that on the reason we don't supply the value here is because at this point in time, we don't have the actual contact. The contact is loaded using an observable. So we have to set the values that form in this particular sections. We'll do that in a minute, but first will define off the valuables. Now that we have initialized all the elements off the contact form, we can also give a D for value to the picture which corresponds to the tea for contact profile picture which is there in the contact 50 years. I have this string. Some copy this, and if you go back over here, the constructor has the first perimeter optional default value which were given here. Now let's go to the HTML corresponding to the component. Get it off the paragraph Creator form on in the form. We will say that this form should be related to the form variable that were created over here, which is called Contact Form. And it's very simple. We use a new directive called As form Equals Toe Fund that form in. Take this. We can now have extra boxes representing the values off each one of them. That's good. Do consisting off a label. It's in first name that input and we'll say you're form controlled. Name equals two first name. Now you can see that we use a expression here and we simply use an attribute. This is the syntax now engaged. If I'm not using a form group and using a form control name directly, then you can say form control as an expression equals toe. The first name in this case, it is assumed as contact form dot First name. Now this is it. Now, if you compare this with a template driven approach, we don't have to define a name for this. We don't have to define engine model. We don't have to define it. Employed name with cash. First name equals strange a model. So this is why it's much simpler. Plus it also testable because now everything is optical injured over here including the validations, which we will see in the next video. We can all put the forms data by using that paragraph, and we say here, contact form, Dark value. We can put this as chaser. So that's going verify This nonsense will go back to the browser. You should know. See that there is a extra box. All of these member variables off the form object is none. Well, if I go here and type some name, you can see that it appears in this particular form object. So which means that the extra boxes have bean magically associated with the form object. So let's go back and add a couple of more elements. So I'm gonna copy this on based. This is gonna be for last name, and we just type your last name. Save it. Go back to the browser. We should see two text boxes on. I should be able to type in both of them on you can see that I'm able toe reflect the changes in the contact form. Object with this done. Now, that's to some beautification. I'm gonna get it off this. I'm gonna add a class off group on. This is going to be just a label here. Amerada Class off form Control. Let's make a copy of the same Andi at another one for last name we would like to see it is his last name. Gender is really wouldn't. So I'm gonna have a gender as a caption. This one would be type equals two radio. If you don't mention the type by default, it's gonna be a text want. Hence, these are text boxes. I don't need a class for this, but I would like to have a name here because gender is really wouldn't read impotence. In order for them to be working us one group, you should have a common name there. You also need to say a new equals tool so that the value that you mentioned here will be the one that is selected when this radio button is selected. And of course, the name of the form control. Inside this contract from objective his gender, I would like to have one more really button on, but this is gonna be considered as female. Of course we would be seeing only toe radio buttons, but we would like to have some captions for that Onda. We can address the caption just like this male and female Where one problem is that if you click on the world male here, the reader Britain is not selected. You might have to pin point and click on that to sell it, Andi, instead off that if you want to pick on the label, you have to group them as one. So I'm gonna cut this, put a labour and based in pregnant the same way I'm gonna cut this for the label on based in time. I don't need this far, so I'm gonna get it off the same. So now we go back to a browser, I click on the world female. You can see that it's selected. I kick on the world Male. They really wouldn't get selected because the labour also notice that it's bean selected over here. As soon as you click on this street evidence, you would see that they're badly that also getting changed. So now let's complete the rest of the forms by pretty much copying and pasting each of these deals. And finally, Burton toe save the details that stripe your weapon plus equals to Bt in between primary Xavier ST changes on. We don't need this anymore. So let's get off this. Save it. Go back for fresh ones and you can see that the form appears with the deformed picture, Ural, because that's what is there in the form object. And the rest of the details don't exist yet. And if you remember, we are able to successfully do the details off the idea that he s a plate over here on day . Obviously, we need to know pre load this into the farm on that one step is done like this. You go back to the place where we were doing the console long. We can simply think about this. Start contact formed are set value. Andi, once on the actual contact object in the form off key value pairs. Now you can simply stuff like contact like this. It has to be a bunch of Keeble appears so to do that, we use a year six spread operator. So we say here we want to create a new object with the values from contact object. Save it on. When you go back here, we should be able to see that the details of the contract is no preloaded. And since we know that by having something in the text box directly affect the form object we know know that what about the changes we do here is already there in the far object. All we have to do is tow associate this with day at function which saves the current state of the form into our that s standpoint. Now that's the last part. We will not add a function over here called Save changes and dysfunction. We will be associating with the please evened up the button. And when this is card, I have to save this starts service. Which phone books always are updated contact and we have a supply. They start contact for dark value and that value correspond toe an object representing each of these keys with the values from the deck boxes. So let's go here, call this function. We say click event equals to save changes function. So the same changes function here calls the update contact from, or phone book saris which returns an observable on. Let's subscribe to that. And when the update finishes the job, it comes back with the updated Dejan. So we get that in the form of a new contract. And all we have to do is to lure the contact details component for this particular idee. Andi, we don't have the rotor dependency yet, so we're gonna add one more dependency the Savior Private rotor, off type character. And then we come back here they start out dark. Navy Gate is a plan a day off parts. In this case, it's going to be contact Dash 50 days, second bottom. It'll be the ivy off updated contact object. So they contact on any. Save it. Andi, If I go back over here, we'll see that there is a form that is preloaded. We can go back to contact list. Take someone else's data click on edit. The data is Lord Ege. I'm gonna put couple off hashes Here's on, then say save changes and you should see now it loaded the contact details component for that I d. And I'll see the changes that have done successfully. Let's go back. It is the same thing and save changes, and we now see that the changes has been updated 32. Validating user inputs in a reactive form: so using the reality forms were ableto edit the details. However, we do not have any validations at this point in time. So I guess if I remove this were Lanny on, then save this. You should see that the first name for this person is last because we didn't have any validations. So just like, engaged the template driven forms. We also would like to provide validations for the reactive forms also, but this one would be much simpler. So let's put that landing bank go back to over farm. Andi In here, we can define some validations as a less 34 values. Now this is done with the help off the helper validators class. So let's go back to the angular documentation for a minute. Open, angular, that are. You click on the dogs and the fundamentals we have forms on. We have form validation. And of course, the 1st 1 is the template to invalidation. Prefects crawl down a bit. I'll see that there is a reactive form validation on one of the mentioning here is that see the validators ap a reference. So they're building class for validators and it contains you helper functions so If I click on this, you'll see that these functions exist. Men, which is the validate of function Max required. It's a title. Most of these are self explanatory on. You should be able to understand what they do, and even if you don't so you can take on that. It will tell you what exactly it's going to do. Validator that requires the control toe have a non empty value. So that's what we would like to have here for the first name, probably for the email for the four number etcetera. So even if I say email here again, see that it must be a valid email. This is automatically going to test that it's an email address so we can go back now. Andi, say here that the first name has no default value, so we give it blank. But you remember that when the contact is loaded from the rest in point, it will be said. But until then, it's gonna be a plank. But we would like to specify that an area off validation cools apply. For example, I want to say that it is required and it has a mainland off three letters so I can type your validators don't require and then I'll take validators. Start mainland off three. So this is how you specify a bunch off validations on the similar lines. I can specify here for email and phone etcetera. We come back on that in a minute, so let's go back to the farm on do a bit of inspections. We have the contact details. Let's click on the edit and we see the details. So I'm gonna select this arrow. Andi, choose the first name property and you can see that the first time property here has got fuel. CSS classes that identify the current state off the form element form control is something that bigger. It supports taxis, his class name. But he considers in G untouched because we didn't use a mobile device to pass that all we have any did that it's in the pristine state. But it also said it's rallied. But if I it is this completely you can see now there is some changes, and it says that it's a dirty object because it's been modifying its been touched as well as it is in G invalid. Now the n G invalid comes mainly because off the fact that it is a require field. If I have bring Lanny back snobby, see, it's bean valued. But if I remove three letters on, you can see that it's again invalid because mainland is now being violated the same thing. A place to even the form. You can see that the form also has invalid state on all these states can be accessed using our console. Let's go back to our save changes literary people there, which is a great point on for the time being. Let me commit this course so I don't want to really save between this or anything. So let's go back on bond. We now take on the same changes and now we see we are in the deep burger. So let's go to the concern Onda. We can now say here this start contact form dot You can see that there is a status which specifies whether it is in the valiant state or invalid state, and it says it is valid because we don't have any errors in it. Similarly, we can also check start contact form dot invalid American teachers phones. Likewise, I can also check is it valued. It is true, so we can use either the status. Which is the string? Are can you the bullion invalid, valued functionalities? Toe check if that is valid or invalid. Obviously we want toe. Make use off this field or make it of this property and control the appearance of this button. Still expect to the core. Let's get it off the debunker on uncommitted. This We will also go back toe our edit contact component. It's TML. We have the button. We want to add the disabled attribute in case off the form being invited. So it's very simple. Now I can say disabled equals two. It's an expression so I can see your contract for dart invalid. So as long as it is invalid, we make this button base able and using the theme contact formed out, valid or invalid, we can control whether it is supposed to be primary are danger. So I would have cut this, put a handlebar expression and then I'd say you're contact form dog. Valid question. Mark Delgiudice concert as primary other ways, it's considered passed a danger so initially because it is valued, there shouldn't be any problem. You can see that it says blue and it's enabled. I can see a finger to peer. But if I get it off this on, come down, you can see that the button is disabled and I cant click on that now. Right? So that's so simple to work with now, without even adding any validation rules in our HTML elements, we simply added that there is a required on validators mainland. So we added the required in Midland validation rules in the form object on that is automatically taken care off here. So notice that I have not specified here that the form element is required our mainland on the same lines. I can also say that this must be an e mail address as the last it must be required so I can go to this component years on. They hear the email has no t for value on I can see your validators Don't e made Plus I can save validators. Don't quiet. You don't need to give the mainland fought this one. So now if I go back to the browser on de everything is okay. But if I remove this after its simple you can see that it is now giving another because it's no longer valid email. So I have to give at the root symbol. I can't start within a veritable that is also invalid. I have to have something. You can't just have a simple text also there, So that's taken. Get off. Likewise, we can also give a phone number validation so I can say that the phone number is required as a less It's a pattern. So I can say validators start factors on the pattern is either a string on a regular expression. So I'm gonna go with the regular expression on the regular expression has to have a digit. How Maney want the digits until 10 to 12 digits is what I'm expecting. US phone number now. Because of this now, it's not gonna follow any non numerical values. Let's go back, do a full refresh and then very fine. If that is okay so you can see that right now that the 10 digit prettify it is this, you can see that it's automatically now changed toe red on the disabled. So I don't do that. And if I type here and also bet that is not a load. And so it has to be a number. So now that we have done the validations, we also have to tell the user that you cannot simply have two letters for first name are you should say first name is mandatory. So we want to provide some kind of error messages over here at the rescue that will not be knowing what is happening with this particular farm. Right? So let's go back on. I'm those messages right here and control the appearance of those messages using other forms. State. So we're gonna go type here a do with probably a class off era. We don't have this class we will artists on with to child abuse for two other messages. The first error message is for the first name being mandatory in the 2nd 1 probably for the mainland violation. So that's type. Your first name is mandatory and then I'm type your please input at least three letters. We want this messages to appear only if the first name has bean touched are dirty as well as it is invalid. Now we know how to access the contact form. But how do we access the contact form? that first name. Now, this is where we have something called controls. So we can i n g If you're on, then we say you're contact form Dark controls. So which is a list of all the controls we have on that Has first name has won control And is this invalid? If this is invalid, then you show me that Andi it has to be dirty. So I'm gonna say your first name don't hurt. So this now ensure start the first minutes 30. That means something has been changed over there on the change two value is invalid. Then only display this one now off course. We're also want this to be despaired only if there is an editor's for the first name called required. So obviously we have to add one more NGF, which will copy this part with a star n g equals toe this force name but others don't required on. This is the way you specified. Of course, adults see the collection off all the others. If it all there is any errors and do we have the required better? Then only display this one and the next one is just a copy based off the scene. But instead of required, it's gonna be the England violation of a pure mainland on they should take it up the same. So it's to a fuller fresh ones. Now you'll see that there is no other message appearing because Number one it is not invalid. Number two, it is still not dirty, so angry. It is this. Now it is dirty, but it's still valid. It's dirty, still wedded. But now it's dirty, invalid, and the invalid is because it is violating the mainland relegation. So I'm gonna It is this completely now it. While it's the required validation pool on, it is displaying first name is mandatory. And as in the previous case, we would like to apply some styling to this. So let's go back to the CSS corresponding to this, which is right here and then We'll define a class star here off, and we can see here that color is red form style. Probably italic, and then they formed size. We can say your 0.8 PM like 80% off its original size. Let's go back to the browser. CSS may require a full refresh. Let's do that, Andi, try raising few letters. You can see that we get that and a message as well. So the same way. We can also define other messages for other fields. So I'm gonna copy this part. We have an email control which has got to elevations this time number one is required. Of course, the 2nd 1 is the evening. So it has to be a valid email. So let's get this change. All the first name to emit Onda. We say that email address is mandatory. Second message would be like not a valid female expression. We're going to face the same thing. Toe Full phone also has to validations. One is the require. The second is the pattern. So Anglo cell, it'll the first names. And then I'm gonna change this to four. And they say that phone number is mandatory. And here is the fightin. So we're gonna specify that this is you can tell, please Input and 12 digits on leap. Of course I forgot. This has to be an email. So that's the validation rule. And this is the pattern of Telesco. Save this. Go back to have browser refresh once on, then check If all of them are working as expected. So I see one another message. I see second error message. Now I remove this I the ridge, so not a valued expression. So I'm gonna remove this. It is emeritus is mandatory. So it says here pleasing, but tend to do well digits only. And if any more is it is for number is mandatory. Plus the same wooden is completely disabled were not able to go further without making valiant entries. 33. Integrating jQuery (for pagination on scroll): many attempts we may have to use our 40 child was completely It's like chick. Well, for example, in our application, when we goto contact list on scrawled on, you'll see that it is a Lord More button, which lords the next to batch off 10 contacts. But if you want this toe automatically, Lord, when you scrawl the page here like you might have seen in Facebook where when you scroll down, it loads more page content. To do so, we may have to use J Query. The first step towards this is toe installed G query on its dependency. So I've been envy. Um, installed J quality and its dependency is activated types slash chick quality. Once served in the installation we have toe let angular know that we have a new JavaScript file. For that, we go toe angular Jason, which is right here, and you can see that if you scroll down there is a section called Script, which is an area off on the scripts that you want toe associate. So let's expand this and add an entry. The injury here gives for J Query, which is there in the norm, or tools, and Scott don't g expand it dist! And we have your geek wedded or Js andi with North underscored moderns slash j quarry slash just slash check Very dark, mean torches saved this fight on any changes to your angular Jason will ask for the sun will be restarted Let's go back to our survival control See and run this once again. And now we have the application loaded successfully in order to understand how to handle the scroll. Evans off the Jake worry. That's Goto. Jake went dark on where J Query has already been loaded. Andi, I'm gonna open the developer tools. Now you can see that dollar is a valid variable which separates their function. Onda Good likened a pure dollar off bodies door depend and you should see that there is a hello printed. So which means Jake worry, it's working here without any problem. And this is really good and we have access to dollar. In order to find out the scramblers position, he can see that this crawler currently is at zero position. But as and when I scroll down now you can see a part of the pages last, for example, up to hear if It's last, right? So it's it's gone up now. We want to find out what it is called position when you are at the bottom. So which means that we want to see what is the amount of page that is loaded on the top. Plus, what is the height off this section, which is the window state? So we can get this information by typing what have you equals? $2 window. So know WT presents the window object and I can take your window door strong top Andi since currently we have almost at the bottom. When I press it is 13 71. But if you go to the beginning and then call the theme function it zero because I have not scrub anything. So if I bring the page toe this level so by scrawling and now if I say what is this crawled job? You can see that it is 2 26 big sense on the same way now when I'm here, it said 1371 which is the location off your document in this place so we can also get the bottom position by adding up the height off the window For example, if I live w dot height, it is 6 21 which is the height from this part toe this parts. If I reduce the windows right toe somewhere on 50% and check, you'll see that it is somewhere on TNT and 25 pick says so by adding up, that's crawled up to the height. We should be getting the lend off the document so you can see your w dot height plus the village or scrum top on. That's supposed to be the height off our window, which is 1992 big cells. Now, this really is based on where is your current scroll position? So right now, somewhere I'm in the middle, you can see that it says 1034. So if I'm in the beginning, I should be getting something like 600 to anyone because I'm having this crawled up zero, and I'm only adding up the w dot height eso 6 21 Big sell. Now, if you are at the bottom most, we know that it is 13 71 but it depends on the content of the page. The content of the page put together is called Document. So I can stay here for the Equal stores dollar document on. And now I can say the lot height and you can say Didot height is 1992 We respect you off where I am right now. So I'm in the beginning right now. Dealer height, which is the document Height is still 199 toe. So in order to check if we have scroll to the bottom most we have to compare the blue dot height placed of leaders crowd all toe the deed or height. And if they match, that means where the water most and we can trigger that Lord more functionality off our application here so that when we are at the bottom most, the Lord more function happens automatically. So this is the idea behind this. So let's go back and implement the same thing. So let's go toe SRC ab components contact list on the DS corresponding to the same where we already have the lower more function. We just have to call this again and again based on our criteria. So the first thing is, you have to access the global variable dollar which is there in the window and make it a local. Really? Well, let's just define advanced other people's toe window off the dollar R J quality. So it's one of the same enough. Let me give it like this. I had the dollar. So now I have to go to the unit and say that we're interested in listening toe the scroll event off the window. And to do that, let's first at your dollar window towards crawl. So basically, we're industry in the scroll event on the supply callback function, which is the event to be fired. Every dime your scrawling. So that means that if I'm scrawling the page like this, they even these fired every time. What we have to do is to now get the access to the window height and scrounged up, which means that every time I scroll like this, they even this fire and that is where we want to write our core. And I'm gonna create a couple of local variables left w equals toe color. We know Onda let d equals $2 document and we just heard check if w dot height plus a little scrum don't equals toe did not hide. Then we just have to call this start Lord more. See this on notice that this function is also linked to toe important. Over here we will not be clicking the button anymore. Eso You can actually commit this line by pressing command, slash, control slash save the file on go back to the browser. So if I scroll down, you see that it's not loading all of them. That's probably because there must be an editor, and the other says this start Lord Moore is not a function now. This is a typical off when we're using Jake Worry. Now there is a reason for this. Reason is we're using a callback function in a ES fight style, not in year six time. So in the years five style that key were This does not correspond toe the class member variables, but instead it represents window object during the execution. So in order for this cable to represent the class object, we just have to convert this into an adult function. So I'm gonna get it off this function and then on Adul and save this. Let's go back on. We'll also see the ridge quality learning more and more content. So just to make sure that we are able to learn more on both that could Then it worked up and in the night talked up you'll see that there is one request to the rest. Endpoint has been made. But if I scroll down here as soon as I scrolled all you should see that it's gonna make another request on. That's for the page. Number two on ice Crown more and you will see that there is a page number three on page number four and so on and so forth. So really well, the Lord this automatically, just like how applications like Facebook works. 34. Using SweetAlert for beautiful dialog boxes: in our application. When we are viewing the details of the contact person, we have a patent for delete picking on which you should see that there is a confirmation dialog box comes up, that is, Are you sure? Now the look and feel of days depends on the pros. Er so if you go to another browser, for example, here is a safari, the same page is loaded and when I click on Village dialog box that appears is totally different than the one that we see in chrome. Likewise, if I goto five fox and click on Delete, you'll see that the dialogue box is totally different and this is opera. And in opera, the dialogue boxes told You're different. Of course you can test out in other brothers on. I'm sure that it's gonna be different to this is not a good approach because we don't have the control on styling off this bailout botch. Sometimes it is important that we we control these things like for example, I want to say Ari sure s are no on. May be I want to have a customer's captions for these now. Since this is all not possible, we have to depend on some third party dialogue boxes. There are many J query dialogue boxes available, but the one I'm showing here is called Sweet Alert. Safer Goto Sweet. Others Here is a nice Taylor bunch with animated icons. They're the nice title. There's a text. We can also have some customized apartments like Cancel Estimated. So to get started with this, it's very simple. You just say NPM install sweet alert that future function called Swan. And then you have very tees off options like we can say, What is the title? What is the next, what kind of icon you want. And if you want to see how this looks like, you can click on this and see this is how it's gonna look like. Of course, you can probably changes to success. You would get a success button. There is a documentation also available here at the bottom on. That gives you a customization off the scene. Well, I would not be going. Indeed, in about all the documentation off days, we would definitely be looking at some of the required options for us. For example, when I took on this, I want to ask a question instead of local host for two double zero safe. I want to say you're about to delete this contact. Are you sure? Maybe I can say no on. Then I can say here. Yes, on. I can see that. Yes, I'm sure. But that's not the default button. And cancel would be the de for Britain because accidental. If you press ender, it should not be deleting that record. So to do that school of the command front opened a new town, make sure that getting the working directory and will say NPM I for install sweet avert. So once the installation is done, we have to tell our application that there is a new JavaScript and that is done by going toe. Angular, dark Chaisson. We have a script section we have specifying that there is a new file under normal use. Sweet alert dissed and you see that they're they're sweet color dot mindo chase. That is what we have to specify. So it's cool here, found nor underscore models slash ST alert slash dist street alone dot chase. Please note that the sweet alert liberally depends on G query and make sure that it is included before the street alert library itself. So save this. Changes to angular Jason requires the seller to be restarted. So I'm gonna go to the server, stop this r word and started one small. When that starting, let's go to our corn where we have the contact details. So SRC ab components contact details. Now this is the place where we are doing a confirmation just to test how this world's lets out of the function called best Swan. Andi. We'll come back and replace this one with the sweet alert core. But for the time being looked at this one here Now the swell is a function which is globally available, but that is only available in the browser. So right now, because we're in the typescript, we still have no access that from the window scope. So in order for us to use this well, let's go on declare a variable called const swell people's toe window off. So when this is a global variable ordered because of the street alert, this can be anything because it's a local variable toe our model. So now I can use that over here. But just start with that swelled and say hello. Since we don't have a button toe, call this function. Let's go to the HTML corresponding today's on, then call the testes. Well, I'm just gonna add a button a paragraph important dot treaty in Bt and default on. Then I'm gonna are your test suite alert. We need to say click event equals toe best swell function. So we go back to the closer Here we have a just too sweet alert before important kicking on which you should see that there is a nice dialog box that comes up. Good thing is now this is the same style that appears even in other roses. Also. For example, if I reload this page and click on the master suite alert, you can see that the dialog box comes in the exact same state as in Crume so we can test or in other process. Also, this is opera so you can see that it gets sir reloaded. You know, when I click on this tests read alert, exact same dialog box comes up. So let's get off this on. Go back to our court and we'll add some more options than the command is and then I say, Here's Slab. I can specify a title saying that phone book and I can say hello, friend. And then I can specify that this is a success. Save it now. When you go back, it reloads. Let's click on the test Street Alert partner, and you'll see that there is a animated icon for success. This is the fatal. This is the extra, and there is an old Caperton by default. But if you want to change this part and you can change that if you want, you can click elsewhere. Toe, get it off this dial a box also, which is equal and of cancer. If you have a confirmation that much, let's go back instead of success, you can say warming. Our info are other. These are the four options which is documented in here. We go to the sweet alert documentation. You can see that there are icons warning, error success in, for these are the four different possibilities. So since I selected Warning, you should see no a warning icon with the same title and text. So click on OK to come out of the same thing now. We can also specify these in usually like this swell with the configuration Object on the con figuration object may have something like title I can say phone book Uh, I can specify. I pon is say, for example, in four I can say your text, which is the second partier, whatever that given so that text can be like you are in the contact details. Save it on. Go back on the application reloads kick on this test to sweet alert and we see it similar dialogue box that's coming up so we can also have confirmation dialog boxes. And that's exactly what we want to do in case of delayed. So for the time being, I don't need this anymore. Someone who get it off this save it. Remove this particular button soon. This come back to my core on This is where I want to specify what to do Now. When the confirmation ballot boxes displayed, we will have to burdens and we can define the value for that particular buttons. For example, the first wouldn't maybe truth. Second button, maybe falls or it can be 1234 etcetera. When you call this malfunction, it returns that promise Onda, we have to call this delete contact function. When the promises result, we will not have this anymore. We're gonna say here, Suad, on some configuration object And we say when there is a war, we get the value off the button. That's qualities result on Then, using that result, we say if the result equals toe truth, then we would like to do this part. Someone cut this and paste over here. So basically, we now get the promise. When the promises result, we check what button was clicked. Was it the true Burton or false button? If the false button we're not doing anything, maybe you can simply say that the record is not deleted, but otherwise this is what we want to do. And the configuration now can have something like title. We can say you are a vote to delete this conflict. Next will be placed on from on. Then I can say importance, which is an ari on the first button, is supposed to be like, Yes, I want to delete this. So this will not be the D For only the last button will be the default, so I can specify the next off the button happens to be like, Yes, I am sure Andi, Then if you're staying visible, is true. Value is also true. So this is the one that we are actually getting as a result value here once I get the result value as true Sarette trying to delete this. Likewise, I'm also going to give you another one, which is a fetched you can say cancel on and visible truth, which is not required for the second button and then value East Falls. So when you click on the second button, it's as if you're clicked on the cancel button and the result is false. Hence this condition is ignored and the record is not deleted. Dialogue box quits anyways, so let's save this. Go back for Rosa on there is a delete button. Let's click the delete button. It's gonna say you're about to delete this contact, please. Confirm s. I'm sure canceled. Canceling will simply remove the Della box and you will be staying back here. But if I click on delete and say yes, I'm sure the actual action which is deleting the contact will take place. And after the leading, we're no longer going to be in this space, but it will take it to the contact list on you can see that it's been deleted now. So let's go back toe. One more contact. When I said village, I might want to specify that it's a warning or an error. Warning would be better. So I can say here that along with the title text importance, I can also say Icon is warning on. Put a comma. Save this. Go back on. If I kick on the delete button now you'll see that there is a warning. You're about to delete this Contact police Confirm? Yes, I'm sure. Cancel Cancel Reading Village. Yes. Am sure will delete the record. 35. Building and deploying: our phone book application is now ready. And let's have a look at the folder that we have, so it's on my desktop. On this is the phone book app and on McElroy Zika Press Space Bar. I get information about the directory, and you can see that it is 302.4 and be with 10 items. This particular folder consist of several files, suggests Jason Files. I've script files nor models with represent packages installed externally, which occupied the major chunk off our application workspace. In order to run this application, we open a man front on the workspace. I'm gonna open a new terminal. They've been city the stock phone book and then NGO. So there is also a warning message that this is a simple server used for testing. RT. Booking angular applications locally on it cannot be our shouldn't be using in the production. It has also generated a bunch of Charles could files which are not physically available yet . But if I goto browser and open local who's foretold of a zero called the developer concern , you'll see that in the network there are many files that would have come so All these friends are now available here but not physically available anywhere, so these files have to be required. When we push this in tow a production server. Also, if you'll see the HTML actual source score, you will see that there is uproot slash uproot, which is there in our application also, so you can see that under SRC index, HTML has approved slash uproot. But between slash uproot and slash body, you can see that there is a lot off script injection that has taken place. So in reality, we need this index html on not they laid siege to Mel what we're having in our application directory. So in orderto convert this application into a format which can be given to a production server, we have toe compile all our PS files in tow. Appropriate. HTM and child was tipsy as a spice, and this process is called us building. Andi. It's very simple because angular comes with its own building tools. So if a good of the package Doc Jason here, you can see that there is a command called Build which represents n g build onda. We can also run the energy bill that directly So let's go have a look at that in the command prompt. So I'm gonna stop. The developments are worth by pressing control Z and then type n g build held a lot of options over here. We may not be using all of them at all. The first thing you have to look at is the usage. It says n g build, which is a project work space on, then the options. Now, if you omit the project, what space? It'll assume that you are in the works with itself. There are few other options, like a Woody, which is called ahead of time compilation. We will discuss this in a separate video. Then you have something called based A true if the Ural off the application being built. We will also have a look into this when we build on. If you run into a problem how this can help us? There are a few other options. One off them is the s trash prod. When true sets the bill configuration to the production target, these are the only two options that we might be recording to use Dash es Kort. And that's just product that's going to try this out as off. Now, if you see there is no folder corner ist, when you finish the build process that this folder is created automatically that starts energy build. That's just wrong on that. Just a body press enter, depending on the speed of the computer size of the application. This may take some time, so in my case it took almost 35 seconds, which is quite some time. There are few files that you can see runtime dot Js, which is 1.41 kilobytes mangers, which is only 388 kilobytes on. Pretty much all of them are incubates, and you can also see that the bootstrap that we have added has been externalized into styles on some hash number, Garcia says. So the style, for example, is a 136 kilobytes. But if you want to compare this with the one which we generated during, the developments are work. So if I scroll up, you can see that styles Js is that on one point 09 MB. Wender Jay's etcetera are 4.0 toe MBI, which is all in megabytes and hear everything is in kilobytes. If you also see the new director structure, there is this folder I can see. What is there in that test folder. It consists off phone book app director. That's how project to build a directory has some license files, all the assets which we had, such as images. They're all kept over here a D for Fair Wycombe. But we can change. There's only one single HTML, even though we created one. HTM. And for each of four components, everything is bundled in tow. Main door chairs. There is no additional HTML files, so hence this is called as a static content off your application. So when this is deployed and access by a poser, then that application runs on the client's browser. So there is no service, a requirement off course. We still have our rest endpoint requirement. But after US deployment is concerned, these are the files that we have to deploy on toe a production server for deployment. There are many options we have number One option would be a CD in which stand for content delivery network. There is a shared hosting such as the one I'm using on Go Daddy are there are lower platforms like Google Cloud or Amazon Cloudwatch. And there are many, many options you have for us. Closer concept. One of the Syrian that we can explore is what school searched our message. This is a Syrian for hosting static websites with some sub domains as well as past undermines. If you go to the pricing, you can see that there is a free usage of level which has got unlimited publishing options . Cast undermines basic SSL. All you have to do is to start using it. There's absolutely no strings that test. There was also $30 per month options which has got unlimited projects, unlimited publisher, custom domain custom, SSL on and many other features. Of course, for the demonstration purposes, we will be using this free option on the way you can start working with. This is very simple. Let me demonstrate the same. The first thing 1,000,000,000 to do is tow. Install this onto your computer by using N b. M. Installed that chief all global on anti search. So I ran into this problem while installing because on Mac, in order to install a global package, we have to run with the sudo commands when you hear this real time pseudo and we have been starved Death G, and then they search in the and this time there shouldn't be a problem and it has been installed successfully. And if I take your search that stash health, it will give me few options that the command here toe best who I have loved in us. And if I have loved him, I can lock out. I can log in back. I can list all the projects that I have deployed. I can limo a project. I can also see what kind of plan is mine. So it's very, very simple notice that I haven't created account yet, so I'll have to do is tow Run the search command, and it's going to ask me What is the email notice that it is going toe log in if my email already exists, or it will clear the new search account by entering the new email on the password. So I'm rented my emails. Andi, it'll ask me, what's the password into the password? This could be a new password. If you're a first time user has ended and then it'll ask you watch the project location. Right now it's finding to my working directly, which is on the stop for look up. But the one that I want to deploy is there in the best phone book at And then I was tender . It last me. What's that? Oh, my name. It gives you funny names. Additions, like in this case brought operettas. I don't want this. I'm gonna say N g seven phone book on I pressed Enter. In case if this though my name N G seven phone book has already bean used by someone else, it will give me an other saying that you don't have access to this particular divine. But if this is your own mind and you're tryingto specify Dr my name, it will simply overwrite without asking. So be careful with that, because Ender looks like Engy seven phonebook waas available. And now it has been published successfully tow n g seven phone book. Let's go to the Ural and then have a look at how this looks like so I can go to a browser open. And you that g seven phone book dot says you're such a press. Enter and you can see my application is now served from a remote Web server, not from local atop. But there's one small problem here because when I goto a contact list here, the contact list fittest from a local rest endpoint. For example, If I goto developer console and look at Network Tab, for example, http requests kick on the contact list. You'll see that it comes back with a for not for better so you can have a look at that. Had a message here. It says that local 43 double zero slash contact page number one if failed. So obviously, we have to ensure that our resting point is running. So I'm gonna go back to the command front, NPM run Jason served ender and then go back to the browser Goto home and come back to contact list, and now we can see our contact list is available. Now you must understand angular is only about the front, and so we are able to successfully deploy the friend and application to a production server . However, if you're angular, application depends on some best endpoints. You have to give a valid rest endpoint address. At this point in time, we don't have this, but If you have access to a remote rest endpoint, please update that. So in our application, it is going to be given in SRC at service phone books that we start here. So this is the location which we have to change in order to access this restaurant point from anymore endpoint. One more deployment option we have is by deploying onto a shared hosting server. Let me open my GoDaddy dashboard options here. Did my products hear them a hosting options? I think on manage here I have Ah, file manager. I can hear a new folder with the name off N G seven phone booth. Si. OK. And that four there has been created right here, so I opened the same. There is absolutely no files in it now. All I have to do is to go toe the test folder phonebook at select all these files Dragon drunk Over here. Onda. Once it is uploaded, we now have access toe our application from a shared hosting so I can go toe in order to cope slash n g seven phone book ender. You can see that there seems to be an error. Let's go have a look at the better. The editors are all related toe network. If you see that there is a grunting Js Polly Villages editor. Now, the reason for this happens to be the location off each of the generated files. So, for example, if you just move the most under Reagan taters we know dark cool slash main dot hash numbered R J s while it was supposed to have come from n g seven phonebook slash mean now this is where the bass head sheriff comes into picture. If I view the beach source here, you can see that there that that called based nature of equals two slash which was supposed to be slash n g seven phonebook slash This can be addressed in two ways. Now one of the way is going toe index html Here, edit that adrift equals toe slash n g seven phone book slash Save it. And when I come back here on reload, you should not see that there is no problem with that on. We're able to access the contact list were ableto view them were ableto edit them on. We will be able to delete all those things we are able to do without any problem. The second method is in the build options we had seen earlier. There was an option called based hedge sheriff. So while building itself, we could have specified Dash Dash Basij of Equals two slash n g seven Foreign books slash. So this is how easy it is to build your angular application and deployed on toe either Syrian like surgery message or a share hosting like Go Daddy. 36. JIT and AOT compilation: since we're developing angular application using typescript by No, you should be aware that angular uses a compiler to transform over types. Get called into a job as good former that closes can understand. Angular comes with two types of compilers. One is called JT are just in 10 compiler. The other one is a body are ahead of time. Combine ER, the default development build uses a jit compiler. So when we run NJ Star Command by default, development, build is generated. And hence the Jit compiler is used to understand the same. Let's go and build our application. He was in the commercial in Djibouti, which by before uses the development build options. So when I pressed Enter, it has generated the required chalice Could finds. One of the file here is the Rendered RJ's, which comprises off angular compiler and angular framework. We also see a map fine for each of the JavaScript. This can be used for exploring the content off a particular JavaScript and its dependencies . For this, we need to install a tool Caldas source. Map Explorer and let's install the same NPM. I source my explorer. Now we have a command call source map Explorer in the North Modules slash Dark bin folder to explore the rendered RJ's Let's type in the command dark slash north modules dot being slash source Map Explorer, followed by the vendor charges, which is there in the disc folder Phonebook at Render Chase. So I press send us. This opens a joy in the browser, exploring various aspects off rendered IGs you can see the daughter says that the render chases 3.8 nb, or average more than 50% off that is occupied by the angular framework and the angular compiler. So if we use this build, fight and run the application, every diamond component has to be loaded. The compiler comes into picture, complains that India JavaScript for the first time and then serves to the Broza. Subsequent requirements will use the generated Charles get files. Now we can explore what happens when you're using the production boot by stopping this application and rebuilding our application using the dash dash broad option. So I can say Engy Build Broad, which includes the A woody compiler. There are two things you can observe. Number one is that there is no map files generated, along with the JavaScript fights and that is simple. We can add another flak or dashed our source map. But importantly, there is no rendered RJ's itself. And this is family, because the major part of the vendor chase was the framework in the compiler itself, which are not there anymore on. So it is combined with the main churches it's in so we can explore main dot Js on. We can also generate the window torches explicitly by adding another flight. So let's issue the command N g will. That's just problem. Dash dash. So smart. And that's just when the chunk no other Window GS, which is only 349 kilobytes in comparison with 3.8 nb off the previous portion. So let's explore the same day Dark slash nor modules, dark slash source. My explorer door slash list slash phonebook ab slash friend order Js And now you can see that there is no compiler as well as the angular frame were included in this one. This was the previous one which occupied 3.8 and be more than 50% is the framework in the compiler and there is no compiler here, which means that all our typescript court gets converted into JavaScript during the build process itself. So if there is any errors, such as template binding errors, they will be reported during the build itself. But as in the development Washington, the compilation happens Darren time. So unless there is an editor during time, it will not be reported at all. Let's understand the same by committing a template boiling error explicitly and see if the other is reported at the wrong time or the builder time. So I go to the core. I go to one of the component. Let's go to the other contact component in the DIA's. That's clear one function called us. Get detective exactly returns a string on a new contact and let us call this function in our HTML by using a double live like it get titled on just to make sure that we have a template planning other, let's deliberately give get Underscore title as a function called Save This. Let's go back to the command prompt. Stop the source map Explorer and use the command in the soul, which by default uses the development bill. When I pressed enter, you can see that there was no other and it said, compiled successfully. He won the other template binding together. So let's go to the browser. Andi, open local host 47 0 and you can see that the application is running successfully. I should be ableto goto other components, but when I goto our a new contact, you will see that there is no title and this is primarily because now that the art contact component is loaded, the Jit compiler attempts to compile that faces, a template binding better. And that other is reported on the console saying Get underscore Title is not a function, so there is no error during the building process, but at the same time we do have an error. Now let's have a look at what happens with a woody option. So let me close. This time I go back to the command. Prompt trust controls he to stop this, clear the scream type the Command Engy served with a flag off a body which is included. If you're doing Engy build dashes product and that's ender, you should see that there isn't better indicating a template binding better, and you can see that the bill is failed and I cannot open a new attack, local first for a double zero because the complete buildings failed at this point in time, and just to make sure that this is successfully done. If there is no edit, save this. Go back toe the command. Prompt control, See to stop this are worth on the same come. And what's more this time we do not have any kind of combat elation, others because of which our buildings successful on the application can be open without any problem as well. 37. Conclusion: regulations on completing this course. This course ends here for learning continues. I hope you benefited from the scores and enjoy learning. Angular. As much as I enjoyed creating this course, I sincerely thank you for producing discourse and wish you success in your future. If you have any doubts in any off my lectures or demonstrations, don't hesitate to get back. Your feedback helped me in employing my future courses. Once again. Thank you and wish you all the best.