WEBVTT 00:02.350 --> 00:07.000 In this lesson we'll see how to implement a lot more Bartone are in the Indian page of our application 00:07.270 --> 00:10.800 so that users can get as many questions as they want to. 00:10.840 --> 00:16.060 As you probably remember one of the greatest features about page number of pages nation in January's 00:16.120 --> 00:24.790 framework is that the rest api also sends these next parameter so that client applications can easily 00:24.790 --> 00:28.810 get the next page of results as soon as they need to. 00:28.810 --> 00:33.160 Therefore we can also use these next parameter to implement our load more. 00:33.190 --> 00:36.780 BUTTON HERE I AM west of your code. 00:36.780 --> 00:42.660 This is their home dot view component where we are going to implement these load more bottom and first 00:42.660 --> 00:56.130 of all in data let's define it next in as new low end loading questions as false. 00:56.130 --> 01:02.690 Now here in the get the questions method first of all before using the API set of his function let's 01:02.700 --> 01:07.610 set these dot loading questions to true. 01:07.980 --> 01:13.950 And considering that as we've seen that the next parameter is in fact part of the response sent back 01:14.490 --> 01:19.110 by the rest api yet we are pushing data daughter results. 01:19.110 --> 01:24.130 Therefore here below we can check if data dot Nextel. 01:24.480 --> 01:27.660 So basically we are checking if next is not new low. 01:28.140 --> 01:33.000 And in that case we want to reassign these data next. 01:33.000 --> 01:38.750 So this not an exit equals data not the next. 01:38.760 --> 01:49.030 Otherwise if data dot next is in fact new alert we also need to reassign these data next time as normal. 01:49.140 --> 01:56.990 And this is useful because if a data dot next is not NOLA we are setting these though the next two data 01:57.070 --> 02:02.510 dot the next there so that appear we can reassign the endpoint. 02:02.520 --> 02:10.760 So if these dot Nextel and point equals these not the next. 02:10.800 --> 02:17.120 So when they get questions Matt or this called the first time by the created life cycle lookup how do 02:17.120 --> 02:20.640 we check if we also have another page of results. 02:20.640 --> 02:23.440 And if we do we set these dots next. 02:23.550 --> 02:30.390 Therefore the next to define the year in data so that then we can use a lot more about on to call the 02:30.390 --> 02:32.650 get questions method once again. 02:32.740 --> 02:38.790 In this time the method will find that these dot the next is defined and therefore that's the value 02:38.910 --> 02:41.240 that has to be used as an endpoint. 02:41.280 --> 02:43.280 So let's implement the load more model bottom. 02:43.890 --> 02:54.390 So right after the V4 and directive I'm going to define another diva class and y for. 02:54.440 --> 02:59.240 So I'm adding a bit of margin and yet I'm going to use a paragraph with V. 02:59.360 --> 03:04.980 Show is loading or rather loading questions. 03:05.150 --> 03:09.830 And yeah we can simply add loading then below. 03:09.980 --> 03:22.270 Let's define a button with V show on next up on the get questions. 03:22.960 --> 03:36.900 We can also add a class so class matter button assembler bottom outline success and yet loads more one 03:37.010 --> 03:44.120 thing that we also need to do is to set back these dot loading questions to force right after the questions 03:44.930 --> 03:52.310 have been pushed so these questions force so going back to Chrome. 03:52.570 --> 03:57.210 Let's go back to the one page at a moment of course we have no load more bottom. 03:57.250 --> 03:59.980 And that's because we only have four questions. 04:00.370 --> 04:02.470 So let's add one more. 04:02.470 --> 04:13.630 We can ask a very common question something like what is the best programming language to learn as a 04:13.630 --> 04:15.740 beginner publish. 04:16.090 --> 04:22.240 So we have a new question and if we go back to home we now see that we also have loads more about on 04:22.240 --> 04:26.060 so let's click it and then your question is added instantly. 04:26.110 --> 04:37.350 Let's also add a bit of margin are on top of so here contain the margin top to much better. 04:37.980 --> 04:42.090 And let us also have a look at what's going on using new dev tools 04:45.140 --> 04:49.780 so we have our root application output nav bar component home. 04:50.170 --> 04:54.680 And if we click on home you see the two have loading questions for us next. 04:54.680 --> 04:55.930 At the moment is normal. 04:56.060 --> 04:57.630 And then we have our questions today. 04:58.100 --> 05:03.860 So let's make another get request for the on page and let us inspect them once again. 05:03.860 --> 05:11.030 So now as you can see in next we have the second page in point loading questions is false and we have 05:11.060 --> 05:13.250 four objects in the question sorry. 05:13.610 --> 05:15.640 Let's collect a lot more bottom. 05:16.190 --> 05:18.710 And as you can see everything changed accordingly. 05:18.950 --> 05:24.380 And now the 28 there is also one more feature that we need to test that we haven't tested in the previous 05:24.530 --> 05:28.670 lesson and that's trying to submit an empty question so publish. 05:28.910 --> 05:33.880 And let's also try to send a question longer than to other any 40 characters like this. 05:33.890 --> 05:38.270 Lord I meet some texter there but if he works as expected.