To get started here all run NPM start to bring up that development server which serves the to mail file
and then you tap TSC dash W to start typing copulation in watch mode.
So did our app javascript fall is continuously rebuilt and we can view it in the running application
right now of course our application doesn't look too fancy.
It's an empty page so to get started there are many ways of doing that.
Now I want to start with making this for visible.
And now there are many ways I will actually write this application in an object oriented approach which
is 100 percent optional.
But since we learned about classes and so on I want to actually show how it is works and therefore I
will use this approach.
So inapt.
Yes I'll add a new class and I'll name it project input though the class name of course is entirely
up to you now in this class our goal has to be to get access to this template into the form in it and
to get access to this div here and then render our template in that div in the end.
So the content off the template form in that damn debt has to be our goal now to achieve this here and
project input.
I'll add a constructor where I intend one to get access to my template and to the place where it should
be rendered and for this here I'll add two properties on the fly with this the template element property
and then also the host element property.
The names are 100 percent up to you in the end.
My ideas that host element holds a reference to the element where I want to render my template content
in the end.
And while template element gives me access to the template that holds this content.
Now to get access to that template let's have a look at index H.M. and see how we can identify the template
which holds the form.
While it has this project input ideas so that looks like a good strategy.
So here we can use document get element by I.D. project input.
This gives us access to this template element.
Now a couple of important things here we get an error that template element is a property which does
not exist on project input.
Now to get rid of this we actually should add it as a new field here directly in the class and then
we can safely assign to it.
Now here I also want to be clear about the type which will be stored in there and that will be a h to
Mal template element.
This type is globally available because entity is conflict.
J is fall I added the DOM as a lip and that adds all these Dom types all these H Tim l element types
as typescript types to the entire project.
Now this introduces a new error here however you see that in the end this could be null when we get
the element by I.D..
Of course we know that it won't fail but typescript has no chance of knowing this because it's not going
to analyze our H html file so maybe no element with this idea exists and they offer this would yield
null.
Now here we say we don't store a null in there we just store each l template element so to eliminate
distain or we have to tell typescript that this will never be null.
And you know how you can do this.
You can add exclamation mark here.
An alternative of course just to all to show this if you would not be sure is to store it as let's say
in a constant and then check if template element is the truth.
So if it's not now and then store it inside off that if check here.
Now we're still getting an error but that will be a different error which I'll come back to later for
now.
This would do the trick if we're not sure now.
Here however I am sure.
And by the way if you're not sure you should provide a fallback in the Ellis case of course.
But here I am sure that we'll get such element and therefore we can simply add exclamation mark thereafter
to tell typescript all good.
We will get access to an element with that I.D..
Now as I mentioned we still have a number error of though property content is missing in type H html
element.
The problem here is that we're telling typescript that we're going to store a template element which
is of type h him l template element and indeed Dad will be the case.
Now of course get element by I.D. doesn't know which element id will return eventually.
It just knows it will be some H to mail element but not the which specialized wording of it.
If it's a div a paragraph a button or like in this case a template element get element by I.D. has no
chance of knowing that.
So in order to tell typescript about the type which we of course also know with certainty we can use
typecasting.
You learned about this as well.
There are two syntax is you can use the angled brackets at the beginning and then to type.
You want to cost this too with Dad you were telling typescript hey the thing.
The expression coming after this year.
This will be of that type.
Or alternatively you add as h Tim l template element which is the approach I will use.
And with that you guaranteed to typescript that what you fetch here will not be null and will be of
this type a lot of talking about selecting this but it is a common task and it is important to get this
right now let's continue with the host element here we should also add host element as a field and we
know that the host element where we actually want to render our project input will in the end be this
day of year.
That's where I want to render my form.
So here we can say h HTML div element.
That's the type of element we're going to add this to.
We could also be a bit less specific and just say h html element because here I really don't care whether
it's a div or not but since we know it with certainty why not add it.
Now I want to get access to debt dev of course where this should be added and if we have a look at the
index each time l file we see we can identify this div by the idea.
Again the app idea in this case.
So now back and apt yes we can use document get element by D one more time and reach out to the element
with the IED app.
Now we have the same problems as before.
This can be now.
So we have to add the exclamation mark because again we know with certainty that it won't and get element
by a D doesn't know that this will be a h [REMOVED] div elements that we should cost this year as well.
And with that we're now fine and we get access to all the elements we need to do well that was a lot
of talking about that with that unfortunately we haven't achieved much.
We have access to these elements but we're not rendering anything there.
So let's continue with that for that we need to import the content of this template element so basically
import what's inside the template tax and rendered is to the DOM we can do this right here in the constructor.
Because my idea and of course that's just my idea.
You could set this up differently but my idea is that when we create a new instance of this class I
immediately want to render a form that belongs to this instance.
So we'll do it right in the constructor.
There we can get our imported node or import that H HTML content or however you want to name it which
you can get with.
Document import node.
And that is a method provided on the global document object and to import node you pass a pointer at
your template element.
So this template element in the end or to be precise not the element but dot content their content is
a property that exists on H2 and template elements.
And it simply gives a reference to the content of the template.
So to the H to note code between the template tax import node all takes a second argument which defines
whether it should import is with a deep clone or not.
So all levels of nesting inside of the template and I definitely want to do that.
So I will provide true here.
Now we have the imported node and as you see this is of type document fragment which typescript assumed
or inferred automatically.
Now we can use that imported node.
And of course I want to use it to render some content for that.
I will add a new method a private method which I'll name attach.
You don't need to do that.
I just want to split my selection and rendering logic instead of attach.
I will reach out to the host element so the place where I do want to render my content and call insert
adjacent element which is a default method provided by the browser in the end in javascript to insert
the HD hymnal element and insert adjacent element first of all takes a description of where to insert
it.
So there you can inserted after the beginning of the element you are targeting.
So right after the opening tag of host element before the beginning so before the opening tag before
the end tag or after the end tag.
And here I will go for ofter begin to insert it right at the beginning of the opening tag and then the
thing I want to insert is my imported note.
However first of all that's a constant only available in the constructor.
And second that's a document fragment we couldn't inserted like this.
Instead we need to get access to concrete H html element in there which we can store in another property
element which we also have to add as a field up there which can be of type H2 male element or in our
case actually we know it will be inside off the template here so it will be a form that's the first
element in that template.
So here we can say it will be a h Tim l form element and then here this element is equal import node
first element child and now we just have to tell typescript again that this will be a H.M. form element.
Now this element is now de concrete property that points at the node we want to insert.
So down there and insert adjacent element we insert this element here.
Now we just need to make sure that here in the constructor at the end of it we call attach.
So does private attach method.
So did this code also executes.
And now with auto formatting this is how my finished code looks like.
So that now is the project input class and fewer radically when we instantiated it should render to
form.
Now let's give it a try.
Below the class let's simply create a new constant perch.
Input for example name is up to you and call new project input like this.
And if we now save that it should recompile and reload.
And if you go back to the browser indeed you should see that form here.
That's pretty neat because with that we made our first very important step.
We have our four rendered and even though a lot is missing that's better than nothing.
This forum is coming from the index H to mail file and it's rendered with the help of our object oriented
typescript code up there.