Video details

Building a web application in Angular | Workshop


Let's have some fun and build an application in Angular inspired by vacation rental apps. Join us for this beginner-friendly workshop, and learn how to build an application that uses some of the core features of Angular, like components and routing, to build a beautiful, functional web application.
Speaker: Mark Thompson
Watch more: Watch all Chrome Developer Summit videos →
Subscribe to Google Chrome Developers →


All right, so what is Angular? So Angular is a web framework for building what we like to call scalable web apps. When I say scalable, what I'm talking about is an application that grows with you in a few ways. Here's one way it scales as your needs scale. So Angular has a lot of features that as your application goes from, let's say, five users to 500,000 users, the infrastructure provided by Angular is really designed to build toward that. So it's a really great framework to grow with you as your project grows. And then we say it's scalable because as with people who work on teams, what you'll find is because of the best practices found in Angular, things like TypeScript and some of the other engineering practices that kind of come built in, you'll find that other engineers can join teams very quickly and be a part of Angular and be a part of your Angular team because of some of those best practices. So we like to think that this thing scales. Okay. Now let's talk about what we're going to be building today. So this is the application that we're going to be building, and this is called Fairhouse. All right? And it's just a mock application where the idea is that someone who's in need of temporary or transitional housing can find a place to live through our application. So we're going to build the basic part of this application and feel free to extend it and make an open source and just continue to build out features after this. Okay. Because you'll have the code to be able to do that. All right? And I want to put this out in the front. What you want to do here is focus on the functionality first, and then we'll make it look like this towards the end. But I don't want to focus on the CSS that makes it look like this. Okay. While we're building it, you're going to be thinking, this man said, it's just going to be a beautiful app. This is not looking beautiful. If you feel that way in the middle, that's okay, because it's not going to look beautiful until the end, and then we'll add the styling at the end. So how do you build an Angular application? Well, an Angular application is built with this idea. The fundamental thing is a component, okay. And the component is the basic building block for an application. Now, here's how I want you to picture this in your mind. Think of a single component, a single component. Think of it as a Lego brick. Right. And a Lego brick by itself is really just a danger zone for you to step on and hurt your foot. If anybody who has kids, you know the pain of stepping on a Lego. So by itself, it's not very useful. But when you put lots and lots and lots of Lego bricks together, you can build some incredible things. And that's how I want you to think about your Angular applications. We're going to take smaller components, put them together, and we're going to build really incredible scalable applications. All right, let me stop right there. What questions can I answer at this point? Let me check the chat. Okay, sounds good. All right, we'll keep going. All right. So what are components made out of in Angular? I'm so glad that you ask. First, we use TypeScript. Typescript is the programming language. That is what we call a superset of JavaScript. So it includes all of JavaScript. And then Microsoft themselves have added some more advanced features like Types. And we won't spend a ton of time talking about Types today. But Types really allow you to have more confidence when you're programming. And that's something that if you ever as you folks have programmed with JavaScript, you see that sometimes you can pass in a string to a function that's expecting a number and you don't find out until you're running the application and everything blows up and then you're trying to figure out what's happening. Okay, so TypeScript is a part of Angular, and we think that it helps you to build better applications upfront. Okay. Next, we use CSS as a part of components and CSS helps you to style your components. Now, in Angular apps, you can use CSS or you can use SaaS, which is a preprocessor for CSS that gives you some extra magic. But I'm going to use CSS in this one. But, hey, if you are comfortable with SAS and you're like, hey, I want to use that. You can use that today. Geo. I totally agree. And Daniel, let me take a break for a second. It says, I thought TypeScript was a JavaScript compiler. Yes. Okay, so TypeScript is a compiler, but that compiler just the output is going to be JavaScript. So it takes in TypeScript and gives the output as JavaScript. Good question. And then we have HTML as the fundamental building blocks. Now, if you look at something like other frameworks, like React, they use JSX, which is like HTML. But with Angular, we just go with basic HTML. And so everything in the HTML set, all your HTML skills are applicable right now. You don't have to learn anything different. Right. With your HTML, which I think is an advantage for developers. All right, friends. So that's the basis of what we're going to get started. So now we're just going to start building. So I'm going to go to a terminal. Let me just make this nice and base so everyone can see. All right, let me clear this up. All right. I'm going to try to Zoom in as much as I can. So I'm going to go into I have a folder for today. Let me put this back at the top. Okay. Can I just get a thumbs up or a comment that you can see this? And if you can't see it let me know if the font size is too small here. I want to make it really big here. Okay. Can I get a thumbs up that people can see this? If we got the camera on, give me a thumbs up. Okay. If anything I show was too small. Leave it in the comments and then I will totally come back and answer that question Mark, does Angela support SDSS out of the box? Yes, it totally does. And we're going to see that right now. Great question. It totally does support that's right out of the box. So you don't have to add anything extra to make that happen. Great question. All right, friends, so now we've explained this part. So if you have your Angular CLI installed, here's how you can confirm if you type Ng in the command line and hit Enter, it'll tell you a bunch of available commands. Right? But this is great. This is great. That means if that doesn't work, if you get like command not found or something else, that means you missed something. Okay. It means you missed something. All right. So now let's build our application. So here's what we're going to type in the new Airhouse Two routing. Okay. Now I'm going to break this down. So Ng is our tool that you installed that will allow you to create Angular asset interact with Angular applications. The new means, let's build a new application. Fairhouse is the name of our application. And then this parameter I'm passing in at routing. That's telling the Angular app include routing. And when I say routing, I mean the ability to navigate to different pages within our application. Okay. That's what that route is going to do. Let's go to different pages in our application. Okay. Go ahead and hit Enter. It's going to take a minute for some of you folks because it's going to download stuff. But right here, the first question is asking is which style sheet format would you like to use? So going back to Sergey's question, so you can choose CSS, s. Css, or some other preprocessor, I'm going to go with CSS. But if you want to use S. Css, you can do that. Okay, you can do that. So go ahead and hit Enter on CSS. And now it's creating our application. I got to remember the stay in camera. Wait a minute, I'm going to take the elevator. Just came back. All right, friends, what does Ng stand for? That's a great question. So Ng was not our idea, meaning the Angular team. What happened was when we first created AngularJS a long time ago, the community started they just started using it and they were like, yes, we think this is great. And we're just going to say Ng to represent Angela applications. And then there you go. That's what happened. And the community started saying it. And then since then it's been a part of our story. Okay. So when everything is done successfully here. Let me see something here. Okay. So if we do an LS. All right. You should have this Fair House. This SS folder was mine. I put that there already. But you should have a Fair House application. Okay. And yes, that's right. It came from the second and third letter of Angular. So, yes, that's totally right. So if we go back, it's really like a like Ng. And so people just started, they're like, hey, we like this as a prefix, but it doesn't mean like anything specific, though. Okay. I have Anglocof locally, and when I created the app, I was asked about choosing essays. And so it looks like a new feature. Yeah. So if you're on Angular Twelve, that's the previous version. Yeah. We're on Angular 13. So you should be able to work on Angular Twelve. But I'm using Angular V 13. Yeah. Okay. Can I explain why we have the routing flag? Yes, Merc. So all I did there is I passed in. So the routing flag is. Let me go back to that part. These are great questions. And all questions are fair here because this is a beginner workshop for Angular. So all questions are valid. All right. If you're a more advanced user and you just want to hang out with us for a little while, that's fine. But I'm going to answer questions like this. Okay. So be prepared for that. So why did I put in the routing? Routing? I wish you can see I was pointing to. Okay, here we go. The dash routing. Why did I add that? What that allowed me to do was tell Angular that when you create the new application, I want routing enabled. Okay. I want routing enabled. Good question. Let me check the Q and A as well. Okay, Hugo, I will save that question for the end, because that's a more advanced question about RxJS. I'll save that for the end. Or you can find me on Twitter and we can talk about it. Is there any command for routing, like ad after the name of the web app? Yes. So here's a great thing to check out. So the question is, are there any other commands that we can use? Yes, there are lots of other commands that you can use other than routing. The Angular documentation for the CLI would be a great place to start with that. Okay. All right. So with that being said, let's actually run our Angle application. So let's see here. Now I'm going to open my project, so I'm in Visual Studio code, I'm going to go to my CDs folder, and I'm going to open up I'm going to click on Fairhouse. Then I'm going to click Open to open Visual Studio code. So go ahead and open your application in your editor. Okay. Go ahead and open your application in your editor. I'll give you a second to do that. And if I'm going too fast, we got time. We have time to be together today, so it's going to be great. Okay, so who asked me that question? I think it was Darsh. Who wants to know or wait, who asked? It was others. Okay, yes, you can do that. You folks at home will not have to have a specific set up to make sure that you don't have a lot of Windows flickering. You can do code in the same folder, and that'll get you going. But I have to keep my set up so that way we can keep this party clean. All right, awesome. So now that I have my Visual Studio code will look a little different than yours. Mine is in high contrast version, meaning I'm keeping it like this in case we have any viewers who need high contrast mode. And I want to make sure this is accessible to as many people who can watch this. So if mine looks different than yours, that's why. Okay. All right, so when your Visual Studio code opened, open up your terminal. Okay. And then do this. Ng Serve. Is that viewable? Is that too tiny? Let me know if it gets too small there. Okay, let me know. Okay, great. Thank you, v Sandy, I appreciate that. Adar. That sounds like a system configuration because we have a Get. So get is installed, not installed. A Get project is initialized by default when you create a new project. So if you look at the CLI for ng new that I just sent, you can create it without having Get initialized, and then that should fix their problems. I think that's a get issue. I think that's a get issue. Okay, so do ng Serve. Here's what ng serve is going to do for us. You can say yes or no to this. This is just so we can know how people are using it, but you choose whatever feels comfortable for you. Okay? When it asks you if you want to let the Angular team know and you can always turn it on and off for analytics, it's up to you. Choose whatever. It doesn't change the way your application performs. Okay. All right, so this is going to start a development server right out of the box. So remember I was saying that Angular is a scalable framework. This is what I mean by that. We're giving you lots of information. So when you see this output from ng Serve, a few things are happening. One, we're building and compiling your application, and then we're telling you what your bundles sizes are for the app. Now, this is a development bundle size. When you go to production, you're going to see a different size, right? Because we'll not have to include all the development time stuff. When this runs successfully for you, go to Localhost 4200 and that's where your application is going to be. So let's do that. If we go to local host 4200, let's go look at that right out of the box. Working angle application. Okay, friends. Well, that's been it. Thank you for coming to our workshop. You built your first Angular app and now we can. Just kidding. I know there's more to the story. Laurie. Good question. These bundle sizes are only for development. When you do a build for production and a deployment for production, we will go ahead and do tree shaking like all the stuff that you need. We optimize this quite a bit. This is just for development, but good question. Great question here. Okay. Awesome. Now this is just a default application. We can go in and we're going to leave this running. Okay. So you leave your development server running. Let's go in and actually make some changes. Now I'm back in my project. You can see my project here with all the files that were created by default. These are configuration files, your package for your NPM, et cetera. I'm going to go into source app. Okay. And then I'm going to go into App component HTML. So I'm in app component HTML just to give you folks some idea. You know what else I'm going to start doing, too? When I type a command, I'm also going to paste it in the chat just in case people need it. Okay. There you go. All right, cool. Awesome. All right, let's keep this thing going. All right. So I'm going to close this side so we can see. So we have a lot of default styles. If you scroll all the way to the bottom of this, there's only one thing I want you to keep. One thing I want you to keep is line 501. Everything else you see where it says content above as a placeholder and can be replaced. Get to the end of this file and then delete everything above. All right. And here's what should happen after you're done. After you delete all of that stuff, it should just say router outlet. I'm going to explain that in a second. But before I explain the rest of that, I want to type something that everybody needs to know about. I can't get my Emoji is working anymore. Okay, cool. All right. So now we got a hello world. We save it. And this is what should happen on your application. Okay. You see, because this thing has live reload. It's a reload. Yeah. It's just going to refresh the page. I don't want to misdescribe it to you, but what it'll do is when you make a change in your application, it'll refresh your application for you in your web browser if you have them side by side. Right. So it's a simple live server. Yes. That's a great way to explain it. Thank you. All right, friends, now we're ready to get this party started. We have all the parts that we need. We have an application running so far. Yes. Ng server for the live server. Yes, that's correct. All right, let's start stubbing out our application. So what I am going to type so we're going to do like a section and I'm going to give you this code actually here. I'm just going to give it to you now. But just try not to go ahead of me because I'm going to explain some stuff. Okay. But I'm going to put the code for the file that I'm working in right now. I'm going to put it out there for you. But just try not to go too far ahead of me. Okay, so here's what we're working on right now. This is the part that we're working on. Do not type all of this, but we're going to break it down and just add the parts that we need. All right, so we're going to have our section here and the section I'm just going to. Oh, that's the wrong one. See, that's why I said don't go too far ahead of me because I don't want to give you the wrong thing. 1 second, friends, other example of the code. Give me 1 second, friends. I'm just pulling up my all the stuff that I have prepared for you. Give me 1 second here. I'm still here, friends. I'm just looking for the part that I prepared for you so you can have what you need. It will be fine without it. It just will make your life a little bit easier if we had it. 1 second here. Okay, so here's what we want to do first, just getting started out here. We're going to get rid of our section here. That's right. Okay, get rid of our section. And we're going to do a header because we're going to create that banner. So if you remember in our application back to our application, just so you can see, we're going to create this Fairhouse banner at the top. So we're going to do that part right now. Okay. So to create that, I'm going to do a header. I'm doing H one inside that H one. I want to type the title of the application and then we'll add the image later. I don't want to add the image now because it's just not that important. Okay. But we will add it. We'll add that back in later. So you should delete from app. Okay, there you go. Cool. So we're all in app dot upon the HTML. So all you should have right now, if everything is working where you want it to, is your fair house text. If you save that, say Fairhouse. Next we're going to wrap line five in the main. This is the main section. Now I want to explain to you what we're doing here. The structure that we're using is that the header is going to be on all of our pages. So this is going to go into app component HTML, which is our parents component for our entire application. App component HTML. That's our parent component for the entire application. So I'm just kind of showing you like the bitcontainer app right there's like a bit container component. And that one is where you're going to put all of your things are going to show up on every single page. And what I'm saying now is that on line four, we have a main tag. And then we say, here's our router outlet. The router outlet says here's the destination. Every time we go to a different page, okay. Every time we go to a different page, here's where I want that content to be placed. All right, friends, if you have more questions about that. So similar to a Div that contains the root. Yes. Similar, yes. Except for when I use main, it's just a more semantic HTML tag versus it being just like a random Div. Like main helps screen readers. Right. People use assistive technologies. We want to keep all of our friends able to use our applications. Okay, great. So now we have that working. So here's the next thing that we need to do. We need a component. So if we go back to our application, do I have a laser pointer? Maybe laser pointer. Okay, good. So we've created this part, this header, this part is created. Okay. And this is the head of what this next part. What would you call this in a chat? What would you call this if you were designing a web app and you're trying to figure out what is this part here where it's like the main kind of like text, like the landing page. What would you call this area if you were organizing it into a component? What would you call this area? I see body in there. I can see search container. That's actually not a bad idea. I would say if this is a page, if this is a page, would you potentially call it the home page? Would that feel okay? Because this is a place where they're going to land, like the home page. Okay. So this is like our homepage that we're making right here. That I'm outlining with my magic pointer here. Okay. Or hero section. So you have some options here. Okay. So now here's what we're going to do. We need to create that component. Okay. We need to create that component. And let me show you how we can do that. I'm going to open a second tab in my terminal. Open up a second tab in my terminal. So I have two. So I have the one with our server running and then I have this one running. Okay. Where I can just type in commands. We're going to use nggenerate component will say home. Okay. So I want to let you folks be able to see that. So that's the command I want you to type and let me break this down. What we're doing. So Ng is the angular CLI. Generate means create something for me, this is like code generation, literally code generation. So create something for me. Then we have component, right? One of our components, one of our tiny little Lego bricks that we're going to add into our bigger production, and then the name of the component. So go ahead and type that in. I'm going to put this in the chat as well in case people need some more time. So we got home. All right. Now it tells us where it's created it and what has been created. We got all the components, all the parts of our component, CSS, HTML, and TypeScript file, and then the spec. Ts, this is a test. Okay. So we also give you a test out of the box, which is really helpful. There is a short form, but since it's beginner friendly, I want to make sure people know what we're doing. So the short form is NGC homelike. But that doesn't mean anything if you don't know what you're doing, right? So I want to make sure that's there. Okay, so here's what we're going to do next, friends. We want it to show up every time you come to the homepage, you open our application. That's what we want to show up. So let's go in our application and make some changes. Okay. So we're going to update our route. So I'm going to go back into my application and we'll you'll see it's. Approuting module. Okay, that's the file I want you to open. And friends at home who are a little bit more experienced and have some experience with some of this stuff. If you have cool shortcuts that you want to leave in a chat for the other workshop participants, that would be great. I'm super happy to have you folks participate as well. Okay. All right, so let's go into our routing module. All right, here's where we get to create our route. Now, I know in other frameworks there's a different style where you created in JSX and all that kind of stuff, but here we do it in our approuting module. Ts, we just created a home component, but we need to tell Angular that when the main page loads, that's the component we want to see. So here's what we do. We create an object literal. So just empty object, two curly braces. Open and close. The first part is path. Now, with Angular and Vs code, we have some really nice integration. It's giving you the information you need to know about what you're trying to enter. So, yes, we want path. This is going to be our default path, meaning whenever someone goes to localhost 4200, we want them to see this path. So we do empty stream. And then from here we'll say components. Well, which component do we want to go to? Someone in chat. Tell me, which component do we want to go to when you get to these home? Path, type it in Chat for me. I like that energy Luana. I like that energy blessing. I like that energy. Let's go, KB. I like that energy. That's what I'm talking about. You know, I have something for you all. You see this? I've been saving this. Let me get it in my pocket. You see this? High five for me to you. You're doing great. All right, so we type home component now because I'm in Visual Studio code, it's going to auto complete this. I hit enter and now that's done, we have our route created. And not only do we have our route created, we have our component. Now, this will paste very poorly, but I will paste it anyway. That's not that bad. That's actually usable. Do you see that? That's actually usable. Okay. Not horrible. Make sure you copy the right part. So if you have to copy that. All right. Now, if you look at our application on the left hand side of my screen, we got homeworks. So that means everything is linked up. So our route is done. What questions do you have friends? Can I help someone with a problem? Anyone stuck? So Carlos asks, is it a good practice? Yes, I can. I can do both things. So I'll answer this question while I go back to the home page. And then I'll also add component. Hold on. Let me do this HTML page. This is what I had in there. Okay. All right, let me ask you three questions at a time. Okay. So first, B, Cindy, I just pasted my content into the chat from this page, just in case you needed it. Carlos asked, is it a good practice to where you name pages as components? Yes, that is how we do it because there isn't a different type of thing that you do for pages. Okay, so your component will be your page because you could have called this landing, you could have called it main page. That's going to be based on your team that you're working on for your project. If you say something like main versus home, I just like home because it's very clear when you start to hear it. Okay, very cool. A little confused. The upper and lower case, sue. Okay, let me answer some questions. Can you be more specific? Is it with the upper and lower case with the name of the component to is that what the question is? Because if that's it, this is what's called this is Camel case. But this was created for you. So by default, the convention is to do like for components, we do capital for each first letter of each word. Right. And components. And then when you're doing variables, for example, then you would do your Camel case the other way. All right. Now, Daniel cannot find home component. So here's what I want you to do. Look in your files. So when you go to here, I want you to make sure that you have this folder structure where you have source app home and inside there, if you do it, and also make sure that you've imported Home from the right location. Okay. Make sure your importance is correct. Okay. All right, let's see. I guess is part of the new app template. Yes. So that namehome component. Html that was created for you based on the configuration of the default project. You can change that name, but that's our convention where we say the name of the name, then the type of thing it is like a component, and then the file extension. Okay, Sergey, I wish I want to talk to the team and say, please put in code support. Okay. How does that need a component and when we can do stuff in the current place itself. Okay. Actually, when do you need a component versus when do you need to just do things in the same place? Well, that's going to be dependent on your application. So why I want to do a component is because I looked at our application. So let's go back to our application. The Fairhouse logo. I want this to show up on every single page. So that'll be in the main app component. Right. But then I said, hey, I want this section to actually change this middle part. I want this to change over time. It should be something else. So that part could be a component. Okay. I'm so glad you figured it out. Okay, sounds good. You need to import good. That sounds good. How was it imported? I see line three. Oh, good question. The living Earthling. Okay, how was that imported? So on line three, when I started typing component, you see how it's giving me a code tip right here? It knew this what I meant, and then it added it for me. That's why I didn't have to type it. Thank you for calling that out. Vs code added the import automatically because it could determine what I was trying to type. Okay, great. And all these questions are great questions because you're new to Angular. All right. You're new to Angular. So this all is fine. I love this. I love these questions. Excellent. Now let's start making our home components look closer to what we have here. So we need some text, we'll add the image at the end, we need some text, at least then we need to search by city. Right. And we need this button. So let's start adding those parts to our application. So to do that, I'm going to go to Home component. Html. So go ahead and go into that file home component HTML. Component HTML. Okay. So that's what we are. Okay. Cindy, I'm so sorry. I didn't see that. Is that still working for you? Oh, you stopped ng serve. Yeah. So you got to restart it. Good question. Thank you for helping friends. That is so phenomenal. You know, I have something else for you. Wow. That's for all of you. For helping each other. You see that? Hit you with some clean dabs. Dad? Dads. What? Okay, let's get back to people are just going to start leaving a chat. Like, you know what, I just signed up for this. I'm getting out of here. All right, so in our home component. So here's what we're going to do next. All right, so here's where our section is going to come in so we can do a section. All right? And then I'm going to do a Div here and this structure will make sense when we go to style. All right? And then I'm going to put the text transitional housing can be hard. We're here to help. Okay? I'm going to keep it all on the screen, alright? So you can get that working. Alright? And I'll put this in a chat for you. So no worries. I'm not going to leave you hanging. I promise. I will not leave you hanging. All right? And so this is in homecomponent HTML. All right? I won't leave you hanging frantic. I promise. I'll put this in the chat once we get a little bit more of the text type in there. So now that we have that part working, we needed these and it works to be interactive. I hope that's a good thing. I hope everybody feels like this is interactive and you're having a good time. Okay. Why did I add section? That's just because semantic HTML meaning, like it should mean something. Section and diff are the same in terms of being block level elements. But section has more meaning than a Div. Okay? Section has more meaning than a Div. And so when someone with like a screen reader, for example, they can navigate our page better and then the screen reader can interpret the page better and without going on the sobox. There are over 2 billion disabled users out there. So not everybody uses the web like we do. If you are not disabled, you have a very different experience to somebody who is disabled. So when we build stuff, we try to keep the entire community in mind. Okay? So off the soapbox. All right, so now we have that going. The next thing we need, if we look at our application, let's go back to the app. So we have our text. That's working. This is great. Now we need to have the input and the button. So let's add those things. Sections do need headings. Let's go. Sections do need headings. That is so correct too. That is so correct. That's the mistake that I made here is that I didn't add the heading here. The transitional text could technically be the heading, but that's going to change my styles. So when we add the styles at the end, I will go back and fix this. So please hold me to that. Okay. Thank you so much for calling that out. Yes, Laurie, same thing. Thank you for calling that out. I made that mistake when I designed this that I didn't include the header there. I mean, the heading there. Thank you so much. We'll fix that after we have the styles, but not after we ship. Before we ship, but after that style. Okay. So now that we have our text there, let's add the rest of this. So we got to get our inputs and our buttons. Okay. So now I'm going to add another Div here, and then we're going to add a few things when do a label and we're going to fill in that label and we're going to do an input and we do a button. So I'm going to let you folks start typing those things so you can know what's coming next. Our label is for we're going to say city. Right? So this is going to be the label text for that city. And we'll do search by city, and city doesn't have to be capital. We do lower case here, which means that we'll see the type for here. This is a text type, and then we'll do ID equals city, and then for a button, we'll do search. Okay, now, I don't want to spend too much time teaching the HTML here, but I want to make sure that we get at least this working. So this is what you should see on your screen so far. I'll give you what I got. That way you can catch up with me because I'm going to speed up just a tiny bit so we can make sure we finish within our time frame because I do want to make sure we get the rest of this out. Brent, you should get the Angular Language Service because somebody put the link in the chat for the Angular Language Service because it's going to give you all the great support for our templates here. Perfect. That's really going to help, Brand. That's really going to help. Okay, so now if we type a city, let's say we do Chicago and we do search, nothing happens. But what do we want to happen here? How do you turn it on? When you go there and you click Enable, it should be on for you. Okay. It should be on for you. So if you look at the Angular Language Service, see when you go into the page, this will either say enable or disable, and so you get to choose that. Okay. There you go. All right, so let's get back to you definitely have to reload once you turn it on. So just reload your project. All right. So in order to make this do something, what I want to happen is that whenever I type in this form field, I want it to be stored in a variable someplace so I can use it for my data search. Okay. I want every time I type in here, I want it to be stored in a variable so I can use it for my data search. Here's how we do that in Angular. Okay. In Angular, what you'll need to do is include something called ng model. Remember, ng is the prefix that we use in Angular. And then we say model is like the data source that we're going to use. So we use this funny syntax called banana in a box. So the square brackets on the outside and then parentheses on the inside, and it has to be in that order, square parentheses. Right. And then what we'll do here is we'll say ng model. But you're going to notice something and we're going to tell you why. Okay. When we set this equal to blank for now, OK. It's not happy. We have to make a change here. See, my whole thing is broken. It's not happy. And we're going to make a tank. I'm going to put this in a tab for you folks. So that's what my input looks like. The reason it's not happy is because we have to tell Angular. So to try to keep those bundle sizes or the application size small, we don't always import and include everything out of the box for you because you may not be using form data. So if you decided to use forms, which we have, we have to tell Angular. Okay. Include support for forms. Okay. So let's do that. The way to do that is we're going to go in our application. There's something called App module TS. Can you see that? App module TS? Go into this file. Okay. Go into that file real quick. You'll be having a good time in there. So this is a part of the Angular structure. And I don't want to go too deep into this because there's a lot to talk about with App module TS. But here's the most important part. App module TS is telling Angular, it's providing all the dependencies that we need. Right? So like, we have our routing, it's providing those dependencies when we created our App component and our home component is saying, hey, make these available, right? So the thing we have to worry about right now, though, go up to line seven. Here's what I want you to import. Meaning like bring in the libraries for this thing. I want you to import Forms module, import forms module from single quote at Angular Forms. I'm to give you this right now just to keep everybody on track with us. Yes, Loanna you can add routing later, but the reason I didn't want to add it later is because I didn't want to confuse you at the beginning. I wanted to give you a smooth introduction. So when I did the routing in the beginning, it just did automatically the manual steps that we're doing now. So, yes, you can always add it later now that you're more comfortable. This isn't a form, but imagine starting out, having to add routing. You're like, I'm quitting this, I'm out of here. All right. So now that we have our import, go ahead and save it and then the application comes back. I know you may be thinking, you may say, oh, Mark, I don't know what happened. Let's see, let me put this in here. That's my Ng module, just in case you need it. Is there a forms? Oh, I don't know offhand, but I want to write that down because that's a really good idea, sue. Austin, that's a really good idea. I don't know if we have that, but I'm going to write it down and I want to probably implement it. Yeah, I will probably propose that like, hey, let's add this by default. That's such a great deal. Okay. And I will give you credit, too. So tag me on Twitter to remind me. So that way I can give you a shout out when we do this. If they don't reject my idea or your idea, if they don't reject my proposal for idea. Yeah. Dennis, why do some inward component module? Yeah, it's because the dot component means that it is a component. Module means that it's a module. Modules have a very special role in Angular where you don't really work with them as often, but they just manage your dependencies for your application and then you have some other stuff going on with components. Components are the building blocks. So that's why some in with different, different types. That's really good, though. Ok. So now that we have that going, I'm going to jump back to our homecomponent HTML and we're going to fix this now because it's saying, well, you got to put something here. All right, Sue Donaldson, peace. I hope you had a good time and all the friends for coming. Thank you so much for coming so far. I appreciate you. So we're going to do here we do City. Now, City doesn't exist yet. Right. So in the Ng modules here, let me put that in the chat here, keep this all going. Okay. Very cool. So City doesn't exist yet, so it's giving us an error, you see. So it's saying Property city does not exist on home component. So where do you think we should go to create the City property? Where should we go? Type that in the chat for me. Where should we go to create the City property based on an error that's on my screen. Yeah. To our home component. Yes, to the home component. Nice job, friends. Right. We got to go to the home component. If you're using the language service installed, you see this little link at the top. Go to component, write the top of your file, click on that and you're writing your component. If it's not there, you don't have the language service installed. Not the end of the world, but it is definitely helpful if you have it installed. Okay. All right. So what we're going to do here is I'm going to go under the constructor right here. So I'm on line twelve. I'm going to type city and set it equal to empty string. Now, this is going to be your first experience with the components, right? So that's going to be really cool. Oh, I got to save this. Make sure you save your file so it also will stay broken. Okay, so this is your first experience with the logic. I'm going to give you a quick rundown of what we see here at the top. This is called let me close this up so you can see just one part at a time. This is called a decorator. And so this just gives us information about this TypeScript class and says, oh, it's a component. So now we know this is a component. And then it tells us what the name of the how to reference the component. It also tells us what the URL to the template is. So this is what it's going to be called. And this is where the styles live. Then inside the body of the component. And this is all created for us. We have a lifecycle method, which I'll talk about later. We will use that. And then on line twelve, we're going to add city. Okay, Laurie, why the banana box and not just an ng model attribute? Because we want to do what's called two way binding. That's a good question. So why isn't it just ng model attribute? Okay, friends, if you go ahead and type city on line twelve said equal to empty string, we're going to keep it going here. I want data to go back and forth. I'm going to show you why that's important. Right now. I'm going to show you why that's important. So the banana in the box means two way binding, meaning that I could send data in and get data out. And how that becomes helpful is on line eight, I want to temporarily put city in these two curly braces. So if you've seen react before, you have the same type of thing, whereas it's called interpolation. Right. So now a property from our TypeScript class can go in. Here an expression meaning you can do some expressions called functions. Be careful with calling functions, but you can call functions and do other things in these double curlies. But here's what it's going to do. I didn't save I got to say. Now if I type high alert. You see now when I'm typing in, Angela knows about it. You see that? And without the banana and the box expression, I couldn't do it this way. So it's binding both together. Very good question. All right, so now we have what we need. Okay, friends, this is great. Don't leave this in here. That was just temporary. That's like a console log where I use it like that. Okay, so we got our form done. Now we need to add our search functionality. Okay, when I type a city, let's say Chicago again and I hit search, I want something to happen when I click. So we have to use an on click handler. So for the button here, I'm going to type click. I want to wrap this in parentheses again. So this says that it's the event. Okay. So just wrap it in parentheses and I'm going to set it equal to something. Now what do we set it equal to? Well, we're going to set it equal to what we want to happen. What do we want to happen whenever we go to this page? So whenever we click this button, what we want to happen is search housing. We want to say search housing. Now this doesn't exist yet, but I'm just giving you an idea of what's coming next. So here's this line. I'm going to put this in a chat for you friends, okay? Very, very good, very good. Alright. I still have the same area even though I change this high script. Okay. I will paste my code in a second. I will paste my code in 1 second. So is there a property in the angle that performs this function? No, we're going to implement it ourselves. So that's what we're going to put. So let's go back into our component because we're going to create this function. Make sure you put the parentheses around. Click here. Okay, that looks correct. Okay, so I'm going to start on this search housing function. Okay. So we're going to have to add a little bit of code here to make this work. So I save it. The error goes away. All right, we're going to add a little bit of code. I want to give you folks some of this code. We need a few things here. First thing we need to add. So you have your function kind of stubbed out. You're like a template for your function. First thing I want you to add, let's add something called search results because they're going to do a search and we want the results to show up here. Okay, here's the second thing. I want you to add something called housing list. We're going to set that equal to an empty array right now. Alright. But we need to add something else. So right now these are just arrays in our application. So just a list of data. But this is actually not necessarily the best practice. Okay. And I'll tell you why it's not the best practice, because it doesn't tell us anything about the data that's in this array. In TypeScript, that's the whole value. In types, they tell you information about the data. So we need to create something. We're going to create what's called an interface. And if you're a Java programmer, it's the same thing, but TypeScript uses it a little bit different. Okay, so here's what we're going to do. I'm going to give you a command, go back to your command line. Don't stop your server though. Just open up a new window, a new terminal here. And here's what I'm going to type in. Ng G for generate I for interface. And we're going to say location. We're going to say location because think about the data that we want to be searching. We want to search housing locations. Right. We want to search housing locations. So to get there, I want to be able to give it some information, some data. I want to be able to give it something like some shape. Okay. Now I put it in chat just in case you needed to know. So you're going to run that command and the next thing I'm going to do inside my app here, I'm going to go to location TS. Okay. So we got location TS. All right, so here's our interface location. Now, if we're thinking about these as being houses, there's some things that it probably housing, at least a housing location. There's some information we probably needed to have. Right. So what's some of the information you could probably think of that you want here? Type it in the chat for me. What's some of the information you think could be helpful? Let me see what your friends are saying in the chat. Yeah. Okay. Good. Josh. I like that. Okay, Daniel. I see. Yes. So these are all really great things. Yes, exactly. Because this is all about somebody who's looking for transitional housing. So I'm going to put in some of the basic ones that I want it to have. And then if you want to add more later, you can available units. Exactly. So if you were to expand its application, you want to add a lot of these things. These are all great pieces of data. But you see how helpful that is here? I want to put the whole interface that I just Typed in. But you see how helpful it is. Now, when you're thinking about it versus regular JavaScript, you have no way to enforce that. A location should have a name or description of the city. How many objects have you received that didn't have the data that it was promised and you got undefined, right. You went for a property and it didn't exist and your application crashed. Well, TypeScript is going to help you with that. Okay, so that's what you go in your interface. Go ahead, save that and hop back over to home component TS. Okay, very cool. So here's what we're going to change. We're going to make a small change to our code and I'm going to send you this. So I'm going to send you this. All right. So we're going to say the type for this is location, and it's going to try to import it for me. So I got to be careful, make sure it's the right location. So these are not right. It should be my location, the one that I created and the one that you created. So the first two are not right. It should be the one that's yours in your application, and they could tell by the import. I'll send you this whole file in 1 second. But if that doesn't work properly, we'll be able to fix it with you. Not never, because just relax. Type scripts. Relax. Okay, so let's see here. Why are you complaining? Never missing the following? No, it's not. Okay. That's why. Because it's the type of location array. I'm not going to walk you through all the logic of how we build out our search. I'm going to copy and paste it for you. But you're going to be great, though. Okay. How far can you get an angle if you don't know TypeScript? Great question. You can go really far because when I first learned Angular, I didn't know TypeScript at all. I started learning it and then I started studying it because I was like, Whoa, TypeScript is actually quite impressive. And then I got really involved in it. All right, so we're just about done with the hard part here, which is to get our application. Are these taking empty locations, taking empty rays? They're empty right now, but we're going to add all the pieces in this last section is now we're going to fill in all the gaps to make all the stuff work. Okay. So we're going to be right where you want. So now we're going to throw some data in the search results. I'm going to give you some data right now. I'm going to paste some data for you that you can paste in. Okay, I got you. Now I'm going to give you generic data now. So in my housing list, I'm going to go inside there. I'm going to paste in this generic data location one, location two. Of course, you can get more creative here. I'm going to give you all everything right now so you can have it. Because I want you to be able to keep up with me here because we had to speed up just a little bit. We have a little bit too much fun and there's still more to learn. Okay, here, I'm going to paste this so people can catch up. So that should be your housing list. Okay. So let me ask you some questions. Yeah. The importance. Thank you for pacing those correct imports. Nice job, friends. Thank you so much. All right, so the locations TS is acting as an object template. Yes. Kind of Sunil. That's a very astute point. Is the interface acting like an object template? Yes. The language that we use, we say, is to shape the data. So in typescripts, the location has its properties that we decided where it's going to be true. Then if I put like an object literal like this, as long as it matches the properties that are required, it has the same shape. Which is why I said for my Java friends, the interface is not the same as you experience with Java it's similar but not the same. Okay, similar, but not the same. There. It's a different type of contract. Okay, friends, now that we have our housing list set up, we need to implement our search. So I'm going to just give you that text right now for the search. I'm just give it to you just for the sake of keeping because we're running a little long time because I'm having too much fun. I'm just going to give you this. So what we're going to look at is that and I'll walk you through it. I'm going to paste it in here for now. Let's see here. Okay, so then face recognize on the component. Yes, because we imported it, Carlos, that's why. Because when we imported it, we made it available. Okay, good question. Good question. So I just pasted the function. Okay, wait, let's see. Yeah, it was. Because that's why I said for the location. That was a mistake on my side. Because there is more than one location object. Let me give you the whole search housing function. Sorry. We give you this whole thing. Okay, so let's walk through this. Let me add this on another line. Just so it's all on the same screen. Not ideal, but I got to keep this code nice and big so everybody can see. Okay, I think we can kind of see this. Maybe not. Actually, this is a long line. Okay. That's probably harder to read. But let me tell you what's happening. Whenever this function is called, it's gonna get called whenever we click search. Okay, so I don't want to search for an empty city. So if this city is empty, like an empty string, if it's not an empty string, we're going to run this code and we got to use the keyword this here for our TypeScript. We're going to use a keyword. This I know, this is a whole thing. I have an actual video explaining this keyword for another time. If you folks are ever interested, just search my name and look for this is ridiculous. And you'll find it on YouTube. The search results. So these are the search results that were displayed to the user. We'll say this housing list, which is where we have our mock data. We're going to filter it down. We're going to filter it. Come on, tips don't hurt. Okay. We're going to filter it. If the location city is the lowercase version matches this city lowercase version. Now, the reason that use lowercase is because people could type mixed case letters and we don't want people to miss out. Is this auto binded in Angular or other class functions? Binded. It's the class functions. That's why, Laurie, it's because it's a part of a class. Yeah, good question. Laurie, in the building with the advanced JavaScript knowledge. I see you. Yeah, it's because it's a class function. Good question. So when you want to reference your properties, you got to use this when you're rocking out an Angular. Okay. And then I think I have an extra line that doesn't do anything. So 46 isn't necessary. But you'd be okay. Okay, friends. So now we have our search function implemented, and if we type search for Chicago, hit search, nothing's happening. I wonder why that is. Because we didn't display anything. So let's update our code to be able to display our app to display the search results. Okay. So now to do that, I'm going to give you this whole section so we don't spend time on the HTML right now. Since we don't really have a lot of time for that, I'm going to give you the section. And this is just a plight of teaching. You want to explain every single thing. I'm just going to give you this and we'll walk through it because it's also going to include I want to walk through this, but I'm still going to paste it so you can have it. Okay. So let's walk through what I just gave you. So right down here on line 15, I added another section missing a header. Totally acknowledged. These are my search results. It's in the Ul. And so this is the thing I want you to key in on here. Ng four is what's called a directive. A directive in Angular allows you to augment the behavior of an element or a component. So I want to repeat this Li. So the Li, I want to repeat it for as many locations that we get back from the search results. So this is like a for loop in HTML. Okay, this is a for loop in HTML, but the Angular version of doing that. So I say let location that looks like JavaScript. It is not JavaScript. This is template language. So declare the location variable. So let location of the search results. So for each location of our search results, I want to output a P tag and I'll get to this link later. But first, just want to make sure that I get the P tag out there. And what I really want to show you is this. I'm using string interpolation here and we got location dot name. Okay, we got location dot city. So remember I showed you before how to show your properties in your template with the double curly. That's what that's doing for me. Okay? That's what that's doing for me. Now, this should work if I type city for Chicago, for the city, because that's where the three locations are search. There we go. Now we have our repeating elements. Now we have our repeating elements. Okay, Brent, looks good. Giving you folks a second to catch up and paste that in there. I'm going to paste you everything in a second. Okay. Go ahead and see if you might have a typo. So make sure here, I'm going to paste everything up to this point for this template just so you can have it all just in case and you can compare to what I have to what you have. Okay, so the next thing that we want to do is let's say I do my search and I'm like, oh, I love these results. This is so exciting. I love these results and I'm like, but I want to actually see some details about one. Right. Oh, perfect. It's truncated. It doesn't like that I did that. Okay, I will fix that right now. I think that you can get that. I will fix that for you right now. Give me 1 second. Okay, somebody already fixed it. Perfect. Okay. It was just in case you needed it. All right. So now we had to do a little bit more coding and then we're going to be home free. Friends. Alright, so we have all this code. Okay. Thank you for pasting that for me. Whoever pasted that. Thank you for that. That's really, really helpful, Laurie. As DJ Khaler would say, you're the best. All right, we need a details component, friends. That's what we need now because I want to go to a place where I can see the details of the application. Yes, Cloudio. I will do that. I will do that. You said you need all of what home component. Ts. Yes, I have that for you. Hopefully it'll take it's still truncating my stuff. Hold on, hold on. I have an idea. I prepared for this. I actually had this in mind that this could happen. Let me just get my home document at HTML. Home. Ts. Okay, so that should work. I think this works. Maybe. Okay. Alright. So now let's get our last component made because we got two more things and then we're going to be in the mix here. So first we're going to run this command and I want to explain it as I type it. I'm going to type it to you and then explain it to you. Okay, I'm going to type that in the chat. You're going to run this command. Okay, so what this is doing is ng for generate. But this time we want to make a module for our new components and we're going to make a component called Details. But we also want to make a route at the same time. Name the route details. And where do we want to put it? In our main app module. So this is a little bit of a funky line because it's a lot here. But the gist of this line is that we're making a new component and we're going to make a route at the same time. This is going to make a new component and a route at the same time, which is super helpful because we're going to save a lot of time on this one. So now if you run this, it doesn't work if you run that one. Let me see if I did it wrong. Oh man, that's funny. That is funny. It doesn't work. Let me debug this command with you. Yeah, no, I Typed the wrong thing, I guess. Let me check my syntax so I have that. Oh, wait, you know what happened? This is a problem, but okay, friends, I got you. That is literally because I should have saved this. I had this command saved for you and it's supposed to be two dashes. Google Docs took my one dash command, two dash command and made it to a single dash. It messed me up. Wow. Google way to not have my back in the middle of my workshop. Unbelievable. I'm just kidding. It's all good. Why are you complaining? What the heck? This is strange behavior. Let me just type it by hand because I know that it works for NGM. It didn't mind the details. It didn't mind the route. It didn't like module. Maybe there's some special character or something. I got like, stuck in there. Let me see something. Okay, that was super weird because I didn't change anything. I just retyped it. But that's okay. It doesn't really matter. So now we have our component working. Okay? So if anyone is still having trouble, let me know. But this should be fixed now. It should be working. Okay, there we go. All right. That should be working for us. All right, so now if we search by city, we do Chicago search here, I click on this. That's misspelled details. Let me refresh for a second just in case my routes are not working with the bug it to see if there's a problem. Oh, there's some errors. Okay, let me just debug my errors because I definitely type something wrong. Okay, so I'm in the console. I'm just going to debug this just to see what's happening. So when I click, I get an error our route. Okay, so our route won't work. We got to update our route. So let's hop over to at routing module TS. As you can see right here, let me make this much bigger. We have a special type of route called a lazy loaded route. And we just got to add one thing. Okay, so on line ten here's what your path should look like. An app routing module TS here. Okay, there you go. That's what that should look like. Okay, great. So now if I type Chicago location details works, which is great. Okay, Laurie, thank you so much. Thanks for hanging out. Enjoy your next workshop. I know, folks, if you have another workshop, don't worry, I will post all of this stuff on GitHub. I'll give you all the links to everything. So just in case you want the links, let me just drop all the links for the resources right now. I'll drop all the links for the resources for this workshop. So this is going to be with the completed workshop, all the links to the files and everything to get to the final version that we saw in the application in the beginning. So with three minutes left, let's just work toward that and then you folks could jump into the next one. I know people are going to the next one, but let me just work towards the completion here. Now we go into our details component and I'm going to give you the details component. So here's what you do. So I'm going to go into my app Details. Here is the we're going to put the HTML in there first. That's going to give you some errors, but we're going to fix that. We're definitely going to fix that error. Okay. So here's this. Okay. Thank you so much. Thank you so much. I'm so glad you had a good time. Thank you for coming, Ashley. I wish I could say your name better. I'm so sorry, but thank you for coming as well. All right, so let's fix this last part with the details. And at least you'll have a functional details component, which would be really helpful. All right, so I'm going to give you a details component. It's going to get truncated, I bet. Yeah, it sure is. But the details component is in that link I sent you already. So you have that details component. So I sent you the link with that code in there where it says the example code. You're still going to get one more error here. Okay. And so here's how I'm going to fix that error. I just got to create a service because at the end, what we're going to do is refactor our code to make the data extracted into a servers. Right. Versus having it hard coded in that one file. So I'm going to do ng. G. S for service. I think I call this one location service. Let me get the right command so we don't lose time here and just do location. Now that I do that, that fixes that part. It's in the GitHub. Brent. Oh, friends, we're right out of time here. Oh, man, I was having too much fun and we ran out of time again. All right, so here's what's going to happen. Just as my friends with you for last second. This is going to get converted into a longer video on the Anglo YouTube channel as well. So I'm going to walk through this step by step again on the Angular YouTube channel. So definitely check us out there. I sent you the links and it's going to be for Chrome Developer Summit, so you can get it there. I'm also going to convert it to a longer detailed video on Angular channel. The code was linked in the chat. Let me paste that again for you, friends. Okay. I know you have to roll out. I want to paste the code again. And I hope that you've enjoyed this time together. I have had a blast. You all are phenomenal. And look for the finished project. If you follow me on Twitter, you can find me. At Mark Texan on Twitter. I put my Twitter handle up. So you can find me. If you need me. Alright? That's how you can find me. Thank you so much for your time.