Okay so in the last video we put together our API using Python and that includes our full Q&A stack where we can begin asking questions and getting answers. So now what we're going to do is start working on the front end which is going to be in Angular. Now if you haven't used Angular before that's fine I'm really definitely not an expert so we can learn together and if you haven't installed Angular before or will use it or I assume if you don't use it you probably don't have it installed then I'm going to link right at the top of this video description to a article or like a guide I'll find one or if I can't find a good one I'll just write one describing exactly what you need to do in order to get to this point that you can see on the screen now which is the node.js command prompt and on Windows you can also run this from command from the command line or from your bash instance if you've installed everything properly and I think it's pretty much the same it's probably a lot easier on Linux or Mac.

So now that we're here I'm going to switch across into the directory that I want to create the front end application so I'm going to be using two different directories one for the back end one for the front end and we're going to navigate into the directory that we want to put our front end directory.

So it will be documents projects for me and then here I'm going to create a new directory called Aurelius front end. Now I'm not going to do that the usual way with make dir, instead what we're going to do is initialize our application which will also initialize our directory using the Angular CLI.

Now anything Angular CLI begins with NG which is just Angular. NG is sort of short for Angular. And what I want to do is create a new application I'm going to call it Aurelius front end and then we're gonna get a load of questions here I'm going to say yes to all of them and then when it asks what style sheet format would like to use we're going to be using material, Angular material here and if we want to later on modify the color theme with Angular material we really want to be using SCSS so we'll just start straight away with that and as well SCSS we can just write normal CSS and it will work as we as it normally would so there's really nothing to lose.

Okay and that's just going to print loads of stuff to the screen and hopefully tell us everything is good. Okay so that's all ready so what I'm going to do now is head over to VS Code and open this directory. Okay so now we're in VS Code, opened the new Aurelius front-end directory and first thing we want to do is open our terminal and all I want to do is ng serve to make sure that everything is set up correctly so this will initialize an instance of our app which we can then open up in our browser.

It might take a little bit of time the first first go it should be pretty quick. Okay it's cool now we go to our browser localhost 4200 and we should get this yep so this is like the initial screen that you get with any Angular app so that just means that well it's worked so that's that's good and what we're gonna do is we're gonna take this down here to start initializing different parts of our app later on we're not actually going to do that right now because the first thing I want to do is actually just get it set up and get Angular Material set up because Angular Material is going to be essentially our design of the entire app which is really easy to use but it can be really annoying if you don't set up first thing.

So I'm gonna stop that and I'm going to add Angular Material to our application to do that we do ng add Angular Material and this will install Angular Material in our app and we we don't really have to do anything the only thing we actually have to do here so we have to say which theme we'd like to use I'm just gonna go indigo pink so these are the default colors that you can use and I think we're probably gonna change these later on anyway but let's see for now at least we're gonna stick with indigo pink here we say yes yes and let install that's installed now so if we head over to src app and app module TS we should be able to see everything in here so there are a couple of things that we installed just now like extra things and that was the browser animations and that's what you see here okay now when we're using Angular Material we tend to add another module so Angular has all these different modules and this is like the almost like a control panel for where we import things so we import different packages into this script and then that allows us to use it across all of our other web page files and what we can do is create two of these scripts so that we have two versions of it one of them is just going to be used for our material Angular Material imports which is anything to do with how our app looks and essentially works when we're clicking around the reason we do that is because it can just get really messy if you have everything in one so to do that we all we do is add material module TS and because this is like a duplicate of this package all I'll do is take that code and just modify it a little bit so in here we basically want to get rid of all of these imports except for an ng-module and we can also get rid of declarations so we just have imports and we also want to add an exports array as well so this is like whenever we import a certain module from material Angular Material so things like buttons menus all these sort of things we're going to import it top and I'm going to show you how in just a moment and then we're going to add it to the imports array here and also the exports array and that will allow us to use it in the rest of our app now the only thing we need to change here is modify this to be material module and let's go ahead and import our first component which is going to be mat button module and we're importing that from @angular material so this is the package that we installed before and kite is finding the the right directory there so it's material button okay we'll copy this and we remove these because we're not importing these in this file just add it to mat button module and also the exports okay so now we can use this module in the rest of our code and this is a material button so it's like a fancy looking button so now let's exit that and go over to our app module TS so this is like the mothership of all of our code everything goes through this including that other module even though it's like a duplicate so to include that we do what we've done here so you see we have this browser animations module we're gonna do is that same thing we have it there we also have it in this imports array so to import that module that we just made so if I have a look here we see that it's called material module so let's copy that send it over here because you see over here we're exporting it to the rest of the code so that means it can be read by this app module TS so import it and we do from and this will probably figure it out maybe maybe not material material module there okay so that is now imported that into this script and what we want to do is include it in the import array there now it's accessible by the rest of our code so that's I know it's quite a lot but that's material basically self and just so we can see that it's actually working let's just add that material button into the very front page of this app so the very front page of this app is app component HTML so you saw before we had that kind of fancy initial page or it gave us a few hints on what we should do next and that is everything that you see in here so we're going to just select all and delete this and all I want to add in here is a button and it's a material button so Mac burn like this and we're gonna put search okay now if we go back into our browser let's make sure it's I don't think it's running I think we have to restart yeah so ng serve again spin up the server if we head over so this should go in a moment and we'll just get a button in the top left okay so now we have our button and you see we get this kind of nice little we go over it gets highlighted and when we click it we have that nice ripple effect so that's our material button and I think that's it for this first video on the front end so we've initialized our front end and also included material or angler material in there as well now from now on it's I think we will probably just build how this front page looks a little bit to make it look kind of nice and then we won't go crazy by the way we'll just make it look bearable and then we'll add in the functionality so that we can search on here rather than through the API so it should be pretty cool I think so that's it for this video and I'll see you in the next one