1 00:00:00,150 --> 00:00:07,290 Nice work, and once we've got our list now, of course, it's time to work on abutments where we would 2 00:00:07,290 --> 00:00:12,120 want to have buttons for each category plus button for all. 3 00:00:12,420 --> 00:00:18,960 And then, of course, once we click on a button, then we display only the items of that match, that 4 00:00:18,960 --> 00:00:19,560 category. 5 00:00:19,710 --> 00:00:26,610 And then once we click on, of course, then we display all the items and we'll start with manual approach 6 00:00:27,030 --> 00:00:28,650 and then we'll see the downsides. 7 00:00:28,950 --> 00:00:36,420 And of course, eventually we'll switch to a dynamic approach where we iterate over the list and then 8 00:00:36,480 --> 00:00:39,020 automatically get all the categories. 9 00:00:39,030 --> 00:00:42,450 But we'll start simply by just doing that manually. 10 00:00:42,780 --> 00:00:46,730 Now, my first step is going to be creating a that function. 11 00:00:46,980 --> 00:00:55,050 So in the app component, I'm going to create a function by the name of filter items and this function 12 00:00:55,050 --> 00:00:56,680 is going to be looking for a string. 13 00:00:56,970 --> 00:01:05,490 Now I'll call this string category or Excel, and then inside of the function, I would want to iterate 14 00:01:05,490 --> 00:01:08,600 over the original list and that is important. 15 00:01:08,610 --> 00:01:15,570 I'm not talking about menu items, so we will use set menu items to change the list of items displayed. 16 00:01:15,580 --> 00:01:22,170 However, when we're looking for items that match that category, we always need to work with original 17 00:01:22,170 --> 00:01:24,870 list because that one won't change. 18 00:01:25,230 --> 00:01:27,630 And I'm going to start by setting up some kind of variable. 19 00:01:27,780 --> 00:01:33,580 Just be a bit more explicit where we go with new items, then we go with items. 20 00:01:33,600 --> 00:01:36,990 So again, the original list, because that won't change. 21 00:01:37,300 --> 00:01:38,570 Then we go with the filter. 22 00:01:38,820 --> 00:01:42,720 I need to come up with some kind of parameter name, which in my case is going to be item. 23 00:01:42,990 --> 00:01:49,950 And then I'm going to say if the item category properly matches to the string that I'm passing on, 24 00:01:50,220 --> 00:01:54,200 then of course a return item to my new items. 25 00:01:54,210 --> 00:01:54,530 All right. 26 00:01:54,990 --> 00:01:58,350 And then, like I said, we have set menu items. 27 00:01:58,620 --> 00:02:03,720 So I'm just going to use this and we're going to go with some menu items and new items. 28 00:02:04,200 --> 00:02:11,520 So once the app loads, then, of course, we use our whole list, we use the items and then we pass 29 00:02:11,520 --> 00:02:11,750 it in. 30 00:02:12,090 --> 00:02:15,900 So then the value of menu items is equal to my original. 31 00:02:17,190 --> 00:02:26,280 In filter items, I filter the original list and I only look for items whose property category matches 32 00:02:26,280 --> 00:02:27,870 to whatever I'm passing in. 33 00:02:28,320 --> 00:02:36,040 And once I have my function, then of course what I could do is just pass it down to eight categories 34 00:02:36,210 --> 00:02:37,790 since I would want to use it order. 35 00:02:38,190 --> 00:02:44,820 So I'll start here by setting up some kind of problem in my case is going to be exactly the same as 36 00:02:44,820 --> 00:02:45,440 the functional. 37 00:02:45,690 --> 00:02:52,860 So we're going to go with filter items which it and then of course we would need to navigate to the 38 00:02:52,860 --> 00:02:56,830 categories and deal with that function. 39 00:02:56,850 --> 00:03:03,030 Again, we are going to start with just the manual approach and then eventually we'll make this dynamic, 40 00:03:03,030 --> 00:03:07,440 because I would want you to see the downsides of the manual approach. 41 00:03:07,740 --> 00:03:16,410 So we're looking for a prop by the name of filter items, of course, and run inside of the categories 42 00:03:16,410 --> 00:03:17,280 in the return. 43 00:03:18,170 --> 00:03:24,260 I would want to add those buttons and of course, since this is a manual approach, I'll just add them 44 00:03:24,260 --> 00:03:24,800 manually. 45 00:03:24,920 --> 00:03:28,420 Eventually we'll iterate over the list, but not right now. 46 00:03:28,730 --> 00:03:37,040 So just so it looks a bit better, I'm going to go with B10 container over here and then inside of the 47 00:03:37,040 --> 00:03:40,720 container, let me just add a few buttons manually. 48 00:03:41,060 --> 00:03:42,430 So we're going to go with Button. 49 00:03:42,590 --> 00:03:50,990 I will add last name here and I'll say filter b10 and line on click. 50 00:03:51,410 --> 00:03:57,330 I would want to get the items that match the category of breakfast. 51 00:03:57,620 --> 00:04:01,910 Now if you would want to see what categories we have, of course you can just navigate the data. 52 00:04:02,210 --> 00:04:07,580 And then as you're looking at the items, notice you have a category for lunch of Category four shake 53 00:04:07,850 --> 00:04:08,990 and all that. 54 00:04:09,020 --> 00:04:13,910 So since we're going manual approach, I'm not going to add all of them, but just to showcase that 55 00:04:13,910 --> 00:04:17,060 my function works because this is exactly what I'm going to do. 56 00:04:17,330 --> 00:04:22,190 Where I have unclick that, I would want to have my inline function, of course. 57 00:04:23,360 --> 00:04:29,720 And then here, let's call filter items and then let's just set up that string, and like I said, I 58 00:04:29,720 --> 00:04:34,550 would want to start with breakfast, which sell online instead of the button. 59 00:04:34,560 --> 00:04:37,730 Let's also write what items were going to be getting. 60 00:04:38,040 --> 00:04:44,840 So once you say you should see the button and then once you click course, now we're displaying only 61 00:04:44,840 --> 00:04:50,390 the items whose property category is equal to a breakfast.