 All right, so what is Angular? So Angular is a web framework for building what we like to call scalable web apps. And 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 come built in, you will 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'd like to think that this thing scales. OK. 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. 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 it open source and just continue to build out features after this. Because you'll have the code to be able to do that. 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 toward the end. But I don't want to focus on the CSS that makes it look like this. When 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 OK. 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. 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. 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, the pain of stepping on a Lego, so by itself is 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? You want to check the chat? OK, sounds good. OK, all right, we'll keep going. All right, so what are components made out of in Angular? I'm so glad that you asked. 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've seen 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. So Typescript is a part of Angular. And we think that it helps you to build better applications up front. OK, 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 SAS, which is a pre-processor 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, OK, I want to use that, you can use that today. Geo, I totally agree. And Daniel, so let me take a break for a second. It says, I thought Typescript was a JavaScript compiler. Yes, OK. 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 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. Now, we're just going to start building. So I'm going to go to a terminal. Let me just make this nice and basic 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 photo for today. I'm going to put this back at the top. OK, Ken, 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, let me just, I want to make it really big here. OK, can I get a thumbs up that people can see this? If you've got the camera on, give me a thumbs up. OK, 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 Angular support SCSS out of the box? Yes, it totally does. And we're going to see that right now. Great question. It totally does support SCSS out of the box. So you don't have to add anything extra to make that happen. Great, great, great. Great, 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 a 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 command not found or something else, that means you missed something. OK, it means you missed something. All right, so now let's build our application. So here's what we're going to type. NG new airhouse to hyphen dash dash routing. OK, now I want to break this down. So NG is our tool that you installed that will allow you to create Angular after interacting 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, dash dash 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. OK, that's what that router's going to do. Let's go to different pages in our application. OK, go ahead and hit Enter. Just going to take a minute for some of you folks, because it's going to download stuff. But right here, the first question it's asking is which style sheet format would you like to use? So going back to Sergey's question, so you can choose CSS, SCSS, or some other preprocessor. I'm going to go with CSS, but if you want to use SCSS, you can do that. OK, you can do that. So go ahead and hit Enter on CSS. And now it's creating our application. Oh, I got to remember to 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, 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're like, yes, we think this is great. And we're just going to say NG to represent Angular 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. So when everything is done successfully, here, let me do something here. OK, so if we do an LS, all right, you should have this Fairhouse. This SS folder was mine. I put that there already. But you should have a Fairhouse application. OK. 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, yeah. So 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 anything specific, though. OK, I have AngularCuff locally. And when I created the app, I was asked about choosing SS. And so it looks like a new feature. Yeah, so, sorry, if you're on Angular 12, that's the previous version. You, yeah, we're on Angular 13. So you should be able to work on Angular 12, but I'm using Angular v13. Yeah. OK, can I explain why we have the routing flag? Yes, Merck. 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. 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. So be prepared for that. So why did I put in the routing, dash, dash, routing? I wish you could see I was pointing to. OK, here we go. The dash, dash, routing, why did I add that? What that allowed me to do was tell Angular that when you create a new application, I want routing enabled. I want routing enabled. Good question. Let me check the Q&A as well. OK, here you go. I will save that question for the end, since 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 other commands like routing, like add, after the name and the web app? Yes, so here's a great thing to check out. We have, 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. All right, so with that being said, let's actually run our Angular 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 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. I'll give you a second to do that. And if I'm going too fast, let me know. Let me know. Let me know. I'm going to, you know, we got time. We have time to be together today, so it's going to be great. OK, so who asked me that question? I think it was Darsh who wanted to know. Or wait, who asked? It was Darsh, OK. Yes, you can do that. Yeah, so yeah, you folks at home who don't have to have a specific setup 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 setup so that way we can keep this party clean. All right, awesome. So now that I have my Visual Studio Code, we 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. All right, so when your Visual Studio Code opened, open up your terminal, and then do this, ng serve. Is that viewable? Is that too tiny? Let me know if it gets too small there, OK? Let me know. OK, great. Thank you, Beesendi. I appreciate that. Darsh, that sounds like a system configuration because we have a get. So get is a system configuration. 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. I think that's a get issue. OK, 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, OK? When it adds to 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 to what your application performs, OK? All right, so this is going to start a development server right out of the box. So remember what 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 bundle 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 localhost4200, and that's where your application is going to be. So let's do that. If we go to localhost4200, let's go look at that right out of the box, working Angular application. OK, friends, well, that's been it. Thank you for coming to our workshop. We built your first Angular app, and now we can, just kidding. I know there's more to the story. Laurie, good question. Yeah, 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. Like, we optimize this quite a bit. This is just for development. But good question. Great, great question here. OK, awesome. Now, this is just a default application. We can go in, and we're going to leave this running, OK? So you leave your development server running. So let's go in and actually make some changes. Now, if you go to, so I'm back in my project, and 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 on to source, OK? And then I'm going to go into app.component.html. So I'm an app.component.html, just to give you folks some idea. And 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, OK? There you go. All right, cool. And then, all right, and there you go, ng-serve. Awesome. All right, let's keep this thing going. All right, so I want to close this side one so we can see. So we have a lot of, like, default styles. If you scroll all the way to the bottom of this, there's only one thing I want you to keep. Only one thing I want you to keep is line 501. Everything else, you see where it says content above is just a placeholder and can't be replaced? Get to the end of this file and then delete everything above 501, 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 my emoji's working anymore. OK, cool. All right, so now we got a hello world. We save it. And this is what should happen on your application, OK? You see, because this thing has live reload, or it's not really, it's a reload, not like a, yeah, it's just going to refresh your page with pull. 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. So right, so it's a simple live server. Yep, 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-serf for the live server. Yep, that's correct. All right, let's start stubbing out our application. So what I'm going to type, so we're going to do like a section. And I'm going to paste, 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. I lied, 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. One second, friends. I'm looking for my other example of the code. Give me one second, friends. I'm just pulling up my, all the stuff that I have prepared for you. Give me one 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'll be fine without it. It just will make your life a little bit easier if we had it. One second here. So here's what we want to do first. Just getting started out here. We're actually going to, 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. So to create that, I'm going to do a header. I'm going to do an H1. And side to the H1, I'm going 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.component.html. There you go. Cool. So we're all an app.component.html. So all you should have right now, if everything is working the way you want it to, is your Fairhouse text. If you save that, just say Fairhouse next, we're going to add, we're going to wrap line five in the main, this is the main section. Now I'm going 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 parent 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 bit container app, right? This is like a bit container component. And in 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. Right, friends? If you have more questions about that. So similar to a div that contains the root, yes, similar. Yes, 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? If people use assistive technology, so 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 header, but this next part, this is like, what would you call this? In the chat, what would you call this? If you were designing a web app and you're trying to figure out, well, what is this part here where it's like the main kind of like text, like the landing page, like 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 gonna land like the home page. So this is like our home page that we're making right here that I'm outlining with my magic pointer here. Okay, so right, or hero section. So you have some options here. Okay, so now here's what we're gonna 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 gonna 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 gonna use ng generate component. We'll say home, home, okay? So I wanna let you folks be able to see that. So that's the command I want you to type. And I'm gonna break this down what we're doing. So ng generate, 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 gonna add into our bigger production, and then the name of the component. So go ahead and type that in. I'm gonna put this in the chat as well in case people need some more time. Okay, cool. So we got home. All right, now it's told 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 a 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, NGC home. But that doesn't mean anything if you don't know what you're doing, right? So I wanna make sure that's there. Okay, so here's what we're gonna 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 gonna update our route. So I'm gonna go back into my application. And what you'll see is app-routing.module. Okay, that's the file I want you to open. And friends at home who are a little bit more experienced and who have some experience with some of this stuff, if you have cool shortcuts that you wanna like leave an attack for the other workshop participants, that will 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 routes. Now I know in other frameworks, there's a different style we created in GSX and all that kind of stuff, but here we do it in our app-routing-module.ts. We just created a home component, but we need to tell Angular that when the main page loads, that's a component we want to see. So here's what we do. We create an object literal, oh, just an 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 gonna be our default path, meaning whenever someone goes to local host 4200, we want them to see this path. So we do empty string, and then from here, we'll say components. Well, which component do we wanna go through? Someone in the chat tell me, which component do we want to go to when you get to the home path? Type it in chat for me. I like that energy. Lulana, 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 gonna autocomplete this, if I hit enter, and now that's done. We have our route created. And now do we have our route created? We have our component. Now this will paste very poorly, but I will paste it anyway. Oh, 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 home works. So that means everything's linked up. So our route is done. What questions do we 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 homepage. And then I'll also, I mean, the app component. Okay, hold on, let me do this. HTML page. This is what I had in there. Okay, so, all right, so make sure. So, okay, let me ask you three questions at a time. Okay, so first, vCindy, I just pasted my content into the chat from this page, just in case you needed it. Carlos asks, 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. Yep, yep. And so, because, you know, you could have called this landing, you could have called it main page. You know, that's gonna 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. 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, Sue? Is that what the question is? Because if that's it, this is what's called, this is camel case, but we're just, but this was created for you. So by default, the convention is to do like, for components, we do capital for the each first letter of each word, right? In components. And then when you do in 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. It should do it. And also make sure that you've imported home from the right location. Okay, make sure your import is correct. Okay. All right, all right, all right. Okay, let's see, let's see. Brent, I guess home component is part of the new app template. Yes. So that name, home.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, then the type of thing it is, like a component, and then the file extension. Okay. I, Sergey, I wish I want to talk to the team and say, please put in code support. Okay. How to decide when we 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, Sue, I'm so glad you figured it out. Okay, sounds good. You need to import good. That sounds good. How was it imported at C 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 component 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 gonna go to home.component.html. So go ahead and go into that file. Home.component.html. Home.component.html. Okay, so that's where we are. Okay, I'll be Cindy. I'm so sorry, I didn't see that. Is that still working for you? Oh, you stopped ng-serve. Yeah, so you gotta restart it. Good question. See, thank you for helping, friends. That is so phenomenal. You know what, I have something else for you. Ba-ba! That's for all of you for helping each other. You see that? So I'll hit you with some clean dabs. You know, dad dabs. What? Okay, let's get back to... People are just gonna start leaving the 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 gonna do next. All right, so here's where our section is gonna come in. So we're gonna do a section. All right, and I'm gonna do a div here. And this structure will make sense when we go to style. All right, and then I wanna put the text, you know, transitional housing can be hard. We're here to help. Okay, I'm gonna keep that all on the screen. All right, so you can get that working. All right, and I'll put this in the chat for you. So no more, I'm not gonna leave you hanging, I promise. I will not leave you hanging. All right, and so this is at home.component.html. All right, I won't leave you hanging for answer promise. I'll put this in the chat once we get a little bit more of the text typed in there. So now that we have that part working, we needed these in order 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? Oh, that's just because semantic HTML, meaning like it should mean something. Section and div 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 soapbox, there are over two 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. Let's go. That is so correct, Sue. That is so correct. So if we, 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 gonna 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 add the styles, but not after we ship, before we ship, but after that stuff. Okay, so now that we have our text there, let's add the rest of this. So we gotta get our inputs and our buttons. Okay, so now I'm gonna add another div here and then we're gonna add a few things. We're gonna do a label and we're gonna fill in that label and then we're gonna do an input and we're gonna do a button. So I'm just gonna let you folks start typing those things so you can know what's coming next. Our label is for, we're gonna say city, right? So this is gonna be the label text for that city and we'll do search by city and city doesn't have to be capital. We do lowercase here, okay? Which means that we'll say the type for here, this is a text type and then we'll do id equal city. And then for our button, we'll do search. So okay, now I don't wanna spend too much time teaching the HTML here, but I wanna 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 gonna speed up just a tiny bit so we can make sure we finish within our timeframe because I do wanna make sure that 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 gonna give you all the great support for our templates here. Perfect, that's really gonna help. Brent, that's really gonna 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, yeah, oh, 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 gonna use. So we use this funny syntax called banana in a box, throw 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 gonna notice something. It's not happy, and we're gonna tell you why, okay? And we've set this equal to blank for now. Okay, it's not happy, we have to make a change here. See, my whole thing is broken. It's not happy and we're gonna make a change. I'm gonna 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 gonna 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 wanna 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 it's 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. I want you to do import, meaning like bring in the libraries for this thing. I want you to import forms.module, okay? Import forms.module.from, and we'll quote at Angular last forms. I'm gonna give you this right now just to keep everybody on track with us. I'll give it to you. Yes, Luana, you can add routing later, but the reason I didn't wanna add it later is because I didn't wanna confuse you at the beginning. I wanted to give you a smooth introduction. So when I did the dash dash routing in the beginning it just did automatically the manual steps that we're doing now. So yes, you can always add it later. And so now that you're more comfortable, this isn't as foreign, but imagine starting out having to add routing. You're like, mm, 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 application comes back. I know what you may be thinking. You may say, oh, Mark, I don't know what happened. Let's see, let me put this in here. So that's my ng-module just in case you need it. Is there a dash dash forms? Oh, I don't know offhand, but I wanna 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 wanna probably implement it. Yeah, I will probably propose that, but like, hey, let's add this by default. That's such a great idea. Okay, and I will give you credit, Sue. So tag me on Twitter to remind me so that 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 end with dot component, dot module? Yeah, it's because the dot component means that it is a component, dot 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 end with different types. That's really good though. Okay, so now that we have that going, I'm gonna jump back to our home component, dot HTML. And we're gonna fix this now because it's saying, well, you gotta put something here. All right, Sue Donaldson, peace out. Hope you had a good time. And all the friends, thank you so much for coming so far, I appreciate you. So what we're gonna do here, we do city. Now city doesn't exist yet, right? So in the ng module here, let me put that in the chat here, keeping people saw going. Okay, very cool. So city doesn't exist yet. So it's given 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, so our home component. Yes, so the home component, nice job friends. Right, we gotta 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 gonna do here is, we're just gonna make, I'm gonna go under the constructor right here. So I'm on like line 12, type city and set it equal to empty string. So now this is our, this is gonna be your first experience with the components, right? So that's gonna be really cool. Oh, I gotta save this, okay? Make sure you save your files or else it'll stay broken. Okay, so this is your first experience with the logic. I'm gonna give you a quick rundown of what we see here at the top. This is called a, 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 it says, oh, it's a component. So now we know this is a component. And then it tells us what the name of the kind of reference to component. It also tells us what the URL to the template is. So this is what it's gonna 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 life cycle method, which I'll talk about later. We will use that better. And then one line 12, we're gonna add city. Lori, 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 12, set equal to empty string. We're gonna keep it going here. Yeah, so I want data to go back and forth. I'm gonna show you why that's important right now. I'm gonna show you why that's important. So the banana in the box means two-way binding, meaning that I can send data in and get data out. And how that becomes helpful is on line eight, I wanna really 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. So now a property from our TypeScript class can go in here, an expression, meaning like 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 gonna do. I didn't save, gotta save. But now if I type hi, Laura, you see now what I'm typing in, Angela knows about it. You see that? And without the banana in 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 gonna type click. I wanna wrap this in parentheses again. So this says that it's the event. Okay, so just wrap it in parentheses and I'm gonna set it equal to something. Now, what do we set it equal to? Well, we're gonna set it equal to what we want to happen. What do we want to happen whenever we go to this page? I mean, so whenever we click this button, what we want to happen is search housing. We wanted 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 gonna put this in a chat for you friends. Okay, very, very good. Very, very good. All right. I still have the same error even though I changed this high script. Okay, I will paste my code in a second. At us, I will paste my code in one second. So is there a property in Angular that performs this function? No, we're gonna implement it ourselves. So that's what we're gonna put. So let's go back into our component because we're gonna create this function. Make sure you put the parentheses around click here. Okay, now after nginit, that looks correct. Okay, so I'm gonna start on this search housing function. Okay, so we're gonna 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 gonna add a little bit of code. I'm gonna 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 and you're like template for your function. First thing I want you to add, let's add something called search results because they're gonna do a search and we want the results to show up here. Okay, here's the second thing I want you to add. I'm gonna ask you to call it housing list. We're gonna set that equal to an MP array right now. All right, but we need to add something else. So right now these are just arrays in our application. So they're 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 gonna create what's called an interface. And if you are a Java programmer, it's the same thing, but TypeScript uses it a little bit different. Okay, so here's what we're gonna do. I'm gonna give you a command. Go back to your command line. Don't stop your server though. Just opened up a new window, a new terminal here. And here's what I'm gonna type in. NG, G for generate, I for interface, and we're gonna say location. We're gonna say location because think about the data that we wanna be searching. We wanna search housing locations, right? We wanna search housing locations. So to get there, I wanna be able to give it some information, some data. I wanna be able to give it something, some shape, okay? Now, I put it in the chat just in case you needed to know. So you're gonna run that command. And the next thing I'm gonna do inside my app here, I'm gonna go to location.ts, okay? So we've 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, or housing at least, a housing location, there's some information we probably need it 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? Okay, let me see what you friends are saying in the chat. Yeah, okay, good, good. Josh, I like that. Okay, then 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 gonna put in some of the basics ones that I want it to have. And then if you wanna add more later, you can, available units, exactly. So if you were to expand this application, you wanna add a lot of these things. These are all great pieces of data. But you see how helpful that is? Oh, here I'm gonna put the whole interface that I just typed in. But you see how helpful it is now when you're thinking about it versus a regular JavaScript, you have no way to enforce that a location should have a name or description in a city, right? 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 gonna 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. Very cool. So here's what we're gonna change. We're gonna make a small change to our code and I'm gonna send you this. So I'm gonna send you this, all right? So we're gonna say the type for this is location and it's gonna try to import it for me. So I gotta be careful, make sure it's the right location so that, see, 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 you can tell by the import. So it'll be from, I'll send you this whole file in one second. But if that doesn't work properly, we'll be able to fix it with you. Okay, that's not never because just relax TypeScript, relax. Okay, so let's see here. Why are you complaining? Never is missing the following. No, it's not. Oh, okay. That's why. That's the type of location array. Okay, save that. All right, so this is, I'm not gonna walk you through all the logic of how we build out our search. I'm gonna copy and paste it for you, but it's gonna be great though. Okay. How far can you get in Anglic 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. Okay, 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 location, taking empty arrays? They're empty right now, but we're gonna add all the pieces. Okay, so we're gonna, in this last section, is now we're gonna fill in all the gaps to make all the stuff work. Okay, so we're gonna be right where you want. So now we have, so we're gonna throw some data in the search results. I'm gonna give you some data right now. I'm gonna paste some data for you that you can just, that you can paste in, okay? I got you, I got you, I got you. Now, I'm gonna give you generic data now. So in my housing list, I'm gonna go inside there, I'm gonna paste in a generic data, you know, location one, location two. Of course, you can get more creative here. I'm gonna 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 gotta speed up just a little bit. We have a little bit too much fun and there's still more to learn. Okay. Okay, so let me, here, I'm gonna paste this so people can catch up. So that should be your housing list. Okay, so let me ask some question. Yeah, that import. Thank you for pasting 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, that's a very astute point. Is the interface acting like an object template? Yes, the language that we use, we say it's to shape the data. So in TypeScript, the location has its properties that we decided were gonna 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 is 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 gonna just give you that text right now for the search. I'm just gonna 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 gonna give you this. So what we're gonna look at is that, and I'll walk you through it. I'm gonna paste it in here for now. Let's see here and da, da, da, da, da, da. 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, that's what 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, I'm gonna 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 gotta keep this code nice and big so everybody can see. Okay, I think we can kind of see this. Maybe not actually, that's quite a, this is a long line. Okay, 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 wanna search for an empty city. So if this.city is empty, like an empty string, if it's not an empty string, we're gonna run this code. And we gotta use the keyword this here for our TypeScript, we're gonna use the keyword this. I know this is a whole thing. I have actual video explaining this, 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. Yeah, this, the search results. So these are the search results that were displayed to the user. We'll say this, that housing list, right? Which is where we have our mock data. We're gonna filter it down. We're gonna filter it, come on, tips, don't hurt. Okay, we're gonna filter it if the location.city is the lowercase version matches this.city lowercase version. Now the reason that we 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 rather class functions binded? It's the class functions. That's why, Lori, it's because it's a part of a class. Yeah, good question. Lori 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 wanna reference your properties, you gotta use this when you're rocking out an Angular. Okay, and then I think I just 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 gonna 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 gonna just give you this section. And this is just a plight of teaching. You wanna explain every single thing. I'm just gonna give you this and we'll walk through it because it's also gonna include, I wanna walk through this, but I'm still gonna 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. I said the UL. And so I have this business thing you really, I want you to key in on here. NG4 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 wanna 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 I say, you know, so declare the location variable. So let location of the search results. So for each location of our search results, I wanna output a p tag and I'll get to this link later. But first just wanna make sure that I get the p tag out there. And what I really wanna show you is this, I'm using string interpolation here. And we got location.name, okay. We got location.city. So remember I showed you before how to like show your properties in your template with the double curlies. That's what that's doing for me. Okay, that's what that's doing for me. Now this should work for 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 can, I'm gonna paste you everything in a second. Okay, go ahead and see if you might have a typo. So make sure here, I'm gonna paste everything up to this point for the 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, well, so 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. Oh, it's truncated. It doesn't like that I did that. Okay, I will fix that right now. I will fix that. I think that you can get that. I will fix that for you right now. Give me one second. Okay, somebody already fixed it. Perfect, perfect, perfect, perfect. Okay, it was just in case you needed it. All right, so now we gotta do a little bit more coding and then we're gonna be home free friends. All right, so we have all this code. Okay, thank you for pasting that for me. Whoever pasted that, thank you for that. That's a really, really helpful. Laurie, as DJ Khaled would say, you the best. All right, we need a details component, friends. That's what we need now because I wanna go to a place where I can see the details of the application. Yes, Claudio, 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 one. Home.component.html, home.component.ts. Okay, we roll. Okay, so let me, okay, so that should work. Okay, I think this works. Maybe, or that, okay. All right, so now let's get our last component made because we gotta do two more things and then we're gonna be in the mix here. So first, we're gonna run this command and I wanna explain it as I type it. I'm gonna type it to you and then explain it to you. Okay, I'm gonna type that in the chat. You're gonna run this command. Okay, so what this is doing is nggforgenerate, but this time we wanna make a module for our new component. And we're gonna make a component called details, but we also wanna make a route at the same time, name the route details and where do we wanna 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 gonna make a route at the same time. Just gonna make a new component and a route at the same time, which is super helpful because we're gonna save a lot of time on this one. So now if you run this, okay, it doesn't work. If you run that one, let me see what I did wrong. Oh man, that's funny. That is funny. Why could there doesn't work? Let me debug this command with you. Yeah, no, I typed the wrong thing, I guess. Let me give you a, 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. 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. Yeah, Google Docs took my one dash command. I made two dash command and made it into a single dash and messed me up. Wow, Google, wait a minute, I have my back in the middle of my workshop. Unbelievable. I was just kidding, it's all good. Okay, what's, why are you complaining? What the heck? All right, now this is strange behavior. Let me just type it by hand because I know that it works for ng-g-m. All right, 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 get stuck in there. Let me see something. Okay, that was super weird because I didn't change anything, I just re-typed it. But that's okay, 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, we'll search here, I click on this, oh, whoa. Did I misspell details? Let me refresh for a second. Just in case my routes are not working. Hmm, oh, let's debug it to see if there's a problem. Oh, there's some errors, okay. Let me just debug my errors because I definitely typed something wrong. Okay, let me, so I'm in the console, I'm just gonna debug this just to see what's happening. So I'm gonna click, I get an error, there's not, oh, our route. Okay, so our route won't work. We gotta update our route. So let's hop over to app.routing.module.ts. And 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 10, here's what your path should look like. And app.routing.module.ts here, I wanna, 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, Lori, thank you so much. Thanks for hanging out. Yeah, 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 gonna be with a completed workshop. Here are all the links to the files, okay. And everything to get to the final version that we saw in the application, okay, 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 toward the completion here. Now we're going to our details component, and I'm gonna give you the details component. So here's what you do. So I'm gonna go into my app, details. Here is the, we're gonna put the HTML in there first. That's gonna give you some errors, but we're gonna fix that. We're definitely gonna 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 gonna give you your details component. Oh, this is gonna 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. So you're still gonna get one more error here, okay. And so here's how I'm gonna fix that error. I just gotta create a service, because at the end, what we're gonna do is refactor our code to make the data abstracted into a service, right, versus having it hard coded in that one file. So I'm gonna do nggs for service, and think I'll call this one location service. Let me get the right command so we don't lose time here. Yeah, just do location. Now that I do that, that fixes that part. Yeah, it's in the GitHub, Brent. All friends, we're right at a time here. Oh man, I was having too much fun and we ran out of time again. All right, so here's what's gonna happen, just as my friends with you for the last second. This is gonna get converted into a longer video on the Angular YouTube channel as well. So I'm gonna 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 gonna be for Chrome Developer Summit, so you can get it there. I'm also gonna 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 wanna 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 meet me. All right, that's how you can find me. Thank you so much for your time.