In this lesson we'll see how to implement a lot more Bartone are in the Indian page of our application
so that users can get as many questions as they want to.
As you probably remember one of the greatest features about page number of pages nation in January's
framework is that the rest api also sends these next parameter so that client applications can easily
get the next page of results as soon as they need to.
Therefore we can also use these next parameter to implement our load more.
BUTTON HERE I AM west of your code.
This is their home dot view component where we are going to implement these load more bottom and first
of all in data let's define it next in as new low end loading questions as false.
Now here in the get the questions method first of all before using the API set of his function let's
set these dot loading questions to true.
And considering that as we've seen that the next parameter is in fact part of the response sent back
by the rest api yet we are pushing data daughter results.
Therefore here below we can check if data dot Nextel.
So basically we are checking if next is not new low.
And in that case we want to reassign these data next.
So this not an exit equals data not the next.
Otherwise if data dot next is in fact new alert we also need to reassign these data next time as normal.
And this is useful because if a data dot next is not NOLA we are setting these though the next two data
dot the next there so that appear we can reassign the endpoint.
So if these dot Nextel and point equals these not the next.
So when they get questions Matt or this called the first time by the created life cycle lookup how do
we check if we also have another page of results.
And if we do we set these dots next.
Therefore the next to define the year in data so that then we can use a lot more about on to call the
get questions method once again.
In this time the method will find that these dot the next is defined and therefore that's the value
that has to be used as an endpoint.
So let's implement the load more model bottom.
So right after the V4 and directive I'm going to define another diva class and y for.
So I'm adding a bit of margin and yet I'm going to use a paragraph with V.
Show is loading or rather loading questions.
And yeah we can simply add loading then below.
Let's define a button with V show on next up on the get questions.
We can also add a class so class matter button assembler bottom outline success and yet loads more one
thing that we also need to do is to set back these dot loading questions to force right after the questions
have been pushed so these questions force so going back to Chrome.
Let's go back to the one page at a moment of course we have no load more bottom.
And that's because we only have four questions.
So let's add one more.
We can ask a very common question something like what is the best programming language to learn as a
beginner publish.
So we have a new question and if we go back to home we now see that we also have loads more about on
so let's click it and then your question is added instantly.
Let's also add a bit of margin are on top of so here contain the margin top to much better.
And let us also have a look at what's going on using new dev tools
so we have our root application output nav bar component home.
And if we click on home you see the two have loading questions for us next.
At the moment is normal.
And then we have our questions today.
So let's make another get request for the on page and let us inspect them once again.
So now as you can see in next we have the second page in point loading questions is false and we have
four objects in the question sorry.
Let's collect a lot more bottom.
And as you can see everything changed accordingly.
And now the 28 there is also one more feature that we need to test that we haven't tested in the previous
lesson and that's trying to submit an empty question so publish.
And let's also try to send a question longer than to other any 40 characters like this.
Lord I meet some texter there but if he works as expected.