With all our inheritance work out of the way.
Let's come back to rendering list items.
Let's render more details there.
And as I mentioned let's also make sure we render them differently.
Thus far we've followed an object oriented approach.
And for example for our project list we have a class.
And when we instantiate that class such a box gets rendered here and the same for the input.
We have a project input class and when we instantiate that this project input area here at the top gets
rendered.
Now why don't we do the same for a project item and then inside of project list and render projects
instead of creating a list item like this.
We would just instantiate our project item class and in the constructor of that project item class we
would then do all the initialization and so on.
That is my idea at least now as always you can pass the video here and tried as on your own first but
after a short break which should give you to pass the video if you want to we'll do it together so let's
do that together and for that above the project list class I will add the project item class and this
will be the class responsible for rendering a single project item.
Now the project item class should also extend the component because it will be a class that is responsible
for rendering something on the screen and that is what we have our component class for right.
That is what we built it for.
So did we pass a template a host element and so on.
So in Project item we of course need a constructor a constructor where we then also have to call super
and actually before we called super let's set these generic types for the base class for inheriting.
Keep in mind the first type we pass in there is the host element.
So where we want to render something.
The second generic type you pass in is the element we do render.
So in the case of the project item that means that the first element we pass in is since it's the place
where we want to render something is an H Tim L..
You list that unordered list because every project item will be rendered inside of a well unordered
list.
And the second element will be a h to l l I element so the concrete list item element which will be
created now to super we need to provide the I.D. of the element where the project items should be rendered
in and of course that I.D. is not fixed because we have to lists where the item could be rendered to.
So I expect to get that idea here in the constructor there.
I want to get the host I.D. let's say which should be a string and we can forward that to super.
However the first thing we forward to super is the template I.D. for a single list item and that is
DESC template here so we can just grab that.
Now of course that's a very simple template.
You could argue whether you really need that.
It's just a list item we could create that and code with document create element as well.
But in order to be able to reuse our component base class which relies on templates we will use this
approach.
So a single project this template I.T. host I.D. then SD idea one go forward to the base class constructor
then to answer the question whoever does should be rendered at the beginning or at the end.
Well every new list item should actually be added to the end of the list though that is totally up to
you.
You can also add it to the beginning if you want to.
But here all go with the end and therefore I will pass falls here and then forward a new element idea.
So the idea that should be assigned to the newly created element I expect to get that from outside as
well.
Because that will also differ for every project item we will render multiple such items after all.
So here I expect to get the idea which should all be a string on which I then just forward.
So that's now the constructor now.
It would also make sense to store the project that belongs to this project item in this project.
Item class and with project I mean the project based on our project class which we created up there.
This is basically what we work with the data we work with and I want a store to project which belongs
to this rendered project item in that project.
Item class so therefore here we can add a private property project for example which should be of type
project like this in the constructor.
We then you get the idea and we can simply change this to actually get the project here like this and
then simply say this project equal project and here.
Since every project has ideas property we just forward project ideas.
I think that set up makes a bit more sense.
Now we also need to add a couple of methods.
We need to add configure method of course we need to add render a content method that is required by
our base class which we're extending and it will also call configure and render content here at the
end of the constructor.
Now regarding the configuration there is nothing we need to do right now for the content we want to
render.
There definitely is work to do.
Now we have a very simple template here and we could actually changed this year in the index each time
outfall to be a bit more complex so that every project has a h to tak has a h free tag below that let's
say and also has a paragraph so we can output the title of the project the number of persons assigned
maybe and then the description and then here in Apt yes and render content we just need to reach out
to these different elements in our element.
So 2D H2 to tag and so on and then insert some content.
So there we can reach out to this element which is our rendered element so which is our rendered l I
element and in there we now need to select these different things so we can use query selector age 2
and set the text content here.
Let's say to this start project a title to render the title there.
Of course we should add an exclamation mark here to make it clear that we'll always get this element
which we know with certainty because it's part of our template well then actually we can just repeat
this but now look 48.
Free tack and there.
I want to output the number of persons however where people is the property name.
However all tweak does a little bit.
Number one this year is a number and this one's a string.
So actually I'll call to string here but that's not the main problem.
Actually I want to tweak this so that it outputs more than just a number here but I'll come back to
that.
First of all let's repeat this one more time and query forward a paragraph here and set does equal to
this project description.
Now again I will tweak this later for now.
Let's leave it as it is.
And with that we have a project item that should be rendered and that should then out all those set
its content.
So now we need to use to project item into place to use it as a project list because that renders the
list of projects and they are specifically and render projects.
This is where we need to make sure that we render our project items here we do go through all the project
items in assigned projects and assigned projects.
Is this property here which has a list of where an array of projects.
So now here in this loop instead of creating a list item manually and so on I will get rid of all of
that and simply say new project item here and now to project item we need to pass the idea of the host.
Now that of course is the I.D. that was set on our list item here.
So basically this stored element dot I.D. That's the idea of the host element because this element which
is the unordered list should be the host then second argument here is the project and that's purge item
here basically.
So this constant which we get inside of the loop and now the attachment will happen inside of project
item or inside of the base class of the component class which project item extends and instantiating
project items should be all we need to do.
So if we save that and we go back and we half this code here again.
Or we have to input again.
You see this gets rendered and this doesn't look too bad now.
There are two things which I don't like.
Of course that bullet point here not too fond of that and just having the free here all and not super
happy about this.
So how can we fix this now to fix the bullet point let's inspect our content and what we see there is
that the list item actually is rendered outside of the unordered list.
So it's not inside of it.
If it were inside then it would work properly but I can't drag it there.
So we need to make sure it gets rendered inside of the UN or a list so let's find out why.
That's not the case.
It's probably not the case because in Project item I pass falls here to the base class constructor and
passing false here means it's not getting inserted at the start and that in turn means that an attach
we have before and as a value here where it's getting inserted.
This is however what we want to have happen.
So that's probably not the problem.
Well the problem is still is dead.
Of course we're inserting it in the host element.
And now let's think again what's the host element of project list.
And that's in the end what matters here.
Because when we render our projects we create a new project item and a foreword forward the I.D. of
our element here of the rendered element in the project list to project item.
So Dad will then be the ideal of the host element of a single project item.
But what is this element here.
This element here is not the unordered list.
We have in that box it's the box itself it's our section.
If we inspect the template we see the section here is what actually gets rendered for our project list
class it's not just the list it's the section which also includes a header.
So we actually need to get access to the list inside of our element here and then get access to the
ideas off that list because here we do actually set an idea on that list.
So there will be an I.D. We just have to grab the right one.
So getting the idea off the element itself is simply not correct.
Instead here we should get the idea of the unordered list in our element and we know with certainty
that there will be an unordered list so we can skip the null check by adding the exclamation mark.
Now with that added If we add a new element here this looks better now to bullet point is gone because
now the proper styling is applied since the ally the list item is now really added inside of the unordered
list as you can see now that's one thing.
Now let's move on to that 5 because just outputting a 5 here is not really what I want to do.
How about putting a bit more useful information.