Modern Web Apps With Angular

4.1 Designing the Settings Panel

Starting in this lesson, we're gonna focus on implementing our settings because even though this is a fairly simple application, we still want to be able to add and remove feeds from our feed list. And we can implement our settings in a variety of different ways but for this course, we're just gonna keep things fairly simple. And just use another drawer here because we can have a starting drawer, which we already have with our feeds list and we can have an ending drawer, which will be our settings. And we'll set it so that it overlays everything else and expands the entire width so that we can focus on our settings. So let's start in our app component template because that is the logical place, that's where we're gonna have our settings icon and we're gonna space everything by using Flexbox, we're gonna use justify content and set the space between. So that kinda means that if we want to keep the list icon next to our application title then they need to be inside of a container of some kind. So we'll create a div element to wrap around those things and then we can have our icon for the settings. So let's just copy what we have for the list and let's change the icon itself to settings. And that will give us a gear icon in the toolbar on the right hand side of the screen right there. And of course, this is still wired up to toggle our feed list but we will change that right now. Well, not right now, we still need to set up our second drawer here. So all we really need to do is just copy what we have for the feed list and then make a few changes. Like for example, let's change the ID so that we can refer to this inside of our TypeScript code, let's change the class so that it is gonna use that w100 so that it stretches across the entire width of the screen. And we also need to set the position because if we don't, it's gonna imply that it is a starting position drawer and we already have one of those and that would cause an error. So we will set the position to end, we will get rid of the contents and if we look at the browser, that's what we should see because right now that drawer is open and it is stretching across the entire screen. So, okay, that works well. And let's open up the code for this component and we will make it available using the view child decorator. In this case we want to search for the settings items so that we can programmatically access that with our settings property. And then we will simply have toggle settings, for the lack of a better name and we will essentially do the same thing that we did for the toggle feeds in that we will toggle our settings. So that's back in our app components we can call that new toggle settings method, and that should work. So whenever this reloads, did it already do? It looks like it already did, so, if we click on the gear there we go we are toggling our settings, so that's working just fine. So now I want to have a component that we can put all of our settings into kinda like what we did with the feed list. And let's call this component feed settings. I mean things can start to become confusing if we begin everything with feed, but I don't really think of a better name right now. So let's go ahead and generate that component, we'll simply call it feed settings and the first thing that I want to do is change it's a selector. So once it finally pops up here, which there we go, let's open up our TypeScript file. And let's get rid of app dash so that we have feed settings and we can use that inside of our panel container. So let's open that back up, I closed that prematurely and we will simply have feed settings. Now as far as the template is concerned we essentially need two things, we need to be able to add a feed and then we need to be able to delete any fields that we select. So there's really two parts to this template and I don't want this to spread across the entire screen because that just gets kinda weird. So let's do this, let's create a class that will just call settings container for the lack of a better term. And let's open up our CSS so that we can define that class and we will set the width to 50% and we will also center this, so we will just use margin zero auto and yeah, that should work. So from here on out we'll just put everything inside of this container, so we'll start with an H1 element so that we can say that, this is the settings just so that it's clear as to what we are in. Okay, that looks good. All right so we have our settings, the next thing we need is the area for adding a feed and we can do that with just normal form fields. Or we could use the material form field and let's set the appearance to standard, and let's also give this a label because every field kind of needs a label. So we'll use material label and this will just be the Feed URL. In a real application we might wanna be able to customize the names and things like that but for our purposes we'll just stick with the URL. And then we will have an input element that is gonna be of type text, and we also need to specify that this is a mat input for material input, and that should be fine as far as that is concerned but we do need a button for submitting that action. So let's have a button element, we'll apply the material flat button class and set the color equal to primary and as far as the text is concerned, we'll just have ad feed. Eventually we'll come in and add the click event handler and all of that stuff and we could say that this should stretch all the way across but this is gonna be okay, so we have that. Let's throw in a divider, we'll use the material divider component because then we want a completely different section. Because here we are gonna need to display all of our feeds and we could use the mat selection list just like we did in the feed list. In fact, we could go to the feed list and just copy that so that we don't have to type all of that out. And this is going to be a multiple select so that we can select multiple fields so that we can delete as many feeds as we want at a time. Now, of course, this means that we are gonna need access to our feeds and we can accomplish that in many different ways but I think what we're gonna need to do is modify our service. So that our application becomes aware of the service provides a single instance to all of the components, so that we can maintain some kind of state there. But before we get into that, let's just go ahead and finish the template. So we will have our list for our feeds, so then we'll just need a button so that we can submit the request for deleting anything that we've selected. Once again, this will be using the material flat button. Let's set the color to warn because this is a delete action with the user needs to be aware that this is a destructive thing and then we will say Remove Selected Feeds. Now of course the ngFoz ain't gonna work, so let's comment out all of the options so that we will just have the mat select. Did I include that there? No, I did not. So [LAUGH] let's go back, let's copy that entire component so that we can paste that in. We will comment out the option and we'll set the multiple just to true, that true is default anyway. So without seeing our feeds here, it's a little jumbled together we'll need to fine tune some of the styling here. But that can come later, I like to focus on functionality. So that In the next lesson, we will focus on our service so that it will become more than just a service but also a state machine