In this lesson we're going to use the API service that we've just created to modify the home component
in order to get and show.
At least we have the questions in our database.
But before doing that let's clean up our code a little bit.
So I'm going to delete these code and as a consequence I'm also going to delete the L word dot view
component.
Let's also delete.
Example In that view and from inside the router dot sure yes file we need to delete also this path and
of course we also need to delete this import statement.
One more thing that we don't need is the public folder which contains an icon and the index dot HMO
file that is normally used by GSL.
So I'm just going to delete the folder altogether
let's have a look at the server so we see that we have an error here and that's because we are still
importing these components in the home component.
Let's also delete this line and this line and as you see now everything works perfectly.
And if you take a look at that application we see that we can move to about how the home is empty.
Well let's also delete the about component because in fact we do need it.
So first of all the router the G Yes I'm going to delete the input statement and the path
that I'm just going to delete about that view and also very important enough about the view we need
to actually delete or anyway modify this through the link.
So let's just point back to home just to keep the button alive and we can call this that question and
if you never look at it it's changed.
So in our own those view component first of all let's import API service so important API service from
the Common folder and then API that sort of is there is no need to declare the extension of the module.
There's no defined data.
So data which clearly is a function is going to return.
In this case the rate of questions.
So we have these empty array of questions that we can't populate.
Using a method.
So methods we can just call it get questions and yeah first of all let declared a variable let and find
equals API slash questions with his lesson at the end.
This is set in the point to get a list of questions.
Yeah we can now use API service on this endpoint.
No need to pass a method because by default is getcha.
Yeah we can do DNA and we are going to get some data right and we can push it to these questions using
the spread operator so data both results and in case you're wondering why my endpoint looks like these
without any age TTP domain name and so on.
The reason is that using.
That's part of data point it's populated automatically which is very very convenient.
So now we have our question Saturday.
We ever get questions mattered and of course we have our API set of his function.
So the question is how can we make it so that once the home component is requested.
Meaning once the home page is requested questions are loaded at the same time.
So basically how can we call the get questions method as soon as this component is requested.
And yes what is that.
We can do that using lifecycle looks.
We can read that each view is this goes through a series so initialization steps when it's created.
For example it needs to set up date observation compile the template mount the instance to the DOM and
update the DOM when data changes along the way.
It also runs functions called life cycle hooks which allows users to add our own code at specific stages.
For example the created will curve which is the one that you are now going to use it can be used to
rank code after an instance is created.
Considering that we are talking about view instances let's be clear components are reusable.
Viewing instances.
We have a name then we know that if your application consists of a root is this created with a new view
that is optionally organized into a tree of nested reusable components.
So yeah where the documentation suggests that each view easiness goes through a series of initialization
steps.
That's something that is valid for every component of the application and that's the reason why you
can access all these lifecycle looks for each component over application.
We're going to use the several lifecycle looks during this part of the course and I really suggest you
take a look at these life cycle diagram as the documentation suggests there is no need to understand
everything right now.
Maybe you can surely be a very useful reference while developing.
So let's see how we can use the created life cycle look.
It's actually pretty simple.
We can define it as a property of the options object and so inside of these we can just call these dot
get questions.
We can also console log the new value of questions.
We can actually also remove these semicolon.
So let's go back to the browser.
Let's go to inspect console and you'll see did we get an error because you're should have been get as
a stranger and actually yeah.
We also need to use these questions.
So let's go back to Chrome Let's just clean the console and make another request.
You see that we get these observer object and inside of it we get an array with all the details.
Oh the single questions and in case you're wondering what these observer objects use it that's a spatial
property added by a viewer.
Yes.
That is part of the activity system of the framework that allows you to track data changes and react
to them showing us the updates in the page.
Let's now go back to the editor so I can just delete this console log statement and instead eat inside
of the DB glass container.
Let's define another diva.
And yeah we can add the paragraph with class margin both to zero.
We've posted by and yet we can add a span with question that author Daniel below we can add in each.
We have question lots content and then below another paragraph we've asked what's in your question that
answers count and below that we can also add an H.R. tag.
Considering that you were referencing question as a single question about a way and considering that
we have a lot of questions we need to use a V for directive and in this case question in questions and
considering that we are using question subjects that have a primary key we can pass it as a value for
the Keep it up.
So question not okay.
So if we now go back to Chrome you can see that we have the questions of the first page of results.
And so for each event we have the authority.
The question itself and the number of answers.
One more thing that we can do is to change the color of the question so far.
So going back to home and those few here I can add a class to the Spanish author names so let's define
this colossal side of a style tag.
And so here you can add font weight balls and then as a color we can add the bootstrap like it add once
again and going back to the application one more time we see the taco a lot now is red.